Adding a frame or something else to most voted image in gallery

Hi Anonity
I’m glad the plugin has been useful to you.
To add some sort of visual cue to the highest image would require knowing all the results before the images are outputted. Currently the plugin gets the voting results as it outputs each image, so it can’t go backwards and highlight an image already send to the browser.

However, it would be possible to hack in, but would require adding a good few lines of code to your template. If you are interested in trying, I can give you some code to get you started.

Thanks a lot for answering that quick.

If you could give me some lines of code to start so that I can try to make it work, that would be nice.

Currently, We upload a gallery each week with a bunch of pics each to be voted, it’s actually a contest. One week after the gallery is published, the voting for that gallery is disabled and we announce a winner, that’s why we need to somehow “highlight” who the winner for that week was. I don’t need to this while the voting is still going, just when I disable it.

Thanks a lot, I really appreciate it.

Ok, in the gallery.php template that you added the voting tag to when you installed the plugin, you need to add the follow code.

<style>
.nggvTopVoted {
	border: 1px solid red;
}
</style>
<?php
global $officalNggVoting;
$topVotedScore = 0; $votingResults = array();
foreach ((array)$images as $image) {
	$votingResults[$image->pid] = $officalNggVoting->getImageVotingResults($image->pid, array('avg'=>true));
	if($votingResults[$image->pid]['avg'] > $topVotedScore) {
		$topVotedScore = $votingResults[$image->pid]['avg'];
	}
}
?>

You can add this right at the top of the file, directly after the opening comments.

Then, you need to find the line that looks like this
<div id="ngg-image-<?php echo $image->pid ?>" class="ngg-gallery-thumbnail-box" <?php echo $image->style ?> >
and change it to this:
<div id="ngg-image-<?php echo $image->pid ?>" class="ngg-gallery-thumbnail-box <?php echo $votingResults[$image->pid]['avg'] == $topVotedScore ? 'nggvTopVoted' : '' ?>" <?php echo $image->style ?> >
You should find that line as the first line of code inside the foreach outputting the images.

And that’s it, you should now see a red border around the image(s) with the highest vote. You can change the CSS for the .nggvTopVoted class to highlight the image anyway you want. I just went with the red border ’cause it’s simple and illustrates the concept.

I didn’t have time to figure out a nice way to show this only for galleries that no longer have voting. Perhaps you can copy the entire template and call it gallery-complete.php, and then add the template argument in the NGG shortcode or something.

Hope that helps ??

Wow! Just what I wanted, again.

Thanks a lot for your work, I will work around with it when I have time to make it look cool with our site.

We really appreciate this.

kind regards ??

No problem. Feel free to rate the plugin, or support the development by purchasing the premium add-on. Only a couple bucks and it adds a bunch of cool new features ??

I’m sorry to bother you again, played around with the code on a test server and seemed to work fine, now I tried it on my real site and it’s highlighting not just THE MOST voted image in the gallery, but many of them (7 or 8 out of 10), and they are all in the same gallery.

I can’t seem to find what’s wrong in there, I need it to highlight just one pic.

The code I posted above will highlight the image (or images if there are more than 1), with the highest average vote. What probably is happening is you have more than 1 image with the same rating.
What voting type are you using, because maybe that isn’t the best approach for ‘liked’ images.

I’m using “Likes” voting type. There isn’t any image with the same number of votes as another, all have between 20 and 400 votes or so so there isn’t any amount of votes repeated. I don’t know much (nothing at all) about coding but why “average” and not just count the votes? It’s just likes, nothing else.

Thanks a lot Shaun ?? this is all I need left to have the galleries sorted.

As I said, that code written uses highest average votes, not most votes. A ‘like’ is equivalent to 100/100 in the plugin. Remember, the plugin can handle ratings like the star rating system too.

If you are using just plain ‘likes’, then replace the code at the top with the following code:

<style>
.nggvTopVoted {
	border: 1px solid red;
}
</style>
<?php
global $officalNggVoting;
$topVotedScore = 0; $votingResults = array();
foreach ((array)$images as $image) {
	$votingResults[$image->pid] = $officalNggVoting->getImageVotingResults($image->pid, array('avg'=>true, 'num'=>true, 'likes'=>true));
	if($votingResults[$image->pid]['likes'] > $topVotedScore) {
		$topVotedScore = $votingResults[$image->pid]['likes'];
	}
}
?>

I haven’t had a chance to test that on a proper install, as I’m not at my development machine right now., but it should work. Let me know if that solves it ??

I’m afraid it’s not working ??
It doesn’t seem to be doing anything at all in any of my past galleries (where voting was turned off), I tried to find the mistake but couldn’t. Sorry for the inconveniences :/

Sorry, I just got back to my development machine. The code I asked you to change is right, you also need to change the <div> wrapping the images to this though:
<div id="ngg-image-<?php echo $image->pid ?>" class="ngg-gallery-thumbnail-box <?php echo $votingResults[$image->pid]['likes'] == $topVotedScore ? 'nggvTopVoted' : '' ?>" <?php echo $image->style ?> >

Now it will highlight the image(s) with the most likes. Sorry about the confusion initially.
Let me know if you’re still having trouble.

PS, the latest version of the Premium add-on has a ‘tag’ you can add to the template that will order the images by the results. Check it out if you want ??

Now it works, perfect!

You’re great shaun and so is your plugin, I will donate later on, probably today for your efforts.

Check how it looks like: https://anonity.com/una-cartera-de-mano-dia-calido-en-invierno/ ??

Thanks!

Awesome, it looks great! I’m glad it’s working for you. Don’t feel obligated to donate, but any support is always appreciated ??