Tutorial: How to Create Photo/Video Voting Contest on Joomla
In this tutorial we will cover a practical example how to organize voting contests with photo and video on Joomla based website, also will cover some tips & tricks and fine tuning of NorrCompetition configuration.
This is a step-by-step guide including video.
This tutorial is available in other languages:
Begin to work
First of all, you need to download NorrCompetition distributive package. Proceed to Product page.
After purchasing the product, you need to go to My Downloads section on NorrNext site.
There is a list of extensions associated with NorrCompetitions which are available to download. It is the component itself and its modules (like entries, contests or results module and etc.) and also plugins (search and sitemap plugins and etc.). After getting all required add-ons you can proceed to Joomla administrator panel.
The product and its add-ons can be installed as typical Joomla extensions. Also NorrCompetition is localized in many languages and you can download the localization you need or translate the component to a new language via Transifex. See a list of all available localizations here.
A new menu with NorrCompetition items will be created after the component installation. Such approach can be seen in Kunena (it saves the time and you can see which features are available on the front-end). After the first installation, a message will be displayed inviting you to install sample data (20mb of data will be downloaded from an external server). Otherwise, you can proceed further. Using this tutorial the sample data won't be needed, thereby you can go to component dashboard since it is always interesting to understand how the component works personally and estimate usability of the product.
The component has the following structure:
Categories. Minimum of information. Fields. Custom fields which can be assigned to contests. You can create just a title, text area, checkbox and etc. NorrCompetition uses own fields which are not associated with Joomla fields. Contests. Contests have 3 types: photo, video and simple. You are not able to change the type if the contest is created since the entries will be associated with the contest. There are a bunch of settings grouped by tabs, so you can configure the contest according to your needs. Guests and registered users can submit entries via the entry form. The contest can be active or completed. Entries. Entries are so-called component items. The entry will appear in the contest after the approval by administrator.
You should work on the structure in the following order: category should be created first, then let's add required fields. After that, it's time to create a contest and select which category the contest should be assigned to and which fields must be added.
You can override most of the parameters via the contest settings. This way parameters can be set by default via global component options, but if you need to set some custom parameters you can do it via contest settings. For example, it might be a number of entries per row or permissions: only registered users can submit entries in the first contest, but in the second contest even guests can submit entries and so on.
You should select a type of the field during the add:
Title. This is title or name of the entry. A "name" term is not always suitable for your content since entries can be people and can be inanimate objects (exhibitions, auto brands, pictures and etc) or even pet's moniker and there could be a need to use different title for each contest within the same website. For instance, it is better to use a name for "Miss Universe" and brand for "Best cars" as the title.
Text. Input field. There is a filter available for this field.
Text area. You can select SafeHTML filter to remove unsafe tags and attributes. If you select Text Filters you can embed any snippets including galleries, Google Maps and so on.
Calendar.
Checkbox.
URL.
You can make the field required or hide its name on the front-end.
The component is designed to provide you the maximum comfort during the workflow and is focused on contests functionality allowing the integrator to have a choice which 3rd party extensions should be used to get the additional features (social authorization, user profile, assign scores for actions and etc). Thereby, a user profile can be designed as using standard Joomla features, so using 3rd party extension like EasySocial, the social authorization can be provided by Akeeba Social Login or Slogin extensions and etc. We will talk about it below.
Think about contest structure
What subject can be chosen to organize the contest? It depends on your fantasy. We can list such options as: Miss state (and winners grouped by cities), music band (it is good for clubs and bars), national cuisine (best restaurant dishes), car of the year, performances on ice, children's paintings, picture exhibition, dances, pet of the month, best student short film or movie, trailer of the year, favourite book and many other. Thereby, the range of use varies from local communities, educational institutions and clubs till city portals and web2.0 sites.
Let's take as example a website dedicated to city bars and nightlife. It will contain announces and agenda, news and reports and now you can extend the site with contests.
We have created the following contests and fields:
Miss of the month - the most charming female visitor of the club (contest)
Name - title
Club - text (input field)
Date - calendar
Find me on social media - a URL to user's profile in social media
Mister of the month - the best male image (contest)
Fields are the same as in the previous contest
Live show of the month - best live band performance (contest)
Band - title
Club - text (input field)
Description - text area
Alternative art - a contest with artistic images made in the studio / Cosplay
Title - title
Model - text
Photographer - text
Makeup - text
Description - text area
Find us on social media - URL
Agree to Terms of Service - checkbox
Here's how it goes - first two contests are dedicated to nightlife: you can visit club and bar websites or social media, take the most impressive visitors' photos at your choice and submit entries to the right contest to make the voting more active. You can rename contest title according to the site idea (person of the month and etc). Do not miss club name and URL of the person whose photo has been taken (optional).
The 3rd contest is dedicated to the live performances recorded in local music club/bar. It will help new bands to get more attention and recognition. They can help you to promote the contest by making announce within their social media channels. As the result, each band will attract their fans to vote and your auditory will grow up. We also added two new fields: club name and description (to provide a short information about the show).
And, finally, Alternative Art - a special contest where creative persons can submit entries with own images and participate. Nice photo sessions made by the professional photographer, good makeup and something handmade (clothes, accessories, etc). Gothic images, steampunk or cosplay - an expressive way to attract people's attention. You can examine social media channels related to these subjects and invite creative persons to take a part. This is the only contest in our example where users can submit entries. That's why we added a checkbox field allowing users to accept Terms of Use.
We also have created 2 categories for the contests listed above: Entertainment and Images.
Here is how the new field mode looks like:
Well, the fields have been added:
Adding a contest
Now it is time to add a contest:
All params are grouped by tabs. In the first tab, you can input a title and full description (you can play with text formatting or insert an image if the WYSIWYG is enabled). Further, select category and type. It might be Entertainment or Image for the category and the type should be Image, Video or Simple. You can select the type one time during the contest creation. Let it be Photo.
Note: Once the type is selected and at least one entry is added, you cannot change the type of the contest. If the contest has no entries (you have removed them and cleared trashed items), then you can change the type again.
Set the Start and End date of the contest. When the End date is expired, the status will be changed automatically from active to completed and results will be displayed on the contest page. It is recommended to read the following tutorial: Different scenarios of voting contests.
Now proceed to Fields tab and select which fields should be assigned to this contest.
Besides of that, the Title is always required field since the system must indicate entry title on the front-end.
The next tab which we need to configure is Layout options. Here we can manage the layout of the contest.
All params are taken from global options, but you can set custom params for each contest and finally override settings. We need a countdown timer showing a number of days before the voting will start. Just set Voting Start Timer to Yes.
Let's perform similar manipulations with Mister of the Month contest (type: Photo), so I will not stop on this in detail.
Now it is time to try video contests. Let's create a 4th contest called "Live show of the month", then select video type and assign associated fields (according to the structure above). NorrCompetition support various video providers URLs which can be processed. Besides Youtube, there are various services as Vimeo, Instagram and etc. We will add entries a little bit later.
And the most interesting contest - Alternative Art. Unlike the previous ones, the peculiarity of this contest is allowing users to submit entries. These entries can be submitted via a special form on the front-end. After approval by the administrator, the entries will appear in the contest. Users are not allowed to submit entries by default, but we will set right permissions by overriding the global options. Go to Contest > Permissions tab, find first 4 params (Create, Create Before Contest Start and so on) and set them to Allowed.
Component global options
Now let's proceed to global options. This is Options button on the top right side of component administrator panel.
General tab
Let's select an appropriate theme (e.g. bootstrap3) and find Notifications on Entries parameter. What is it? A site administrator can receive notifications when the user submits an entry on front-end. If the entry was approved and published, then entry submitter will have an ability to edit the entry on front-end and update data (change photo or description), but in such way, the entry will be unpublished and administrator should check it out again. It is good since the site administrator must control entry changes. So, this option has 2 params: notifications on new entries and notifications on changed entries. Let's set both params.
Share button - social buttons to share pages (Open Graph is supported) - let's add all available social media buttons.
Contest tab
Entry count param - specify the entries count that a contestant can submit for one contest. Let's try to set it to 3.
Additional photos - this param allow adding additional photos even in video type of the contest turning photos into a mini-gallery. A magic parameter! We will set it to "Yes".
Voting options - here are standard settings, but you can tune up the parameters.
Comments tab
There is an option to include comments on the entry page. By the way, it is possible to add various comments grouped in tabs. Let it be Komento now.
Images tab
Here we should set size params for images to be generated by the component: thumbnail, medium and big images. By the way, you can set custom width and height for these images in contest edit mode. It will allow creating contests with different size for images. For instance, in some cases, you may need vertical and horizontal photos in different contests.
Permissions tab
Here we can set which user groups should have permissions on specific actions. It is important since the voting is not allowed by default. Let's skip Guest group and select Registered group and set Vote to Allowed. . Now registered users can vote for entries.
Adding entries
You can add half of the entries via the back-end. It looks like tis:
Do you remember there was a mention above that registered users can submit entries on front-end? Below is the screenshot how it looks like:
Here we can see all the custom fields we have assigned to the contest including "Agree with Terms of Use"checkbox.
As soon as the entry is submitted, it must be approved by the moderator and after that, it will appear in the contest. By the way, the user can create contests on the front-end (it is also moderated by the site administrator). But we just do not need it in this case study. Here is how My entries page looks like:
It's a user's entries list, with ability to edit any item and proceed to the entry page. All is simple and clean.
Active contest on the front-end
Well, all necessary data is ready and we can run a contest and make the site an extensive promotion. Here is how the active contest looks like:
Converting visitors into users
Well, the structure has been created, entries have benn added and the voting has been started. Now it is time to add various improvements to make the site more user-friendly.
Since only registered users can vote in 3 contests we have been created, the first priority now is providing social authorization to allow users to sign up/sign in to the site in a few clicks and to vote. without boring standard registration process with confirming account via email and so on. To get such feature a 3rd party extension is required. You can have a look at Akeeba SocialLogin or Slogin and make sure social media icons have appeared in your login module.
Now let's replace message 'You do not have permission to vote' to a custom message that has a call to the user signing in to the site first. It is easily can be done via Joomla language override.
Go to Extensions > Languages > Overrides > New.
Try to search for the value to get the required constant (COM_COMPETITION_VOTE_ERROR_NO_PERMISSIONS), set new override and save. Now we got the new message: “To vote for the entry, please sign in to the site using social media account”
Voting options
Ability to set voting options according to the contest requirements is a very important moment. You should go to Options > Contest tab > Voting Options.
Here you can set Vote Frequency, Maximum Votes per Entry which the user can vote per entry (e.g. ability to vote again), various params of checking to provide protection from unfair voting and so on. Traditionally, these parameters can be overridden in the contest settings.
Active contests management
Well, all necessary tasks have been done and the voting is in the process. How the process of contests managing and moderation looks like? Fortunately, this is not difficult.
We have mentioned above that NorrCompetition can send notifications about new and changed entries by default. To get such result you should add these options in global settings.
Also, there is a list of pending entries in the component dashboard. By clicking on any of pending item we will proceed to entry edit mode and see comparison table with old and changed content. If all is fine, then we can publish the entry.
Entry changes moderation
The user can edit the entry by editing and changing some data on the front-end. It might be something like text area with description (do not forget to set permissions allowing to edit the entry). This way, the entry will be blocked and became unavailable in the contest until it is reviewed by the site administrator. I would like to dig in on this in more detail.
The changed entry in entries list looks like this:
A special icon appears that identifies the entry as modified by the user.
Proceed to Edit and we can see a comparison mode divided into two parts: left part consist of old content and changed content is displayed on the right side. Media and fields that have been changed by the user are inked by yellow color. Moderator also can modify fields.
If all is fine - just set the parameter to Confirmed in the bottom of the page and click on Save. This entry has appeared in the contest again.
Additional notifications
Two standard notification events help the site administrator with moderation. But you also may need to notify contestant about some actions. To get such result, we should install NorrCompetition Notifications plugin which comes as core add-on.
The plugin sends notifications to email about the following actions:
Published entry
Unpublished entry
The entry has been approved
The entry has been unapproved
The entry has been declined (sent to trash)
The entry has earned a vote (somebody voted for the entry)
These notifications fully cover users' needs.
Completed contest. Results to display.
So, the Voting End Date has expired and the contest has changed its status to the completed one. As the result, users are no longer have the ability to vote and layout of entries list has changed.
A Grand Prix status.
The Grand Prix term (from French) means the main prize given to the winner of the contest or in the competition. The component is designed to assign Grand Prix status to one entry per a contest only. Despite the results, the entry with Grand Prix status will always be displayed first.
As the result, the site administrator can assign Grand Prix status to the entry according to the sympathies of the editorial staff or members of the jury.
Grouping of winners by custom fields
It is cool to summarize and to see a list of entries from highest rating to lowest, but... Depending on the contest, you may need to group winners by fields. For instance, to group entries by city or age. You can display 3 winners from New York, below are 3 winners from Los Angeles and etc. The city is a field we have added before and NorrCompetition can sort results using the method that has been described.
To reach such result, please edit required contest > Layout Options and find parameters listed under Completed Options header:
Entries per Result - the count of entries with the highest rating that are displayed in the completed contest. Traditionally, this value is 3 (can be changed), but all other entries are displaying below. Grouping Field - select the field that will be used to group the entries when the contest is completed. This is should be city or club according to our site example. Entries per Field - this parameter will be described below. Also, let's set it to 3.
The winners displaying in the following schema: The winner with Grand Prix status (if any entry has such status) has the highest priority and visually differs from others. Below we can see winners regardless of the field. But if grouping by field is selected, then we will see a list of winners according to values taken from the field and to descend. If the grouping is not selected, then all entries will be displayed.
Other component features
Are there any other interesting features or tricks? Multilingual content. The component provides multilingual content. You can translate titles of contests, categories and fields and also Grand Prix description. Entries data cannot be translated because in a real situation it will make the process of submitting more difficult for the end users who will not care about localizing their content into other available languages.
Monetization. You can have a look at AUP Plugin for NorrCompetition - using these rules you can assign AUP scores for the performing actions and set limits. E.g. to assign -1 score for a vote. The user should buy scores to vote for entries. A payment plugin for AUP might be required too.
An alternative way of monetization. Set up NorrCompetition permissions allowing the specified user groups to vote and only users of these groups can perform actions like voting. Then we will need a Joomla subscription extension. It opens a wide range of monetization - you can create a few pricing plans for a specified period of time (5 days, 2 weeks, 3 months and etc). After successful payment, the user will be assigned to the specified user group (which we already set up in NorrCompetition). The user will have to vote for entries, submit entries and etc. When the subscription is expired, the user will be assigned back to Registered User Group and need to buy the subscription again.
Summary
NorrCompetition's functionality is wide enough and suitable for organizing various contests and voting. Moreover, its flexible options allow you to adapt the component to your needs.
The component has a user-friendly interface and comes with various themes - it is easy to override theme via Joomla template. The code is clean and 100% Joomla native, also you can enable comments, some features can be included via plugins. If you are developer, you can create own plugin using component API and extensive documentation.
Good luck with building voting contests using NorrCompetition!
Last updated
