FAP CUSTOMIZATION - Integration Of JS Rating Widget

The time now is Sat 22 Feb, 2025 07:22 • All times are UTC + 1 Hour

FAP CUSTOMIZATION - Integration Of JS Rating Widget

Page 1 of 1

whiskey_pete

Joined: October 2007
Posts: 31
Location:

Bremen, DE

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: [Download] [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.

#1 Wed 16 Jul, 2008 00:33

Sponsors	Icy Phoenix is an open source project, you can show your appreciation and support future development by donating to the project.

Artie

Joined: January 2007
Posts: 833
Location:

Lone Star State

Re: Integration Of JS Rating Widget

See if this will work for you

OPEN
includes/album_mod/album_hierarchy_sql.php

FIND

Code: [Download] [Hide] [Select]

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

AFTER ADD

Code: [Download] [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: [Download] [Hide] [Select]

{index_pics_block.picrow.pic_detail.U_PIC_FULL_URL}

#2 Wed 16 Jul, 2008 04:12

whiskey_pete

Joined: October 2007
Posts: 31
Location:

Bremen, DE

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: [Download] [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: [Download] [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

#3 Wed 16 Jul, 2008 11:31

Artie

Joined: January 2007
Posts: 833
Location:

Lone Star State

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: [Download] [Hide] [Select]

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

BEFORE ADD

Code: [Download] [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;

#4 Wed 16 Jul, 2008 23:20

whiskey_pete Joined: October 2007 Posts: 31 Location: Bremen, DE	Re: Integration Of JS Rating Widget It Works! Thank you Artie ____________ Icy phoenix websites: dimitrovgrad4U.com \| WorldBiology.net
#5 Mon 28 Jul, 2008 15:49

KugeLSichA Joined: August 2006 Posts: 803 Location: Dresden	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... ____________ Play Games at GamesCampus!
#6 Mon 04 Aug, 2008 17:10

whiskey_pete

Joined: October 2007
Posts: 31
Location:

Bremen, DE

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: [Download] [Hide] [Select]

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

AFTER ADD

Code: [Download] [Hide] [Select]

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

FIND

Code: [Download] [Hide] [Select]

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

BEFORE ADD

Code: [Download] [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: [Download] [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: [Download] [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: [Download] [Hide] [Select]

{index_pics_block.picrow.pic_detail.RATING}

REPLACE WITH

Code: [Download] [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.

ratings.rar
Description:	Rating widget .js	Download
Filename:	ratings.rar
Filesize:	23.2 KB
Downloaded:	213 Time(s)

____________
Icy phoenix websites: dimitrovgrad4U.com | WorldBiology.net

#7 Tue 05 Aug, 2008 00:09

Mighty Gorgon

Luca Libralato

Joined: August 2006
Posts: 7192
Location:

Borgo San Michele

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?

____________
Luca
SEARCH is the quickest way to get support.
Icy Phoenix ColorizeIt - CustomIcy - HON

#8 Tue 05 Aug, 2008 02:25

Page 1 of 1

Was this topic useful?

Link this topic
URL
BBCode
HTML

The time now is Sat 22 Feb, 2025 07:22 • All times are UTC + 1 Hour

Permissions List

You cannot post new topics
You cannot reply to topics
You cannot edit your posts
You cannot delete your posts
You cannot vote in polls
You cannot attach files
You can download files
You cannot post calendar events