Gossamer Forum
Home : Products : Gossamer Links : Version 1.x :

I got the ratings images to work!

Quote Reply
I got the ratings images to work!
Not exactly a mod, but I'm happy with myself
nonetheless. I was able to move my modified
version of Phoenix's image ratings mod over
to Links SQL. I realize Widgetz' mod is much
nicer aesthetically, but it didn't accomplish
the main thing I wanted which is to limit the
number of graphics. Smile Anyway, here's what
I came up with in case anyone is interested:

(I'm typing everything on short lines, as I
know this will wrap way off the screen...)

In site_html_link of HTML_templates.pm:
Code:
$rec->{'rate_img'} = "";
if ($rec->{'Rating'} eq '10.00') { $rec->{'rate_img'} = '<IMG SRC="http://run-down.com/images/rate4.gif" WIDTH=20 HEIGHT=18 BORDER="0" ALIGN="ABSMIDDLE"><IMG SRC="http://run-down.com/images/rate4.gif" WIDTH=20 HEIGHT=18 BORDER="0" ALIGN="ABSMIDDLE"><IMG SRC="http://run-down.com/images/rate4.gif" WIDTH=20 HEIGHT=18 BORDER="0" ALIGN="ABSMIDDLE"><IMG SRC="http://run-down.com/images/rate4.gif" WIDTH=20 HEIGHT=18 BORDER="0" ALIGN="ABSMIDDLE"><IMG SRC="http://run-down.com/images/rate4.gif" WIDTH=20 HEIGHT=18 BORDER="0" ALIGN="ABSMIDDLE">'; }
elsif ($rec->{'Rating'} eq '0.00') { $rec->{'rate_img'} = '<IMG SRC="http://run-down.com/images/rate00.gif" WIDTH=102 HEIGHT=18 ALT="Rate It!" BORDER="0" ALIGN="ABSMIDDLE">'; }
elsif ($rec->{'Rating'} le '0.50') { $rec->{'rate_img'} = '<IMG SRC="http://run-down.com/images/rate1.gif" WIDTH=20 HEIGHT=18 BORDER="0" ALIGN="ABSMIDDLE"><IMG SRC="http://run-down.com/images/rate5.gif" WIDTH=20 HEIGHT=18 BORDER="0" ALIGN="ABSMIDDLE"><IMG SRC="http://run-down.com/images/rate5.gif" WIDTH=20 HEIGHT=18 BORDER="0" ALIGN="ABSMIDDLE"><IMG SRC="http://run-down.com/images/rate5.gif" WIDTH=20 HEIGHT=18 BORDER="0" ALIGN="ABSMIDDLE"><IMG SRC="http://run-down.com/images/rate5.gif" WIDTH=20 HEIGHT=18 BORDER="0" ALIGN="ABSMIDDLE">'; }
elsif ($rec->{'Rating'} le '1.00') { $rec->{'rate_img'} = '<IMG SRC="http://run-down.com/images/rate2.gif" WIDTH=20 HEIGHT=18 BORDER="0" ALIGN="ABSMIDDLE"><IMG SRC="http://run-down.com/images/rate5.gif" WIDTH=20 HEIGHT=18 BORDER="0" ALIGN="ABSMIDDLE"><IMG SRC="http://run-down.com/images/rate5.gif" WIDTH=20 HEIGHT=18 BORDER="0" ALIGN="ABSMIDDLE"><IMG SRC="http://run-down.com/images/rate5.gif" WIDTH=20 HEIGHT=18 BORDER="0" ALIGN="ABSMIDDLE"><IMG SRC="http://run-down.com/images/rate5.gif" WIDTH=20 HEIGHT=18 BORDER="0" ALIGN="ABSMIDDLE">'; }
elsif ($rec->{'Rating'} le '1.50') { $rec->{'rate_img'} = '<IMG SRC="http://run-down.com/images/rate3.gif" WIDTH=20 HEIGHT=18 BORDER="0" ALIGN="ABSMIDDLE"><IMG SRC="http://run-down.com/images/rate5.gif" WIDTH=20 HEIGHT=18 BORDER="0" ALIGN="ABSMIDDLE"><IMG SRC="http://run-down.com/images/rate5.gif" WIDTH=20 HEIGHT=18 BORDER="0" ALIGN="ABSMIDDLE"><IMG SRC="http://run-down.com/images/rate5.gif" WIDTH=20 HEIGHT=18 BORDER="0" ALIGN="ABSMIDDLE"><IMG SRC="http://run-down.com/images/rate5.gif" WIDTH=20 HEIGHT=18 BORDER="0" ALIGN="ABSMIDDLE">'; }
elsif ($rec->{'Rating'} le '2.00') { $rec->{'rate_img'} = '<IMG SRC="http://run-down.com/images/rate4.gif" WIDTH=20 HEIGHT=18 BORDER="0" ALIGN="ABSMIDDLE"><IMG SRC="http://run-down.com/images/rate5.gif" WIDTH=20 HEIGHT=18 BORDER="0" ALIGN="ABSMIDDLE"><IMG SRC="http://run-down.com/images/rate5.gif" WIDTH=20 HEIGHT=18 BORDER="0" ALIGN="ABSMIDDLE"><IMG SRC="http://run-down.com/images/rate5.gif" WIDTH=20 HEIGHT=18 BORDER="0" ALIGN="ABSMIDDLE"><IMG SRC="http://run-down.com/images/rate5.gif" WIDTH=20 HEIGHT=18 BORDER="0" ALIGN="ABSMIDDLE">'; }
elsif ($rec->{'Rating'} le '2.50') { $rec->{'rate_img'} = '<IMG SRC="http://run-down.com/images/rate4.gif" WIDTH=20 HEIGHT=18 BORDER="0" ALIGN="ABSMIDDLE"><IMG SRC="http://run-down.com/images/rate1.gif" WIDTH=20 HEIGHT=18 BORDER="0" ALIGN="ABSMIDDLE"><IMG SRC="http://run-down.com/images/rate5.gif" WIDTH=20 HEIGHT=18 BORDER="0" ALIGN="ABSMIDDLE"><IMG SRC="http://run-down.com/images/rate5.gif" WIDTH=20 HEIGHT=18 BORDER="0" ALIGN="ABSMIDDLE"><IMG SRC="http://run-down.com/images/rate5.gif" WIDTH=20 HEIGHT=18 BORDER="0" ALIGN="ABSMIDDLE">'; }
elsif ($rec->{'Rating'} le '3.00') { $rec->{'rate_img'} = '<IMG SRC="http://run-down.com/images/rate4.gif" WIDTH=20 HEIGHT=18 BORDER="0" ALIGN="ABSMIDDLE"><IMG SRC="http://run-down.com/images/rate2.gif" WIDTH=20 HEIGHT=18 BORDER="0" ALIGN="ABSMIDDLE"><IMG SRC="http://run-down.com/images/rate5.gif" WIDTH=20 HEIGHT=18 BORDER="0" ALIGN="ABSMIDDLE"><IMG SRC="http://run-down.com/images/rate5.gif" WIDTH=20 HEIGHT=18 BORDER="0" ALIGN="ABSMIDDLE"><IMG SRC="http://run-down.com/images/rate5.gif" WIDTH=20 HEIGHT=18 BORDER="0" ALIGN="ABSMIDDLE">'; }
elsif ($rec->{'Rating'} le '3.50') { $rec->{'rate_img'} = '<IMG SRC="http://run-down.com/images/rate4.gif" WIDTH=20 HEIGHT=18 BORDER="0" ALIGN="ABSMIDDLE"><IMG SRC="http://run-down.com/images/rate3.gif" WIDTH=20 HEIGHT=18 BORDER="0" ALIGN="ABSMIDDLE"><IMG SRC="http://run-down.com/images/rate5.gif" WIDTH=20 HEIGHT=18 BORDER="0" ALIGN="ABSMIDDLE"><IMG SRC="http://run-down.com/images/rate5.gif" WIDTH=20 HEIGHT=18 BORDER="0" ALIGN="ABSMIDDLE"><IMG SRC="http://run-down.com/images/rate5.gif" WIDTH=20 HEIGHT=18 BORDER="0" ALIGN="ABSMIDDLE">'; }
elsif ($rec->{'Rating'} le '4.00') { $rec->{'rate_img'} = '<IMG SRC="http://run-down.com/images/rate4.gif" WIDTH=20 HEIGHT=18 BORDER="0" ALIGN="ABSMIDDLE"><IMG SRC="http://run-down.com/images/rate4.gif" WIDTH=20 HEIGHT=18 BORDER="0" ALIGN="ABSMIDDLE"><IMG SRC="http://run-down.com/images/rate5.gif" WIDTH=20 HEIGHT=18 BORDER="0" ALIGN="ABSMIDDLE"><IMG SRC="http://run-down.com/images/rate5.gif" WIDTH=20 HEIGHT=18 BORDER="0" ALIGN="ABSMIDDLE"><IMG SRC="http://run-down.com/images/rate5.gif" WIDTH=20 HEIGHT=18 BORDER="0" ALIGN="ABSMIDDLE">'; }
elsif ($rec->{'Rating'} le '4.50') { $rec->{'rate_img'} = '<IMG SRC="http://run-down.com/images/rate4.gif" WIDTH=20 HEIGHT=18 BORDER="0" ALIGN="ABSMIDDLE"><IMG SRC="http://run-down.com/images/rate4.gif" WIDTH=20 HEIGHT=18 BORDER="0" ALIGN="ABSMIDDLE"><IMG SRC="http://run-down.com/images/rate1.gif" WIDTH=20 HEIGHT=18 BORDER="0" ALIGN="ABSMIDDLE"><IMG SRC="http://run-down.com/images/rate5.gif" WIDTH=20 HEIGHT=18 BORDER="0" ALIGN="ABSMIDDLE"><IMG SRC="http://run-down.com/images/rate5.gif" WIDTH=20 HEIGHT=18 BORDER="0" ALIGN="ABSMIDDLE">'; }
elsif ($rec->{'Rating'} le '5.00') { $rec->{'rate_img'} = '<IMG SRC="http://run-down.com/images/rate4.gif" WIDTH=20 HEIGHT=18 BORDER="0" ALIGN="ABSMIDDLE"><IMG SRC="http://run-down.com/images/rate4.gif" WIDTH=20 HEIGHT=18 BORDER="0" ALIGN="ABSMIDDLE"><IMG SRC="http://run-down.com/images/rate2.gif" WIDTH=20 HEIGHT=18 BORDER="0" ALIGN="ABSMIDDLE"><IMG SRC="http://run-down.com/images/rate5.gif" WIDTH=20 HEIGHT=18 BORDER="0" ALIGN="ABSMIDDLE"><IMG SRC="http://run-down.com/images/rate5.gif" WIDTH=20 HEIGHT=18 BORDER="0" ALIGN="ABSMIDDLE">'; }
elsif ($rec->{'Rating'} le '5.50') { $rec->{'rate_img'} = '<IMG SRC="http://run-down.com/images/rate4.gif" WIDTH=20 HEIGHT=18 BORDER="0" ALIGN="ABSMIDDLE"><IMG SRC="http://run-down.com/images/rate4.gif" WIDTH=20 HEIGHT=18 BORDER="0" ALIGN="ABSMIDDLE"><IMG SRC="http://run-down.com/images/rate3.gif" WIDTH=20 HEIGHT=18 BORDER="0" ALIGN="ABSMIDDLE"><IMG SRC="http://run-down.com/images/rate5.gif" WIDTH=20 HEIGHT=18 BORDER="0" ALIGN="ABSMIDDLE"><IMG SRC="http://run-down.com/images/rate5.gif" WIDTH=20 HEIGHT=18 BORDER="0" ALIGN="ABSMIDDLE">'; }
elsif ($rec->{'Rating'} le '6.00') { $rec->{'rate_img'} = '<IMG SRC="http://run-down.com/images/rate4.gif" WIDTH=20 HEIGHT=18 BORDER="0" ALIGN="ABSMIDDLE"><IMG SRC="http://run-down.com/images/rate4.gif" WIDTH=20 HEIGHT=18 BORDER="0" ALIGN="ABSMIDDLE"><IMG SRC="http://run-down.com/images/rate4.gif" WIDTH=20 HEIGHT=18 BORDER="0" ALIGN="ABSMIDDLE"><IMG SRC="http://run-down.com/images/rate5.gif" WIDTH=20 HEIGHT=18 BORDER="0" ALIGN="ABSMIDDLE"><IMG SRC="http://run-down.com/images/rate5.gif" WIDTH=20 HEIGHT=18 BORDER="0" ALIGN="ABSMIDDLE">'; }
elsif ($rec->{'Rating'} le '6.50') { $rec->{'rate_img'} = '<IMG SRC="http://run-down.com/images/rate4.gif" WIDTH=20 HEIGHT=18 BORDER="0" ALIGN="ABSMIDDLE"><IMG SRC="http://run-down.com/images/rate4.gif" WIDTH=20 HEIGHT=18 BORDER="0" ALIGN="ABSMIDDLE"><IMG SRC="http://run-down.com/images/rate4.gif" WIDTH=20 HEIGHT=18 BORDER="0" ALIGN="ABSMIDDLE"><IMG SRC="http://run-down.com/images/rate1.gif" WIDTH=20 HEIGHT=18 BORDER="0" ALIGN="ABSMIDDLE"><IMG SRC="http://run-down.com/images/rate5.gif" WIDTH=20 HEIGHT=18 BORDER="0" ALIGN="ABSMIDDLE">'; }
elsif ($rec->{'Rating'} le '7.00') { $rec->{'rate_img'} = '<IMG SRC="http://run-down.com/images/rate4.gif" WIDTH=20 HEIGHT=18 BORDER="0" ALIGN="ABSMIDDLE"><IMG SRC="http://run-down.com/images/rate4.gif" WIDTH=20 HEIGHT=18 BORDER="0" ALIGN="ABSMIDDLE"><IMG SRC="http://run-down.com/images/rate4.gif" WIDTH=20 HEIGHT=18 BORDER="0" ALIGN="ABSMIDDLE"><IMG SRC="http://run-down.com/images/rate2.gif" WIDTH=20 HEIGHT=18 BORDER="0" ALIGN="ABSMIDDLE"><IMG SRC="http://run-down.com/images/rate5.gif" WIDTH=20 HEIGHT=18 BORDER="0" ALIGN="ABSMIDDLE">'; }
elsif ($rec->{'Rating'} le '7.50') { $rec->{'rate_img'} = '<IMG SRC="http://run-down.com/images/rate4.gif" WIDTH=20 HEIGHT=18 BORDER="0" ALIGN="ABSMIDDLE"><IMG SRC="http://run-down.com/images/rate4.gif" WIDTH=20 HEIGHT=18 BORDER="0" ALIGN="ABSMIDDLE"><IMG SRC="http://run-down.com/images/rate4.gif" WIDTH=20 HEIGHT=18 BORDER="0" ALIGN="ABSMIDDLE"><IMG SRC="http://run-down.com/images/rate3.gif" WIDTH=20 HEIGHT=18 BORDER="0" ALIGN="ABSMIDDLE"><IMG SRC="http://run-down.com/images/rate5.gif" WIDTH=20 HEIGHT=18 BORDER="0" ALIGN="ABSMIDDLE">'; }
elsif ($rec->{'Rating'} le '8.00') { $rec->{'rate_img'} = '<IMG SRC="http://run-down.com/images/rate4.gif" WIDTH=20 HEIGHT=18 BORDER="0" ALIGN="ABSMIDDLE"><IMG SRC="http://run-down.com/images/rate4.gif" WIDTH=20 HEIGHT=18 BORDER="0" ALIGN="ABSMIDDLE"><IMG SRC="http://run-down.com/images/rate4.gif" WIDTH=20 HEIGHT=18 BORDER="0" ALIGN="ABSMIDDLE"><IMG SRC="http://run-down.com/images/rate4.gif" WIDTH=20 HEIGHT=18 BORDER="0" ALIGN="ABSMIDDLE"><IMG SRC="http://run-down.com/images/rate5.gif" WIDTH=20 HEIGHT=18 BORDER="0" ALIGN="ABSMIDDLE">'; }
elsif ($rec->{'Rating'} le '8.50') { $rec->{'rate_img'} = '<IMG SRC="http://run-down.com/images/rate4.gif" WIDTH=20 HEIGHT=18 BORDER="0" ALIGN="ABSMIDDLE"><IMG SRC="http://run-down.com/images/rate4.gif" WIDTH=20 HEIGHT=18 BORDER="0" ALIGN="ABSMIDDLE"><IMG SRC="http://run-down.com/images/rate4.gif" WIDTH=20 HEIGHT=18 BORDER="0" ALIGN="ABSMIDDLE"><IMG SRC="http://run-down.com/images/rate4.gif" WIDTH=20 HEIGHT=18 BORDER="0" ALIGN="ABSMIDDLE"><IMG SRC="http://run-down.com/images/rate1.gif" WIDTH=20 HEIGHT=18 BORDER="0" ALIGN="ABSMIDDLE">'; }
elsif ($rec->{'Rating'} le '9.00') { $rec->{'rate_img'} = '<IMG SRC="http://run-down.com/images/rate4.gif" WIDTH=20 HEIGHT=18 BORDER="0" ALIGN="ABSMIDDLE"><IMG SRC="http://run-down.com/images/rate4.gif" WIDTH=20 HEIGHT=18 BORDER="0" ALIGN="ABSMIDDLE"><IMG SRC="http://run-down.com/images/rate4.gif" WIDTH=20 HEIGHT=18 BORDER="0" ALIGN="ABSMIDDLE"><IMG SRC="http://run-down.com/images/rate4.gif" WIDTH=20 HEIGHT=18 BORDER="0" ALIGN="ABSMIDDLE"><IMG SRC="http://run-down.com/images/rate2.gif" WIDTH=20 HEIGHT=18 BORDER="0" ALIGN="ABSMIDDLE">'; }
elsif ($rec->{'Rating'} le '9.50') { $rec->{'rate_img'} = '<IMG SRC="http://run-down.com/images/rate4.gif" WIDTH=20 HEIGHT=18 BORDER="0" ALIGN="ABSMIDDLE"><IMG SRC="http://run-down.com/images/rate4.gif" WIDTH=20 HEIGHT=18 BORDER="0" ALIGN="ABSMIDDLE"><IMG SRC="http://run-down.com/images/rate4.gif" WIDTH=20 HEIGHT=18 BORDER="0" ALIGN="ABSMIDDLE"><IMG SRC="http://run-down.com/images/rate4.gif" WIDTH=20 HEIGHT=18 BORDER="0" ALIGN="ABSMIDDLE"><IMG SRC="http://run-down.com/images/rate3.gif" WIDTH=20 HEIGHT=18 BORDER="0" ALIGN="ABSMIDDLE">'; }
else { $rec->{'rate_img'} = '<IMG SRC="http://run-down.com/images/rate4.gif" WIDTH=20 HEIGHT=18 BORDER="0" ALIGN="ABSMIDDLE"><IMG SRC="http://run-down.com/images/rate4.gif" WIDTH=20 HEIGHT=18 BORDER="0" ALIGN="ABSMIDDLE"><IMG SRC="http://run-down.com/images/rate4.gif" WIDTH=20 HEIGHT=18 BORDER="0" ALIGN="ABSMIDDLE"><IMG SRC="http://run-down.com/images/rate4.gif" WIDTH=20 HEIGHT=18 BORDER="0" ALIGN="ABSMIDDLE"><IMG SRC="http://run-down.com/images/rate4.gif" WIDTH=20 HEIGHT=18 BORDER="0" ALIGN="ABSMIDDLE">'; }
And then you just add the "standard"
<%rate_img%> wherever you want in
link.html.

