In this video we will add a "Number up/down" rating widget to rate articles.

  • Go to "Structure => Rate widgets" (admin/structure/rate)

This page shows a list of available rate widgets, but since we haven't added anything yet, what you'll see is a message that says "You do not have any rate widgets defined yet". So let's go ahead and add a new widget.

When we click the "Widget type" dropdown, you'll see that we have seven options: Custom, Thumbs up, Thumbs up/down, Numbers up/down, Fivestar, Emotion, Yes/No. We'll take a look at each of these, but let's start with "Number up/down.

Add widget

  • Widget type: Choose "Number up/down"
  • (Next)

Widget Configuration Page

This is the widget configuration page. All widget types have a predefined set of options. Certain options like those for "Value type", "Options" and "Translate options" may not be available depending on the widget type you use. For example the configuration for "Number up/down" widget doesn't show those options. We will take a look at them when we explore other widget types.

  • Title: This article is useful and clear (The title of the widget)
  • Tag: Usefulness (This is used by Voting API to store the voting results. Voting results with same tags share their voting results. This will be important when we use Views to sort and filter results.)

Node Types

Here you can select the node types for which a rate widget should be enabled. There are two columns for each node type, you can select the node or comment or you can select both.

  • Name: Article
    • [x] Node

Display Settings

These options let you determine where the widget will be placed.

  • Node display
    • [x] Above the content (The widget type will be placed above the content.)
    • [x] Display in teaser (This will make the widget visible in the node teaser)
  • Appearance in full node: Choose "Full widget" (This lets you choose the display mode when the full node is displayed.)
    • Full widget (This displays the full and clickable widget)
    • Display only (This displays full but not clickable widget)
    • Display only, Compact (This displays non-clickable compact widget)
    • Compact (This will display a clickable widget, without the information line.)
  • Appearance in teaser: Choose "Display only" (This is where you choose the display mode when the node teaser is displayed.)
  • Comment display: (Since we're only displaying this on the node, and not in the comments, we can skip the comment options.)
  • Description: How useful and clear is this article? (A description which will be displayed under the rate widget. This is optional so you can leave it blank.)
  • [x] Display in compact mode (This will display the description in compact mode.)

Interaction

  • Which rating should be displayed?: Users vote if available, average otherwise
    • The options are:
    • Average rating - Displays the average rating in all cases.
    • Users vote if available, empty otherwise - Shows no rating until a user rates the item. Then displays that rating.
    • Users vote if available, average otherwise - Displays the average rating until the user rates the item. Once a user selects their rating, that rating is displayed to that user.
  • Which rating should be displayed when the user just voted?
    • [ ] Average rating
    • [x] Users vote
  • Should a second click on the same button delete the vote? (If you select yes, the user can retract their vote. If you select no, they can change their vote, but not retract it.)
    • [x] No
    • [ ] Yes

Permissions

  • Roles (This determines which roles are allowed to vote. If no roles are checked, all roles are allowed to vote.)
    • [x] Authenticated user(By selecting authenticated user you are giving permission to any user who can log into the site that also include the administrator role)
    • [ ] Allow author to rate his/her own content
  • Behaviour when user has no permission to vote (This determines the action to be taken if a user clicks on the widget but doesn't have the permission to vote.)
    • [ ] Redirect to login and show message (If the user clicks on the widget but doesn't have the permission to vote, the user is redirected to the log in page with and shown a "You must login before you can vote." message)
    • [ ] Redirect to login but do not show a message (This behavior is the same as the first option, except that it does not display a message.)
    • [x] Show a disabled widget (with non clickable buttons) (This displays a disabled widget. I'll select this.)
    • [ ] Hide widget (This will not display the widget but will still display the title of the widget.)
  • (Save)

After saving the widget, we will be redirected back to the configuration page where we will see the widget that we just created and we'll also have the option to edit or delete this widget.

Next, let's create a new article and rate it using the "Number up/down" widget that we just configured.

Create New Article

Note: Before we begin, I’ll create a new user named “Chelsea” and grant authenticated users permission to create articles, as well as edit and delete their own articles.

I'll switch to Safari and login as Chelsea. Then create an article.

  • Click "Add content" (node/add/article)
    • Title: Article #1
    • Body: (Lorem Ipsum)
  • (Save)

Above the content, you'll see the "This article is useful and clear" widget with a disabled plus and minus buttons and a number in between. The number, which is currently zero, counts up or down when a user clicks the plus or minus buttons.

Let's switch back to Chrome and go home. Here we'll see the node teaser of Article #1 which displays the full but not clickable widget. Now I'll click the "read more" link to display the full node, and as configured we'll see the full and clickable widget and we can now cast our vote.

You'll see that when I click the "+" button, the text "You voted '+1' appears.

In the next video, we'll take a look at rating comments using the Thumbs up widget.