Icy Phoenix

Archived phpBB Topics (Styles, Mods, Support) - FAP CUSTOMIZATION - Integration Of JS Rating Widget

whiskey_pete [ Wed 16 Jul, 2008 00:33 ]
Post subject: FAP CUSTOMIZATION - Integration Of JS Rating Widget

I'm not really sure if I should post this here or in the IP customisations forum

Anyway here's my problem:
The users on my site have been complaining for quite long that the way of rating pics is too slow and complicated.I recently searched google and found this very decent widget which seems to be highly customisible and easy to use.
So far so good

, but in order to save the rating for every pic the widget needs a unique URL to refer to for every single pic from the album.

On albun_showpage i used the {U_PIC_FULL_URL} function and it worked fine:
http://worldbiology.net/album_showp...8fbd1a3b9f094bb

this is the piece of code for the rating widget i used there:

Code: [Hide] [Select]

                <td valign="top" align="right">

                         <span class="genmed">{L_RATING}:</span>

                </td>

                <td valign="top" align="left">

                         <div class="js-kit-rating" title="Rated item" view="combo" path="{U_PIC_FULL_URL}" permalink="" imageurl="images/rates2" imagesize="17x17"></div>

                         <script src="ratings.js"></script>

                </td>

                </tr>

Unforunately such function doesn't exist in album_cat.php and since my knowledge of php coding is very limited i was unable to reproduce it there

Can someone please tell me what showld I do to get the same urls in both album_sowpage.php and album_cat.php?

This is my testing site: http://worldbiology.net/test-cat-1-ac1.html

I think that if working properly this widget will make a great customisation for FAPs rating systhem.
Thank you in advance for any thoughts on this.

Artie [ Wed 16 Jul, 2008 04:12 ]
Post subject: Re: Integration Of JS Rating Widget

See if this will work for you

OPEN
includes/album_mod/album_hierarchy_sql.php

FIND

Code: [Hide] [Select]

'PIC_ID' => $picrow[$j]['pic_id'],

AFTER ADD

Code: [Hide] [Select]

'U_PIC_FULL_URL' => $server_path . ALBUM_UPLOAD_PATH . $picrow[$j]['pic_filename'],

In album_cat_body.tpl use (anywhere between  and )

Code: [Hide] [Select]

{index_pics_block.picrow.pic_detail.U_PIC_FULL_URL}

whiskey_pete [ Wed 16 Jul, 2008 11:31 ]
Post subject: Re: Integration Of JS Rating Widget

It works, but only on album_cat.tpl. The widget still cant make a refrance bettwen tne pic on album_showpage.tpl and the thumbnail on album_cat.tpl
I made a test to see what is the output of the two functions by placing this code from anothwr thread:

for {U_PIC_FULL_URL}

Code: [Hide] [Select]

        <td class="row1" align="left"><input type="text" readonly onClick="this.select();" value="{U_PIC_FULL_URL}" size="65" style="background-color: #EFEFEF;"></td>

output is http://WorldBiology.net/files/album/d487cef125753f0852423f9a8ee25f65.png

for {index_pics_block.picrow.pic_detail.U_PIC_FULL_URL}

Code: [Hide] [Select]

        <td class="row1" align="left"><input type="text" readonly onClick="this.select();" value="{index_pics_block.picrow.pic_detail.U_PIC_FULL_URL} " size="65" style="background-color: #EFEFEF;"></td>

output is files/album/d487cef125753f0852423f9a8ee25f65.png

Artie [ Wed 16 Jul, 2008 23:20 ]
Post subject: Re: Integration Of JS Rating Widget