The reason I did it this way is it uses only
6 images instead of 21 or so, and each one is
quite a bit smaller. On a big site, this
ought to make a pretty significant difference
in bandwidth. The key is slicing up the
images up into quarters like I've done at
http://run-down.com/Cool/

I imagine there is some way to put things
into a tidier loop, but I haven't come up
with it yet... In my Links 2 version, I
used:
Code:
$rate_url = 'http://run-down.com/images';
and then added $rate_url in place of all the
path names above -- a little quicker to edit
if need be.

If you find it useful, or if you think of a
way to improve the code, by all means let
me know! Smile

Dan
Quote Reply
Re: I got the ratings images to work! In reply to
By the way, the link above is for my Links 2
setup. I've got Links SQL pretty much set up
the way I want now, but I'll have to test it
a bunch and get a feel for all the new
features before going live with it...

Dan
Quote Reply
Re: I got the ratings images to work! In reply to
oh my gosh....

if you needed this.. you should have told me.. i got this working like 3 months ago..

using my links 2.0 mod...

Code:
sub rating_image {
my $rating = shift;

for (my $i = 1; $i <= $LINKS{rating_graph_bars}; $i++) {
my $image = qq~<img src="/images/ratings/$i.gif" width="49" height="9" alt="$rating" border="0">~ and last if ($rating < $i + 0.5);
}
return $image || $rating;
}

