You are here

How To Customize The Fivestar Module

* Blue: The code from a Stack Exchange developer that saved my life and got the ball rolling for everything else.
* Green: My own comments for the purpose of this blog post.
* Orange: Additional edits made by me.
* Pink: Code that was deleted by me.
* Yellow: Code that was copied and pasted by me.

When using the Fivestar module (version 7.x-2.1), I can show the result in three ways:

1) "As Stars" - This has an additional setting called "Text to display under the stars". For example, it'll look something like the following if I choose "Both user's and average vote":

*********

Your rating: 9 Average: 8.1 (235 votes)

2) "Rating" - There is no additional option whatsoever, and the above example will just look like the following:

8.1/10

3) "Percentage" - I've never even used this option, so I'm just gonna ignore it in this blog post.

Today I'll show you how I customized the display of this awesome module to almost exactly how I always wanted it, including:

A) How to make the "Rating" option show the total number of votes, just like the "As Stars" option, like the following:

8.1/10 (235 votes)

B) How to capitalize "vote" & "votes" to "Vote" & "Votes" for both the "As Stars" & "Rating" options, like the following:

*********

Your rating: 9 Average: 8.1 (235 Votes)

8.1/10 (235 Votes)

C) How to add get the rating of the "As Stars" option to look just like the rating of the "Rating" option, like the following:

*********

Your rating: 9/10 Average: 8.1/10 (235 Votes)

D) How to add a comma after the rating of "Your rating", like the following:

*********

Your rating: 9/10, Average: 8.1/10 (235 Votes)

E) How to change the default rating of "0/10" for the "Rating" option to "No votes yet", just like how it works for the "As Stars" option, like the following:

*********

No votes yet

As for the code that takes care of step E, I actually don't know lol. All I know is that the code that I used below automatically took care of this problem for me. :D

In summary, I'm a consistency freak (in case you haven't noticed already), and basically I mostly just wanted the two options to look consistent in display. The following is the full code that I originally took from the module and edited, that you just have to include in your template.php file:

// These are lines 279 - 301 of the fivestar.theme.inc file that I edited and then added to one of the functions below.
if (isset($votes)) {
if (!isset($user_rating) && !isset($average_rating)) {
$div_class = 'count';
}
if ($votes === 0) {
$output = '<span class="empty">'. t('No votes yet') .'</span>';
}
else {
if (!empty($microdata['rating_count']['#attributes'])) {
$rating_count_microdata = drupal_attributes($microdata['rating_count']['#attributes']);
}

// We don't directly substitute $votes (i.e. use '@count') in format_plural,
// because it has a span around it which is not translatable.
$votes_str = format_plural($votes, '!cnt vote', '!cnt votes', array(
'!cnt' => '<span ' . $rating_count_microdata . '>' . intval($votes) . '</span>'));
if (isset($user_rating) || isset($average_rating)) {
$output .= ' <span class="total-votes">(' . $votes_str . ')</span>';
}
else {
$output .= ' <span class="total-votes">' . $votes_str . '</span>';
}

}
}

// These are lines 126 - 140 of the fivestar.theme.inc file, with lines 279 - 301 from above added towards the end.
function YOURTHEMENAME_fivestar_formatter_rating($variables) {
$element = $variables['element'];
$votes = $variables['element']['#item']['count'];
$rating_count_microdata = NULL;

if (empty($element['#item']['average'])) {
$element['#item']['average'] = 0;
}
// Get number of stars.
$stars = (empty($element['#instance_settings']['stars'])) ? 5 : $element['#instance_settings']['stars'];
$average = $element['#item']['average'];
// Rating is X out of Y stars.
$rating = round(($average/100) * $stars, 1);
$output = $rating . '/' . $stars;

// Note the orange parts I that edited, after adding lines 279 - 301 from above, after deleting the pink parts.
if (isset($votes)) {
if (!isset($user_rating) && !isset($average_rating)) {
$div_class = 'count';
}
if ($votes === 0) {
$output = '<span class="empty">'. t('No votes yet') .'</span>';
}
else {
// We don't directly substitute $votes (i.e. use '@count') in format_plural,
// because it has a span around it which is not translatable.
$votes_str = format_plural($votes, '!cnt Vote', '!cnt Votes', array(
'!cnt' => '<span ' . $rating_count_microdata . '>' . intval($votes) . '</span>'));
$output .= ' <span class="total-votes">(' . $votes_str . ')</span>';
}
}

return $output;
}

// These are lines 248 - 306 of the fivestar.theme.inc file.
function YOURTHEMENAME_fivestar_summary($variables) {
$microdata = $variables['microdata'];
extract($variables, EXTR_SKIP);
$output = '';
$div_class = '';
$average_rating_microdata = '';
$rating_count_microdata = '';
if (isset($user_rating)) {
$div_class = isset($votes) ? 'user-count' : 'user';
$user_stars = round(($user_rating * $stars) / 100, 1);
$user_stars = $user_stars . '/10';
$output .= '<span class="user-rating">' . t('Your rating: <span>!stars</span>', array('!stars' => $user_rating ? $user_stars : t('None'))) . ',</span>';
}
if (isset($user_rating) && isset($average_rating)) {
$output .= ' ';
}
if (isset($average_rating)) {
if (isset($user_rating)) {
$div_class = 'combo';
}
else {
$div_class = isset($votes) ? 'average-count' : 'average';
}

$average_stars = round(($average_rating * $stars) / 100, 1);
if (!empty($microdata['average_rating']['#attributes'])) {
$average_rating_microdata = drupal_attributes($microdata['average_rating']['#attributes']);
}
$output .= '<span class="average-rating">' . t('Average: !stars',
array('!stars' => "<span $average_rating_microdata>$average_stars</span>")) . '/10</span>';
}

if (isset($votes)) {
if (!isset($user_rating) && !isset($average_rating)) {
$div_class = 'count';
}
if ($votes === 0) {
$output = '<span class="empty">'. t('No votes yet') .'</span>';
}
else {
if (!empty($microdata['rating_count']['#attributes'])) {
$rating_count_microdata = drupal_attributes($microdata['rating_count']['#attributes']);
}
// We don't directly substitute $votes (i.e. use '@count') in format_plural,
// because it has a span around it which is not translatable.
$votes_str = format_plural($votes, '!cnt Vote', '!cnt Votes', array(
'!cnt' => '<span ' . $rating_count_microdata . '>' . intval($votes) . '</span>'));
if (isset($user_rating) || isset($average_rating)) {
$output .= ' <span class="total-votes">(' . $votes_str . ')</span>';
}
else {
$output .= ' <span class="total-votes">' . $votes_str . '</span>';
}
}
}

$output = '<div class="fivestar-summary fivestar-summary-' . $div_class . '">' . $output . '</div>';
return $output;
}

And that's it. If you want to see how all this exactly looks like on a live website, take a look at a specific page that displays both options in my media startup company, Mediography.by: John '00' Fleming - Embed Media Rating Widgets

You are here