Home •  Forum •  FAQ •  Search •  Recent Topics •  Memberlist •  Register •  Log in 
Forum » phpBB Mods And Styles » Archived phpBB Topics (Styles, Mods, Support)

FAP CUSTOMIZATION - Integration Of JS Rating Widget

This topic is locked: you cannot edit posts or make replies.

 

whiskey_pete
Quote
Posts: 31 Location: Bremen, DE
Wed 16 Jul, 2008 00:33
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: [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.

Profile PM  
Artie
Quote
Posts: 833 Location: Lone Star State
Wed 16 Jul, 2008 04:12
Subject: 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 <!-- BEGIN pic_detail --> and <!-- END pic_detail -->)
Code: [Download] [Hide] [Select]
{index_pics_block.picrow.pic_detail.U_PIC_FULL_URL}

Profile PM  
whiskey_pete
Quote
Posts: 31 Location: Bremen, DE
Wed 16 Jul, 2008 11:31
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: [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

Profile PM  
Artie
Quote
Posts: 833 Location: Lone Star State
Wed 16 Jul, 2008 23:20
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: [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;

Profile PM  
whiskey_pete
Quote
Posts: 31 Location: Bremen, DE
Mon 28 Jul, 2008 15:49
Subject: Re: Integration Of JS Rating Widget
It Works! Thank you Artie :thanks:

Profile PM  
KugeLSichA
Quote
Posts: 803 Location: Dresden
Mon 04 Aug, 2008 17:10
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...

Profile PM   Website ICQ
whiskey_pete
Quote
Posts: 31 Location: Bremen, DE
Tue 05 Aug, 2008 00:09
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: [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: 225 Time(s)

Profile PM  
Mighty Gorgon
Quote
Posts: 7192 Location: Borgo San Michele
Tue 05 Aug, 2008 02:25
Subject: Re: Integration Of JS Rating Widget
First of all thank you very much @whiskey_pete for your great "How To". :mri:

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

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?

Profile PM   Website
This topic is locked: you cannot edit posts or make replies.
 

Page 1 of 1


  
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

   

This is a "Lo-Fi" version of our main content. To view the full version with more information, formatting and images, please click here.

Powered by Icy Phoenix based on phpBB
Generation Time: 0.1489s (PHP: 25% SQL: 75%)
SQL queries: 12 - Debug Off - GZIP Enabled