Add custom image sets for stars, thumbs and likes

GD Rating System allows you to add custom image sets to use for stars, thumbs or likes. This tutorial will demonstrate how to do it, and it is accompanied with example plugin.

Adding more rating images is not too complicated. You need to create images in the format plugin requires and then prepare some custom CSS and PHP to let plugin know about new sets. The examples plugin adds two-star sets, one set for thumbs and one set for likes.

Download Files

Before we start, download two files we will use in this tutorial from this Download page:

• Image Sources: this file contains PSD files for all sets included in the main plugin. You can modify them as you want, or use the provided layouts to create your own sets.
• Plugin for Custom Images: this is a finished plugin for adding new image sets. Download it and install it in WordPress alongside GD Rating System, activate it, and new images will appear for selection and use.

Create images

Source files for all types of rating images are in PSD format, and you need Photoshop for these or other programs that can read and edit PSD files. It is recommended to use alpha channel transparent PNG images (PNG-24) because they will look best on any background.

Stars Rating

Star set contains 3 different images used to build the star rating block. It is customary to use the same image for all 3 with different colours. PSD sources can be used as starting point to create image sets. There are two maximum dimensions used with images 512×512 and 256×256 pixels. You can use smaller or larger images, it is up to you.

Thumbs Rating

Thumb set contains 4 different images to build rating block. It is thumbs up and thumbs down image in the normal and hover state.

Like This

Like set contains 4 different images to build rating block.

Emote This

Emote set contains any number of images you want. They should be arranged in the grid, and each image in the grid needs to be referenced in the CSS using positioning, and with the matching name through the emote this styling class. Example plugin contains both styles with images and the emote styling class to match.

Plugin for adding custom images

Now, we get to the plugin that serves as an example. This plugin includes the folder with CSS file and images. This CSS file is needed to load images for each set we want to add. And, it has one PHP file that is the actual plugin. This plugin hooks into GD Rating System to load CSS file and register custom images with the plugin. File includes comments for various parts of the code.

Here is the CSS for one of the star images:

/* Star Alt. Set */
.gdrts-with-image.gdrts-image-star-alt .gdrts-stars-empty,
.gdrts-with-image.gdrts-image-star-alt .gdrts-stars-active,
.gdrts-with-image.gdrts-image-star-alt .gdrts-stars-current {
    background: url('images/stars_alt.png') repeat-x;
    background-size: 40px;
}

.gdrts-badge-image.gdrts-image-star-alt .gdrts-badge-icon {
    background: url('images/stars_alt.png') no-repeat center;
}

And here is the PHP that adds this set to main plugin images list:

add_filter('gdrts_list_stars_styles_images', 'custom_set_list_stars_images');
function custom_set_list_stars_images($list) {
    $list['star-alt'] = __("Star Alternative (512px)", "gdrts-custom-images");
    return $list;
}

Example plugin does this a bit differently (it uses class for PHP code, but the principle is the same).

What you need to note here is the name of the set. PHP code adds the set to the list with the key name set to ‘star-alt’ This is the name of our image set. It doesn’t matter what is the name of actual image file. And this star-alt must be translated to CSS and if you take a look the CSS code up there, we have a class named ‘gdrts-image-star-alt’. So, the class name is ‘gdrts-image-‘ with the addition of the name we used in the PHP.

Conclusion

The plugin we create for this example is very simple, it involves some CSS and some PHP WordPress specific code. CSS needs to assign an image file to the CSS class defined by the name for the image set we use in the PHP code to register set with the plugin. If you need any more help with this, stop by the support forum.