User Tools

Site Tools

Translations of this page:

Sidebar

Documentation index

  • New Style Rotation
new_rotation_hints

New Rotation Hints

Setting GET parameters

This is one the most important things to understand. As mentioned in 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

<?php
$_GET['group_name'] = 'phones';
$_GET['force_template'] = 'super_template';
include('./scj/tube/index.php');

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/

<?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 } ?>

Rating

Add styles

<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>

Add JS script to make stars selectable

<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',
				{
				'content_id': '<!--GALLERY_MD5-->',
				'action': 'rating',
				'rating': value
				},
  			function(data) {
        	    $('#rating_div').html('Thank you!');
	  			}
			);
	}
	});
});
</script>

adding stars ..

<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>

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

<? if(<!--RATING--> > 0) echo '*' ?> 
<? if(<!--RATING--> > 1) echo '*' ?> 
<? if(<!--RATING--> > 2) echo '*' ?> 
<? if(<!--RATING--> > 3) echo '*' ?> 
<? if(<!--RATING--> > 4) echo '*' ?> 

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

<script src='/scj/includes/js/jquery.js' type="text/javascript"></script> 

<script>
function post_rating(value) {

$.get('/scj/tube/index.php',
	{
	'content_id': '<!--GALLERY_MD5-->',
	'action': 'rating',
	'rating': value
	},
	function(data) {
   	    $('#rating_div').html('Thank you!');
	}
);

}

</script>

Adding vote buttons

<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.

That's it )

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 example) and example 2.

How to do it

  • add JS code into your template , it rotates thumbs with id starting with 'rot_'
<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>
  • adding rot_ id to thumbs (changing subtemplate)
<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> 

notice 2 points here

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

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

<?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

2. Now you have to include this template into each template where you are going to use those words

<!--INCLUDE_TEMPLATE_languages-->

3. and replace words in templates with variables

Most popular ->  <?=$lang['most_popular']?>
Order By Date -> <?=$lang['order_by_date']?>
and so on

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

add a link like 

http://domain/?force_lng=de (and so on any language based on your language array $my_keywords['de'])

That's it.

Comments

Adding AJAX code to add comments

<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',
		'content_id': '<!--GALLERY_ID-->',
		'captcha': $('#captcha').val(),
		'username': $('#username').val(),
		'comment': $('#comment').val()
		},
	function(data) {
		var t = data.split('|');
		if (t[0] == 'ERROR') {
			$('#comment_error').text(t[1]);
		} else {
			$('#comment_error').text(' ');
	    	$('#add_comment').html('Thank you ! Your comment will be reviewed by admin.');
	    }

		}
	);
}
</script>

Add html form

<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>

and output existing comments

<!--TOTAL_COMMENTS-->

<comments num=1-10>
<!--DATE--> <!--USERNAME--> : <!--COMMENT-->
</comments>

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'
<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>
  • add id='rot..' for all thubms in subtemplate like
<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> 

That's it.

Note. there are 2 points you have to understand

id='rot<!--ID-->' - JS tries to roll there thumbs only
rel="<!--ALL_THUMBS-->" - here script outputs all available thumbs for this gallery

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

<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>

not that <!–THUMB_LINK–> has been moved to rot_id

2. add some JS code to <head> section of your template

<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>

And that's it. it will add the parameter on click only, so surfer won't see it on 'mouseover'.

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

RewriteCond %{QUERY_STRING} ^(.+)$ 
RewriteRule ^gallery/([^/]+)/index.html$ /scj/cgi/out.php?link=images/%{QUERY_STRING}&url=content&slug=$1 [L]

to

RewriteCond %{QUERY_STRING} ^param=(.+)$
RewriteRule ^gallery/([^/]+)/index.html$ /scj/cgi/out.php?link=images/%1&url=content&slug=$1 [L]

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:

subtemplate 

$my_var = explode('x', '<!--THUMB_LINK-->');

in $my_var  you'll get in array like 

Array
(
[0] => 12
[1] => 34
[2] => 56
)

now you can create 'your style' link

an example with acb

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'];
}

This way you can have any links you want.

Quick Pagination

Basic pagination looks like

<navigation>
<li><a href="/category/<!--CATEGORY_ID-->/<!--CATEGORY_NAME-->/<!--SORT_ORDER-->/<!--PAGE_NUM-->/" title="<!--PAGE_NUM-->"><!--PAGE_NUM--></a></li>
</navigation>

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.

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 } ?>

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

<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>
<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>

and a search field

<input class=inputbox value='' type="text" size="30" id="search_field"> <br>

You can notice that script requests template 'search_suggest'. Here it is

<?php
header('Content-Type: application/xml');
?>{
"query":"<!--ESCAPED_GET_QUERY-->",
"suggestions":[
{"value":"","data":""}

<thumb search_log=all num=1-10 skip_search_log=true search=GET_QUERY>
,{"value":"<!--ESCAPED_SEARCH_QUERY-->","data":"<!--ESCAPED_SEARCH_QUERY-->"}
</thumb>

]}

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.

You can also suggest results based on existing galleries. Basically it's pretty much the same

styles

<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>

a field

<input class=inputbox value='' type="text" size="30" id="search_field"> <br>

JS 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>

Another template, let's call it 'gallery_search_suggest'

<?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>

]}

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

new_rotation_hints.txt · Last modified: 2017/06/12 12:51 by admin