SmartCJ Wiki

User Tools

Site Tools

Trace:
new_rotation_hints

Differences

This shows you the differences between two versions of the page.

Link to this comparison view

Both sides previous revision Previous revision
Next revision 		Previous revision
new_rotation_hints [2017/06/12 12:51]
admin [Suggestions : Based on regular search] 		new_rotation_hints [2023/01/25 16:05] (current)
admin
Line 1: Line 1:
 +====== New Rotation Hints  ======
 +
 +
 +===== Setting GET parameters  =====
 +
 +This is one the most important things to understand. As mentioned in [[New Rotation Templates#How it works]] all the ages are not static, but generated 'on-the-fly' by the same script and you get different results based on request parameters and template. For example /scj/tube/index.php?group_name=phones outputs all images from 'phones' group, and /scj/tube/index.php?group_name=cars - from groups 'cars'. But on site you can use links like /category/phones/ and /category/cars/ - thanks to mod_rewrite
 +
 +In this example /scj/tube/index.php?group_name=phones - group_name=phones is a GET parameter.
 +
 +What you are supposed to understand after reading this information is how to pass parameters to /scj/tube/index.php and there are few ways to do it.
 +
 +**Option 1**
 +
 +Direct url to /scj/tube/index.php?group_name=phones . 
 +
 +**2 - rewrites**
 +
 +Lets say we want to output group 'phones' using template 'super_template' , direct URL - /scj/tube/index.php?group_name=phones&force_template=super_template 
 +
 +Rewrite 
 +
 +  RewriteRule ^super_phones\.html$ /scj/tube/index.php?group_name=phones&force_template=super_template
 +
 +and you get an URL like this - http://yourdomain/super_phones.html.
 +
 +**3 - file **
 +
 +The same task for /scj/tube/index.php?group_name=phones&force_template=super_template. 
 +Create file super_phone.php 
 +
 +<code>
 +<?php
 +$_GET['group_name'] = 'phones';
 +$_GET['force_template'] = 'super_template';
 +include('./scj/tube/index.php');
 +</code>
 +
 +and you get URL like  http://yourdomain/super_phones.php
 +
 +===== Different titles =====
 +
 +There are some tricks to get different titles for pages generated using the same template.
 +
 +For example  'sort' : domain/category/asd/1/ctr/ and domain/category/asd/1/date/ 
 +
 +<code>
 +<?php if ($_GET['order'] == 'ctr') {?>
 +
 +<title>Site order by CTR </title>
 +
 +<?php } elseif ($_GET['order'] == 'date') { ?>
 +
 +<title>Site order by date </title>
 +
 +<?php } else { ?>
 +
 +<title>Default order (default = by ctr ) </title>
 +
 +<?php } ?>
 +
 +</code>
 +
 +
 +===== Rating =====
 +
 +Add styles
 +
 +<code>
 +<style>
 +div.rating-cancel,div.star-rating{float:left;width:17px;height:15px;text-indent:-999em;cursor:pointer;display:block;background:transparent;overflow:hidden}
 +div.rating-cancel,div.rating-cancel a{background:url(/scj/tube/delete.gif) no-repeat 0 -16px}
 +div.star-rating,div.star-rating a{background:url(/scj/tube/star.gif) no-repeat 0 0px}
 +div.rating-cancel a,div.star-rating a{display:block;width:16px;height:100%;background-position:0 0px;border:0}
 +div.star-rating-on a{background-position:0 -16px!important}
 +div.star-rating-hover a{background-position:0 -32px}
 +/* Read Only CSS */
 +div.star-rating-readonly a{cursor:default !important}
 +/* Partial Star CSS */
 +div.star-rating{background:transparent!important;overflow:hidden!important}
 +/* END jQuery.Rating Plugin CSS */
 +</style>
 +</code>
 +
 +
 +Add JS script to make stars selectable 
 +
 +<code>
 +<script src='/scj/includes/js/jquery.js' type="text/javascript"></script>
 +<script src='/scj/includes/js/jquery.rating.pack.js' type="text/javascript" language="javascript"></script>
 +<script>
 +$(function(){
 + $('.auto-submit-star').rating({
 + callback: function(value, link){
 + $('#rating_div').html('Posting...');
 +
 + $.get('/scj/tube/index.php',
 + {
 + 'gallery_id': '<!--GALLERY_ID-->',
 + 'action': 'rating',
 + 'rating': value
 + },
 +  function(data) {
 +            $('#rating_div').html('Thank you!');
 +   }
 + );
 + }
 + });
 +});
 +</script>
 +</code>
 +
 +
 +
 +adding stars ..
 +
 +<code>
 +<h4>Rate this movie:</h4> <div id='rating_div'>    
 +    <input class="auto-submit-star" type="radio" name="rating" value="1"/ <? if(<!--RATING--> > 0) echo 'checked' ?> >
 +    <input class="auto-submit-star" type="radio" name="rating" value="2"/ <? if(<!--RATING--> > 1) echo 'checked' ?> >
 +    <input class="auto-submit-star" type="radio" name="rating" value="3"/ <? if(<!--RATING--> > 2) echo 'checked' ?> >
 +    <input class="auto-submit-star" type="radio" name="rating" value="4"/ <? if(<!--RATING--> > 3) echo 'checked' ?> >
 +    <input class="auto-submit-star" type="radio" name="rating" value="5"/ <? if(<!--RATING--> > 4) echo 'checked' ?> >
 +</div>
 +</code>
 +
 +
 +
 +That's it.
 +
 +
 +PS To output rating use <!--RATING--> - it's a number so you can show in any way you want it.
 +
 +for example
 +
 +<code>
 +<? if(<!--RATING--> > 0) echo '*' ?> 
 +<? if(<!--RATING--> > 1) echo '*' ?> 
 +<? if(<!--RATING--> > 2) echo '*' ?> 
 +<? if(<!--RATING--> > 3) echo '*' ?> 
 +<? if(<!--RATING--> > 4) echo '*' ?> 
 +</code>
 +
 +
 +
 +===== Rating +1\-1 like\dislike =====
 +
 +and other 2-options rating systems
 +
 +Actually the trick is simple: we leave only 2 options to choose. It's gonna be 1 and 2. Lets say 1 means "dislike", and 2 - "like". So if average is 1.5 that means 50% of visitors like it. 1.75 - means 75% like, 25 dislike. It should be clear.
 +
 +What to do:
 +
 +Add JS script 
 +<code>
 +
 +<script src='/scj/includes/js/jquery.js' type="text/javascript"></script> 
 +
 +<script>
 +function post_rating(value) {
 +
 +$.get('/scj/tube/index.php',
 + {
 + 'gallery_id': '<!--GALLERY_ID-->',
 + 'action': 'rating',
 + 'rating': value
 + },
 + function(data) {
 +        $('#rating_div').html('Thank you!');
 + }
 +);
 +
 +}
 +
 +</script>
 +</code>
 +
 +Adding vote buttons
 +
 +<code>
 +
 +<div id='rating_div'>
 +current rating = <?=(<!--RATING--> == 0) ? 'not rated' : round( (<!--RATING--> - 1) * 100 ) . '%'?> <br>
 +rate it: 
 +
 +<span onclick='post_rating(2)' style="cursor: pointer"> +1 </span> ............................
 +<span onclick='post_rating(1)' style="cursor: pointer"> -1 </span>
 +
 +</div>
 +
 ++1 and  -1 can be replaced with whatever you want.
 +
 +</code>
 +
 +
 +That's it )
 +
 +
 +===== Rotating thumbs of a gallery  =====
 +
 +Thumbs rolling is when we have lets say 5 thumbs from the same gallery and when you hover mouse cursor over a thumb it starts to show the rest of those 5 thumbs. Take a look at demo here [[http://demo.smartcj.com/cat/14/7%20Demo2%20%20Taylor/ctr/1/content_list_pic/image/|example]])  and [[http://demo.smartcj.com/cat/14/7%20Demo2%20%20Taylor/ctr/1/content_list_mov/movie/|example 2]].
 +
 +How to do it
 +  * add JS code into your template , it rotates thumbs with id starting with 'rot_'
 +<code>
 +
 +<script src='/scj/includes/js/jquery.js'></script>
 +
 +<script>
 +$(document).ready(function() {
 +
 + $("img[id^=rot]").bind('mouseenter', function() {
 + $(this).attr('rotating', 1);
 + StartSlide($(this).attr('id'));
 + }).mouseleave(function() {
 + $(this).attr('rotating', 0);
 +        if ($(this).attr('original_src')) $(this).attr('src', $(this).attr('original_src'));
 + });
 +
 +});
 +
 +
 +function StartSlide(id) {
 + if (!$('#' + id).attr('rotating') || $('#' + id).attr('rotating') == 0) return false;
 +
 +    if (!$('#' + id).attr('original_src')) $('#' + id).attr('original_src', $('#' + id).attr('src'));
 +
 + var images = $('#' + id).attr('original_src') + ',' + $('#' + id).attr('rel');
 +    images = images.split(',');
 +    var cur = $('#' + id).attr('current_img');
 +
 +    cur = parseInt(cur);
 +    cur = (!cur || cur == 0) ? 1 : (cur+1);
 +
 +    cur = (!images[cur]) ? 0 : cur;
 +    $('#' + id).attr('current_img', cur);
 +
 +  var preload = new Image();
 +
 + if (cur == 0) {
 + preload.src = $('#' + id).attr('original_src');
 + } else {
 + preload.src = images[cur];
 + }
 +
 +    if ($('#' + id).attr('rotating')) setTimeout("ChangeSRC('"+id+"', '"+preload.src+"')", 700);
 +
 +}
 +
 +function ChangeSRC(id, src) {
 + if (!$('#' + id).attr('rotating') || $('#' + id).attr('rotating') == 0) return false;
 + $('#' + id).attr('src', src);
 +    StartSlide(id);
 +}
 +</script>
 +
 +</code>
 +
 +  * adding rot_ id to thumbs (changing subtemplate)
 +<code>
 +
 +<a href="/gallery/<!--SAFE_DESC-->/<!--GALLERY_ID-->/index.html?<!--THUMB_LINK-->" title="<!--ALT-->">
 +<img id='rot<!--ID-->' src="<!--THUMB_URL-->" class="t_img" alt="" rel="<!--ALL_THUMBS-->" />
 +</a> 
 +</code>
 +
 +notice 2 points here
 +<code>
 +id='rot<!--ID-->' - script rotates only those thumbs that has id starting with 'rot'
 +rel="<!--ALL_THUMBS-->" - here script enumerates all available thumbs for this gallery
 +</code>
 +
 +
 +===== Internationalization ( i18 ) =====
 +
 +it's pretty easy to translate site's menu (links like Most popular, Longest Videos and so on) into different languages.
 +
 +1. Create custom template 'languages' with set of words like
 +
 +<code>
 +<?php 
 +$my_keywords['en'] = array(
 +  'most_popular' => 'Most popular',
 +  'order_by_date' => 'Order By Date',
 +  and so on
 +);
 +
 +$my_keywords['es'] = array(
 +  'most_popular' => 'Lo más leído',
 +  'order_by_date' => 'Ordenar por Fecha',
 +  and so on
 +);
 +
 +
 +$my_keywords['de'] = array(
 +  'most_popular' => 'Populärste',
 +  'order_by_date' => 'Sortiert nach Datum',
 +  and so on
 +);
 +
 +and so on as many languages as you want.
 +
 +Now you have 2 options to setup language for each user
 +
 +using browser language
 +
 +if (strstr($_SERVER['HTTP_ACCEPT_LANGUAGE'], 'es')) {
 +  $lang = $my_keywords['es'];
 +} elseif (strstr($_SERVER['HTTP_ACCEPT_LANGUAGE'], 'de')) {
 +  $lang = $my_keywords['de'];
 +} else $lang = $my_keywords['en'];
 +
 +or geo_ip
 +
 +if ($_SERVER['GEOIP_COUNTRY_CODE'] =='SP') {
 +  $lang = $my_keywords['es'];
 +} elseif ($_SERVER['GEOIP_COUNTRY_CODE'] =='DE') {
 +  $lang = $my_keywords['de'];
 +} else $lang = $my_keywords['en'];
 +
 +
 +Hopefully those examples are pretty self explaining 
 +
 +at the ens of template you can add a cookie
 +
 +if ($_GET['set_lng'] and isset($my_keywords[$_GET['set_lng']])) {
 +  setcookie('force_lng', $_GET['set_lng'], time() + 86400);
 +  $lang = $my_keywords['en'];
 +} elseif ($_COOKIE['force_lng'] and isset($my_keywords[$_COOKIE['force_lng']])){
 +  $lang = $my_keywords[$_COOKIE['force_lng']];
 +}
 +
 +That's it for this template
 +</code>
 +
 +2. Now you have to include this template into each template where you are going to use those words
 +
 +<code>
 +<!--INCLUDE_TEMPLATE_languages-->
 +</code>
 +
 +
 +3. and replace words in templates with variables
 +<code>
 +Most popular ->  <?=$lang['most_popular']?>
 +Order By Date -> <?=$lang['order_by_date']?>
 +and so on
 +</code>
 +
 +From this point it should work as it supposed to.
 +
 +4. Now we want to add an ability for user to force switch to a selected language 
 +
 +<code>
 +add a link like 
 +
 +http://domain/?force_lng=de (and so on any language based on your language array $my_keywords['de'])
 +
 +</code>
 +
 +
 +That's it.
 +
 +
 +===== Comments =====
 +
 +Adding AJAX code to add comments
 +
 +<code>
 +
 +<script src='/scj/includes/js/jquery.js' type="text/javascript"></script> ---- don't use this string twice
 +
 +<script>
 +function post_comment() {
 +
 + $.post(
 + '/scj/tube/',
 + {
 + 'action': 'add_comment',
 + 'gallery_id': '<!--GALLERY_ID-->',
 + 'captcha': $('#captcha').val(),
 + 'username': $('#username').val(),
 + 'comment': $('#comment').val()
 + },
 + function(data) {
 + if (data != 'OK') {
 + $('#comment_error').text(data);
 + } else {
 +    $('#comment_error').text(' ');
 +        $('#add_comment').html('Thank you ! Your comment will be reviewed by admin.');
 +         }
 +
 + }
 + );
 +}
 +</script>
 +
 +</code>
 +
 +
 +Add html form
 +
 +<code>
 +
 +<div id='comment_error'></div>
 +<div id='add_comment'>
 +<div class="clear"></div>
 +<h4>Add comment</h4>
 +
 +<FORM name="add_comment" method="POST">
 +
 +<div class="r_line">
 +<label>Name:</label> <input class="s_input" type="text" name='username' id='username' value="<?=$user['username']?>">
 +</div>
 +<div class="r_line">
 +<label>Comment:</label> <textarea class="s_text" class="ph2" name='comment' id='comment' rows=5 cols=35 value="Leave Your Comments Here"></textarea>
 +</div>
 +
 +<? if ($rot_settings['tube_comment_captcha']) {  ?>
 +<div class="r_line">
 +<label>Captcha:</label><div class="clear"></div><img src="/scj/tube/captcha.php" id="captcha_img" width="158" height="60" alt="Visual CAPTCHA" />
 +<input id='captcha' class="s_input" type="text" name='captcha' value="" />
 +</div>
 +<div class="r_line">
 +<input type='button' value='Post Comment' onClick='post_comment();'>
 +</div>
 +<? } ?>
 +</div>
 +
 +</form>
 +
 +</code>
 +
 +
 +and output existing comments
 +
 +<code>
 +
 +<!--TOTAL_COMMENTS-->
 +
 +<comments num=1-10>
 +<!--DATE--> <!--USERNAME--> : <!--COMMENT-->
 +</comments>
 +
 +</code>
 +
 +
 +That's it.
 +Note that comment moderation available for paid versions only.
 +
 +
 +
 +
 +
 +===== Thumb rolling =====
 +
 +Let's say you have 5 thumbs for each gallery, usually rotation engine tries to find the best one among them, but you can also "roll" those thumbs with mouseover ie thumbs will replace it other while mover cursor is over it.
 +
 +How to do it
 +  * Add some JS some that add rolling for all thumbs with швы starting with 'rot'
 +<code>
 +
 +<script src='/scj/includes/js/jquery.js'></script>
 +
 +<script>
 +$(document).ready(function() {
 +
 + $("img[id^=rot]").bind('mouseenter', function() {
 + $(this).attr('rotating', 1);
 + StartSlide($(this).attr('id'));
 + }).mouseleave(function() {
 + $(this).attr('rotating', 0);
 +        if ($(this).attr('original_src')) $(this).attr('src', $(this).attr('original_src'));
 + });
 +
 +});
 +
 +
 +function StartSlide(id) {
 + if (!$('#' + id).attr('rotating') || $('#' + id).attr('rotating') == 0) return false;
 +
 +    if (!$('#' + id).attr('original_src')) $('#' + id).attr('original_src', $('#' + id).attr('src'));
 +
 + var images = $('#' + id).attr('original_src') + ',' + $('#' + id).attr('rel');
 +    images = images.split(',');
 +    var cur = $('#' + id).attr('current_img');
 +
 +    cur = parseInt(cur);
 +    cur = (!cur || cur == 0) ? 1 : (cur+1);
 +
 +    cur = (!images[cur]) ? 0 : cur;
 +    $('#' + id).attr('current_img', cur);
 +
 +  var preload = new Image();
 +
 + if (cur == 0) {
 + preload.src = $('#' + id).attr('original_src');
 + } else {
 + preload.src = images[cur];
 + }
 +
 +    if ($('#' + id).attr('rotating')) setTimeout("ChangeSRC('"+id+"', '"+preload.src+"')", 700);
 +
 +}
 +
 +function ChangeSRC(id, src) {
 + if (!$('#' + id).attr('rotating') || $('#' + id).attr('rotating') == 0) return false;
 + $('#' + id).attr('src', src);
 +    StartSlide(id);
 +}
 +</script>
 +
 +</code>
 +
 +  * add id='rot..' for all thubms in subtemplate like
 +<code>
 +
 +<a href="/gallery/<!--SAFE_DESC-->/<!--GALLERY_ID-->/index.html?<!--THUMB_LINK-->" title="<!--ALT-->">
 +<img id='rot<!--ID-->' src="<!--THUMB_URL-->" class="t_img" alt="" rel="<!--ALL_THUMBS-->" />
 +</a> 
 +</code>
 +
 +
 +That's it.
 +
 +
 +Note. there are 2 points you have to understand
 +
 +<code>
 +id='rot<!--ID-->' - JS tries to roll there thumbs only
 +rel="<!--ALL_THUMBS-->" - here script outputs all available thumbs for this gallery
 +</code>
 +
 +
 +PS feel free to modify this code
 +
 +
 +===== Hide rotation parameter =====
 +
 +A regular link looks like 
 +
 +  /gallery/cool_gallery/index.html?12x34x56
 +
 +where  12x34x56 - is rotation parameter. It this a way for the script to understand what thumb has been clicked, at what page and so on. You can hide it from surfer, here's how to do it 
 +
 +1. In subtemplate you have something like 
 +
 +<code>
 +<a href="/gallery/<!--GALLERY_SLUG-->/index.html?<!--THUMB_LINK-->"> <img ...> </a>
 +
 +replace it by 
 +
 +<a href="/gallery/<!--GALLERY_SLUG-->/index.html" rot_id='<!--THUMB_LINK-->'> <img ...> </a>
 +
 +</code>
 +
 +not that <!--THUMB_LINK--> has been moved to rot_id
 +
 +
 +2. add some JS code to <head> section of your template
 +
 +<code>
 +<script type="text/javascript" src="/scj/includes/js/jquery.js"></script>
 +<script type="text/javascript">
 +$(document).ready(function(){
 + $('a[rot_id]').each(function(){
 + $(this).bind('click', function(){
 +     if ($(this).attr('href').indexOf('?') == -1) $(this).attr('href', $(this).attr('href')+ '?' + $(this).attr('rot_id'));
 + });
 + });
 +});
 +
 +</script>
 +</code>
 +
 +
 +And that's it. it will add the parameter on click only, so surfer won't see it on 'mouseover'.
 +===== How to change links /gallery/cool/index.html?123x45x678 =====
 +
 +
 +**For version 1.X only**
 +
 +
 +If you'd like to change links like /gallery to let's say /video - edit rewrites and templates.
 +
 +if you'd like to change rotation parameter (?123x45x678  part) there are some options
 +
 +
 +1. Если не нравится, что это видит серфер - check 'hide Rotation Params' at this page
 +
 +2. For SEO purposes - http://smartcj.com/wiki/doku.php?id=custom_galleries_and_google
 +
 +3. For google (another option) - make likes like 
 +
 +  /gallery/cool/index.html?link=images/123x45x678
 +
 +and in Google webmaster's tools (GWT) set &linkk parameter as 'not important'
 +
 +
 +In this case you should also change .htaccess
 +
 +  out.php?link=images/%{QUERY_STRING}
 +  should be replaced by
 +  out.php?%{QUERY_STRING}
 +  for all occurrences 
 +  
 +  and template like
 +  http://domain/gallery/<!--GALLERY_SLUG-->/index.html?link=images/<!--THUMB_LINK-->
 +
 +
 +**Options 2 for rotation parameter**
 +
 +if you'd like to have something not '&link='  
 +
 +in rewrites change
 +
 +<code>
 +RewriteCond %{QUERY_STRING} ^(.+)$ 
 +RewriteRule ^gallery/([^/]+)/index.html$ /scj/cgi/out.php?link=images/%{QUERY_STRING}&url=content&slug=$1 [L]
 +</code>
 +
 +to 
 +
 +<code>
 +RewriteCond %{QUERY_STRING} ^param=(.+)$
 +RewriteRule ^gallery/([^/]+)/index.html$ /scj/cgi/out.php?link=images/%1&url=content&slug=$1 [L]
 +</code>
 +
 +You can see 'param' here. So this is a way to use another word instead of 'link'
 +
 +Don't forget about links
 +
 +  href="/gallery/<!--GALLERY_SLUG-->/index.html?param=<!--THUMB_LINK-->
 +
 +
 +
 +**Option 3 if you want completely another style  ** 
 +
 +Tag <!--THUMB_LINK--> outputs something like '12x34x56', you can change it into something like &a=12&b=34&c=56 or &ppp=12.34.56 and so on, actually any thing.
 +
 +Here's an example:
 +
 +<code>
 +
 +subtemplate 
 +
 +$my_var = explode('x', '<!--THUMB_LINK-->');
 +
 +in $my_var  you'll get in array like 
 +
 +Array
 +(
 +[0] => 12
 +[1] => 34
 +[2] => 56
 +)
 +
 +</code>
 +
 +now you can create 'your style' link 
 +
 +an example with acb
 +
 +<code>
 +
 +out.php?url=....&a=<?=$my_var[0]?>&b=<?=$my_var[1]?>&c=<?=$my_var[2]?>
 +
 +then in common.php you have to assemble it back into a normal format, so script can understand it.
 +
 +if (isset($_GET['a'])) {
 +$_GET['link'] = 'images/' . $_GET['a'] . 'x' . $_GET['b'] . 'x' . $_GET['c'];
 +}
 +
 +</code>
 +
 +This way you can have any links you want.
 +
 +
 +===== Quick Pagination =====
 +
 +Basic pagination looks like
 +<code>
 +
 +<navigation>
 +<li><a href="/category/<!--CATEGORY_ID-->/<!--CATEGORY_NAME-->/<!--SORT_ORDER-->/<!--PAGE_NUM-->/" title="<!--PAGE_NUM-->"><!--PAGE_NUM--></a></li>
 +</navigation>
 +
 +</code>
 +
 +But if you have a big DB it takes time to calculate how much galleries you actually have in particular category, and at the same time user doesn't care if you have 122123 videos or 123344. You can actually type any numbers in you templates. 
 +
 +So here's what we can do to save some resources of your server: we don't count total results and output just a link to the next page.
 +
 +
 +<code>
 +
 +So if there's no <navigation> tag - the script doesn't count totals and we can use links like 
 +
 +<?php if ('<!--PREV_PAGE-->') { ?>
 +<li><a href="/category/<!--CATEGORY_ID-->/<!--CATEGORY_NAME-->/<!--SORT_ORDER-->/<!--PREV_PAGE-->/" title="<!--PREV_PAGE-->"><!--PREV_PAGE--></a></li>
 +<?php } ?>
 +
 +<?php if ('<!--NEXT_PAGE-->') { ?>
 +<li><a href="/category/<!--CATEGORY_ID-->/<!--CATEGORY_NAME-->/<!--SORT_ORDER-->/<!--NEXT_PAGE-->/" title="<!--NEXT_PAGE-->"><!--NEXT_PAGE--></a></li>
 +<?php } ?>
 +
 +</code>
 +
 +
 +Note, that in this case we also don't have TOTAL_ITEMS (actually it will output amount of galleries on the current page)
 +
 +
 +===== Suggestions Based on logged searches =====
 +
 +You can add 'suggested searches' so when user starts to type something in a search field you can show him similar requests. 
 +
 +Addings JS and styles to template
 +
 +<code>
 +
 +<script type="text/javascript" src="/scj/includes/js/jquery.js"></script> Это может быть уже и есть в странице.
 +<script type="text/javascript" src="/scj/includes/js/jquery.autocomplete.min.js"></script>
 +
 +
 +<script>
 + $(document).ready(function(){   
 +        $('#search_field').autocomplete({
 +         serviceUrl: '/scj/tube/index.php?force_template=search_suggest',
 +
 +            onSelect: function(suggestion, data) {
 +        $('#search_field').val(suggestion.value);
 +        }
 +        });
 + });
 +</script>
 +
 +</code>
 +  
 +  
 +<code>
 +<style>
 +.autocomplete-suggestions { border: 1px solid #999; background: #FFF; cursor: default; overflow: auto; }
 +.autocomplete-suggestion { padding: 2px 5px; white-space: nowrap; overflow: hidden; }
 +.autocomplete-selected { background: #F0F0F0; }
 +.autocomplete-suggestions strong { font-weight: normal; color: #3399FF; }
 +</style>
 +</code>
 +
 +
 +and a search field
 +
 +<code>
 +<input class=inputbox value='' type="text" size="30" id="search_field"> <br>
 +</code>
 +
 +You can notice that script requests template 'search_suggest'. Here it is
 +
 +<code>
 +<?php
 +header('Content-Type: application/xml');
 +?>{
 +"query":"<!--ESCAPED_GET_QUERY-->",
 +"suggestions":[
 +{"value":"","data":""}
 +
 +<search_log num=1-10 skip_search_log=true search=GET_query>
 +,{"value":"<!--ESCAPED_SEARCH_QUERY-->","data":"<!--ESCAPED_SEARCH_QUERY-->"}
 +</search_log>
 +
 +]}
 +</code>
 +
 +As you can see it is a regular template with a couple of new things like header -application/xml 
 +and a tag prefix <!--ESCAPED_ that has been described here already.
 +
 +
 +
 +===== Suggestions : Based on regular search =====
 +
 +You can also suggest results based on existing galleries. Basically it's pretty much the same
 +
 +
 +styles
 +
 +<code>
 +<style>
 +.autocomplete-suggestions { border: 1px solid #999; background: #FFF; cursor: default; overflow: auto; }
 +.autocomplete-suggestion { padding: 2px 5px; white-space: nowrap; overflow: hidden; }
 +.autocomplete-selected { background: #F0F0F0; }
 +.autocomplete-suggestions strong { font-weight: normal; color: #3399FF; }
 +</style>
 +</code>
 +
 +
 +a field
 +
 +<code>
 +<input class=inputbox value='' type="text" size="30" id="search_field"> <br>
 +</code>
 +
 +
 +JS code 
 +
 +<code>
 +<script type="text/javascript" src="/scj/includes/js/jquery.js"></script>
 +<script type="text/javascript" src="/scj/includes/js/jquery.autocomplete.min.js"></script>
 +<script>
 + $(document).ready(function(){   
 +
 +        $('#search_field').autocomplete({
 +         serviceUrl: '/scj/tube/index.php?force_template=gallery_search_suggest',
 +
 +        onSelect: function(suggestion, data) {
 +                location.href = suggestion.data;
 +        }
 +        });
 +
 +
 + });
 +
 +</script>
 +</code>
 +
 +
 +Another template, let's call it 'gallery_search_suggest'
 +
 +
 +<code>
 +<?php
 +header('Content-Type: application/xml');
 +?>{
 +"query":"<!--ESCAPED_GET_QUERY-->",
 +"suggestions":[
 +{"value":"","data":""}
 +
 +<thumb skip_search_log=true search=GET_QUERY num=1-10>
 +,{"value":"<!--ALT-->","data":"/gallery/<!--GALLERY_SLUG-->/index.html"}
 +</thumb>
 +
 +]}
 +</code>
 +
 +
 +
 +
 +===== Site with main niches =====
 +
 +Let's say we'd like to create a site with 3 main niches and X additional.
 +
 +Main niches: general (id 1) , gay (2) and shemale(3)
 +and for example 100 niches like 'teen' (id 4), amateur (id 5) and so on
 +
 +It's pretty obvious that if somebody wants to see 'general' - then he doesn't want to see the rest (niches 2 and 3) so we need kind of a general filter here.
 +
 +That's why all gallery belong to at least 2 groups: (1 2 or 3) and (4 or 5 for example). 
 +
 +When we show content we can limit galleries to a certain range , let's say a surfer wants to see teens and general only:
 +
 +  /?group_id=4&skip_group_id=2,3
 +  
 +If he wants to see teen but gay we exclude groups 1 and 3
 +
 +  /?group_id=4&skip_group_id=1,3
 +
 +The same works for search by tag
 +
 +  /?tag=...&skip_group_id=1,3
 +
 +
 +**Category thumbs**
 +
 +Settings - System Thumbs we can setup category thumbs for each main niches
 +
 +In this example we need 3 sets: for each niche 1 2 and 3. When we select category thumb (ie best thumb for this category) we need to exclude other 2 niches, and here's a field for it  : Skip group ids, comma separated 
 +
 +So let say for niche 1 (general) we don't want to see thumbs from 2 and 3 - so we add 2,3 into that field.
 +
 +We we output category thumbs we can specify the set we want to show
 +
 +  <category num=1-10 set_id=2 
 +  
 +Note what you can pass set id in URL like /?set_id=2
 +
 +  <category num=1-10 set_id=GET_set_id 
 + 
 +Note that some category thumb sets might miss galleries for some specific groups so we can add min_gallery_count filter to skip empty groups 
 +
 +<category num=1-10 set_id=GET_set_id min_gallery_count=1
  

Page Tools

Except where otherwise noted, content on this wiki is licensed under the following license: CC Attribution-Share Alike 4.0 International
CC Attribution-Share Alike 4.0 International Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki