Star Rating Rendering, Part 1: Ratings

All rendering in GD Star Rating is done using T2 templates. While you can watch the video of using the templates, it’s very important too understand each element of the rendering, and what template will be used. So, this is expansion of the already existing templates map.

Standard Rating

Standard rating is implemented for both comments and posts/pages, and in both cases it has the same structure and same type of rendering, but uses different templates because comments rating don’t have all the same options as for the posts. The block for this rating is a single template that uses some other templates. So, here is the enlarged image of a rating block with several elements on it.

As you can see, there are 3 blocks. First one is header, and it’s not required. Rating text is not required also, and only you need to have rating stars. They are also over-layered with loading animation that is displayed once the vote is send back to server and waiting for response. The complete block is rendered using:

  • Post/Page: Standard Ratings Block [SRB]. For rating text uses Standard Ratings Text [SRT].
  • Comment: Comments Ratings Block [CRB]. For rating text uses Comments Ratings Text [CRT].

Both of these are very similar, and they use similar templates within. If you create your own SRB template, you can still use default SRT, or you can create that also. It all depends on what you need. SRT/CRT templates are very simple, and use minimal HTML tags to keep things clean and simple.

There is one more type of rendering that is used for RSS feed. This is Standard RSS Rating Block [SSB]. It’s simpler than previous two, and text is the part of the base template.

Multi Ratings

Multi rating block has basically similar structure as the standard rating, but instead of the single stars you have multi ratings elements. But, this is more complicated and as a base you have Multi Ratings Block [MRB] template that is used to render multi rating block. And this one uses two more templates. One is for rating text (as previously) and that is Multi Ratings Text [MRT] template, and the other is for stars Multi Ratings Stars [MRS] template.

Multi rating text is almost the same as for the standard ratings, and defaults of them are the same. But, MRS is different that usual. It has only one element, called item, and one item is one rating element. So, if you have multi rating block with 5 elements, this template will be used 5 times. Default rendering is displaying this as a HTML TABLE. So, each MRS is represented as TR tag or a single row. The best is to take a look at the HTML markup for all templates used, and see how the rendering is actually done and put together.

Thumbs Ratings

With thumbs up/down rating templates structure is again similar. You can see image bellow. Thumb Up, and Thumb Down are different tag elements, so you can even use only one of them in the template, and for instance hide thumb down.

Both post/page and comments support thumbs rating:

  • Post/Page: Thumbs Article Rating Block [TAB]. For rating text uses Thumbs Article Ratings Text [TAT].
  • Comment: Thumbs Comment Rating Block [TCB]. For rating text uses Thumbs Comment Ratings Text [TCT].

By default, all three elements from the image are floated left to make them inline. Styling is as usually done using CSS, and some basic classes into the default plugin style file.

What now?

Well, for most uses it’s enough to use default templates, and style them using CSS. Whatever you need, I recommend that you first try using default template, and if that is not enough create your own. There will be more tutorial on the subject in the coming weeks.

Comments

Leave a Reply