I assume you need the absolute path (http://WorldBiology.net/files/album/d487cef125753f0852423f9a8ee25f65.png) in both showpage and album_cat for all to work correctly?
Adding the following code to what you have already added should give you that absolute path in album_cat...

OPEN album_heirarchy_sql.php
FIND

Code: [Hide] [Select]

$template->assign_block_vars('index_pics_block.picrow.pic_detail', array(

BEFORE ADD

Code: [Hide] [Select]

// server_path required for JS-Kit's Ratings widget

	$server_protocol = ( $board_config['cookie_secure'] ) ? 'https://' : 'http://';

	$server_name = trim($board_config['server_name']);

	$server_port = ( $board_config['server_port'] <> 80 ) ? ':' . trim($board_config['server_port']) . '/' : '/';

	$script_name = preg_replace('/^/?(.*?)/?$/', '1', trim($board_config['script_path']));

	$script_name = ( $script_name == '' ) ? '' : $script_name . '/';

	$server_path = $server_protocol . $server_name . $server_port . $script_name;

whiskey_pete [ Mon 28 Jul, 2008 15:49 ]
Post subject: Re: Integration Of JS Rating Widget

It Works! Thank you Artie

KugeLSichA [ Mon 04 Aug, 2008 17:10 ]
Post subject: Re: Integration Of JS Rating Widget

@whiskey_pete

is this running nice? maybe are you willing to share this with us? thx.

@MG
is it possible to integrate the rating block from topics to the album?? the functions is similar to the one which whiskey_pete uses...

whiskey_pete [ Tue 05 Aug, 2008 00:09 ]
Post subject: Re: Integration Of JS Rating Widget

Knowing what Artie told me it's really not hard to integrate the rating widget.

Demo site - may change with time

Please note that I don't have much experience with html or php, so the code below may contain errors (though its working fine on my test site). You are highly advised to back up the files you edit when installing this widget!

OPEN
includes/album_mod/album_hierarchy_sql.php

FIND

Code: [Hide] [Select]

'PIC_ID' => $picrow[$j]['pic_id'],

AFTER ADD

Code: [Hide] [Select]

'U_PIC_FULL_URL' => $server_path . ALBUM_UPLOAD_PATH . $picrow[$j]['pic_filename'],

FIND

Code: [Hide] [Select]

$template->assign_block_vars('index_pics_block.picrow.pic_detail', array(

BEFORE ADD

Code: [Hide] [Select]

// server_path required for JS-Kit's Ratings widget

   $server_protocol = ( $board_config['cookie_secure'] ) ? 'https://' : 'http://';

   $server_name = trim($board_config['server_name']);

   $server_port = ( $board_config['server_port'] <> 80 ) ? ':' . trim($board_config['server_port']) . '/' : '/';

   $script_name = preg_replace('/^/?(.*?)/?$/', '1', trim($board_config['script_path']));

   $script_name = ( $script_name == '' ) ? '' : $script_name . '/';

   $server_path = $server_protocol . $server_name . $server_port . $script_name;

OPEN
templates/mg_themes/album_showpage_body.tpl

FIND

Code: [Hide] [Select]

		<!-- BEGIN rate_switch -->

		<tr>

			<td valign="top" align="right"><span class="genmed">{L_RATING}:</span></td>

			<td valign="top" align="left">

				<span class="genmed"><b>{PIC_RATING}</b></span>

				<!-- BEGIN rate_row -->

				<form name="ratingform" action="{S_ALBUM_ACTION}" method="post" onsubmit="return checkFormRate();">

					<select name="rating">

						<option value="-1">{S_RATE_MSG}</option>

						<!-- BEGIN rate_scale_row -->

						<option value="{rate_switch.rate_row.rate_scale_row.POINT}">{rate_switch.rate_row.rate_scale_row.POINT}</option>

						<!-- END rate_scale_row -->

					</select>&nbsp;

					<input type="submit" name="submit" value="{L_SUBMIT}" class="mainoption" />

				</form>

				<!-- END rate_row -->

				<br />

			</td>

		</tr>

		<!-- END rate_switch -->

REPLACE WITH

Code: [Hide] [Select]

		
                  <tr>

			<td valign="top" align="right"><span class="genmed">{L_RATING}:</span></td>

                        <td valign="top" align="left">

                        <div class="js-kit-rating" path="{U_PIC_FULL_URL}"></div>

                        <script src="http://js-kit.com/ratings.js"></script>

                       </td>

                  </tr>

OPEN
templates/mg_themes/album_cat_body.tpl

FIND

Code: [Hide] [Select]

{index_pics_block.picrow.pic_detail.RATING}

REPLACE WITH

Code: [Hide] [Select]

                        <center><div class="js-kit-rating" path="{index_pics_block.picrow.pic_detail.U_PIC_FULL_URL}" align="center"></div>

                        <script src="http://js-kit.com/ratings.js"></script></center>

For customisations like how to change the default stars with your own images please see here:
http://js-kit.com/ratings/custom.html

To increase reliability of the widget you can upload te ratings.js in to you root directory (I'm not very sure though if this is not a copyright violation)
You can suposedly also edit the .js file itself to localize it for your forum language. Just open the file in a text edittor and translate the variables you need in your language.

Mighty Gorgon [ Tue 05 Aug, 2008 02:25 ]
Post subject: Re: Integration Of JS Rating Widget

First of all thank you very much @whiskey_pete for your great "How To".

KugeLSichA wrote: [View Post]
@MG
is it possible to integrate the rating block from topics to the album?? the functions is similar to the one which whiskey_pete uses...

whiskey_pete,
Yes it is possible... but currently I am working on other things...

I have personally coded the rating in viewtopic... so the code is free and it is there ready to be used... it needs just someone with a bit of free time to implement it.

It shouldn't be difficult... anyone?