you put that in HTML_Templates.pm and get the rating.. with:

Code:
rate_img => &rating_image ($rec->{Rating}),

------------------
Jerry Su
Links SQL User
------------------


[This message has been edited by widgetz (edited February 03, 2000).]
Quote Reply
Re: I got the ratings images to work! In reply to
btw..

Code:
$LINKS{rating_graph_bars}

is something you define in Links.pm for review.cgi... if your rating system goes up to 5 only.. you change that..

------------------
Jerry Su
Links SQL User
------------------
Quote Reply
Re: I got the ratings images to work! In reply to
Hi Jerry,
Quote:
if you needed this.. you should have told me.. i got this working like 3 months ago
Well, I just upgraded to Links SQL two days ago. Smile

If I'm not mistaken, your mod uses a single image for each
possible rating, right? That's the part I was trying to
avoid. The code I posted looks like a lot, but it's really
just quarter images repeated to make up the whole image. That
way, all 21 images (20 ratings and no vote) can be made from:
1/4, 1/2, 3/4, full, none, and no votes.

What I was hoping to come up with a way to do is putting that
into a loop to add full images until it reaches the ".xx"
part, add the appropriate fraction, then add a "none" star at
the end if need be. If I come up with a solution to
that, the above code might be nearly as pretty as yours. Smile

