Question

We want to include for our surf reports the ability to give the surf conditions a 5 star rating (using http://drupal.org/project/fivestar module). The issue we have come across is that the wind conditions may not be favorable and therefore although the report is giving 5 stars, if the wind is the wrong way we need to be able to illustrate that. We’d like to add node field called “Wind Rating” which has a value of A or B. If the wind is favorable we set the value to A and stick with the current star.gif file. If it’s not favorable wind conditions we’d set the value to B and want to switch star.gif to starb.gif (which will be a faded version).

What is the best way to achieve this using Drupal 7 and the Five Star module?

Answer 1

Well that’s a tough one. Let me try.

First : To create a widget of your own you can follow the steps from http://www.drupalace.com/drupal_tutorial_make_custom_fivestar_graphics. Read starting from the heading Make me a star!

Now that you know how to create a custom widget, lets concentrate on how to make it dynamic. Which star image to be used is decided by the style rules in the css file in the widgets folder. So to have dynamic images we need to add an additional class to the output based on our condition.

When I checked the code to see where the classes are added, I see that widget specific classes are added on line 582 of the file fivestar.module fivestar_expand

$class[] = 'fivestar-' . $element['#widget']['name'];

After this line you can add

if (my_condition_is_met) {
  $class[] = 'fivestar-' . $element['#widget']['name'] . 'special-case';
}

Now you can edit the css file to add rules for this special case with the image you want to display(don’t forget to add your custom image) and you are done.

Hold :
Its blasphemy in Drupal to hack a module, so the right steps would be

1. Copy the function fivestar_element_info to your custom module and name it appropriately.
2. Change the line '#process' => array('fivestar_expand'), to '#process' => array('fivestar_expand_custom'),
3. copy the fivestar_expand_custom to your custom module and do the changes mentioned earlier.

Doing it they right way in Drupal can sometimes can be very difficult. But I didn’t find a better solution. I hope there is one.