Dan

Dan
Quote Reply
Re: I got the ratings images to work! In reply to
Hi Dan,

Hmm, whenever I see a big if else list like that, I think there must be a better way. How about:

my $rating = int ($rec->{Rating} / 2);
my $rec->{rate_img} = "<img src=/images/rate$rating.gif">";

(I'm not sure why you are repeating the images). So $rating will just be a whole number from 0 to 5, so you just make sure you have a rate0.gif to rate5.gif.

BTW, Jerry:

Quote:
sub rating_image {my $rating = shift; for (my $i = 1; $i <= $LINKS{rating_graph_bars}; $i++) { my $image = qq~<img src="/images/ratings/$i.gif" width="49" height="9" alt="$rating" border="0">~ and last if ($rating < $i + 0.5); } return $image &#0124; &#0124; $rating;}

Your $image in return $image is always undefined because it will go out of scope.

Cheers,

Alex

Quote Reply
Re: I got the ratings images to work! In reply to
Hi Alex,
Quote:
my $rating = int ($rec->{Rating} / 2);
my $rec->{rate_img} = "<img src=/images/rate$rating.gif">";

(I'm not sure why you are repeating the images). So $rating will just be a whole number from 0 to 5, so you just make sure you have a rate0.gif to rate5.gif.
Wouldn't that accomplish the same thing as Jerry's mod (corrections
aside)? I wish I could attach images to make it easier to understand
what I'm saying... Ok, I'll try this:
http://run-down.com/images/rate1.gif
http://run-down.com/images/rate2.gif
http://run-down.com/images/rate3.gif
http://run-down.com/images/rate4.gif
http://run-down.com/images/rate5.gif
http://run-down.com/images/rate00.gif
Those are each of the images that make up any of the 20 possible
ratings. Then go to http://run-down.com/Cool/ and you can see
how the code I used assembles them.

Dan (just one of me this time Smile )