Gallery Widget

This article describes the use of the Gallery Widget

Andrew Busuttil avatar
Written by Andrew Busuttil
Updated over a week ago

The Gallery widget is used to display a gallery of your entries for the active contest. This widget is typically used in conjunction with the Entry widget. All widgets are responsive in design so they will resize based on the size of the device displaying the widget.

To edit the Gallery widget select Design for the specific contest and then select the Contest Widgets tab. 

Then select "Edit" to modify the look and feel of the Gallery widget.

The following options are then available to style your gallery widget:

  • Widget Title - This is just the name of the widget to help you identify the widget from the list of all widgets.

  • Gallery Type - This option allows you to set the type of gallery you want to display.

  • Entry Widget - This is the Entry Widget to use when the entry thumbnail is selected. Note this is not used if the option to play entries from the gallery is selected.

  • Background - This is the background colour for the Gallery Widget

  • Entry Widget Type - This is to determine how to display the entry widget when an entry thumbnail is selected. The options are either Standard which will display the entry in place of the Gallery or Popup which will display the entry in a popup window (Note this will not take effect if the play entries from gallery is selected).

  • Vote Label - This provides the label on the vote button if voting from the gallery is enabled. (important note: social voting is not available with the gallery widget)

  • Gallery Order - This sets the sort order of the entries displayed in the gallery

  • Show Entries - This determines the entries that should be displayed in the gallery. This can include All entries which will display all published entries for the active contest or Featured which will display on marked featured entries from the active contest. 

  • Number of Entries per page - This sets the number of entries that will be displayed per pagination.

  • Total Entries to display - This sets the total number of entries to display in the gallery. If this option is set to 0 all entries will be displayed.

  • Include Categories for this gallery page - If categories are setup for the contest this will display the ability to filter entries by category

  • Display "All" selection for category - This enables the category filter to include the ability to also display all entries (regardless on category)

  • Display empty categories - This will display categories in the selector that do not have any entries yet 

  • Include Search - This includes the search option for the gallery

  • Play video from gallery - This allows videos in the gallery to be played directly within the gallery. If this option is selected entries then any non video entries will not do anything when the thumbnail is selected. It is recommended that this option is only selected when only video entries exist in the gallery.

  • Vote from gallery - This displays a vote button in the gallery so voting can occur directly from the gallery.

  • Text Styling - The text styling and associated settings (Typeface, Weight, Size, Colour, Background Colour*, Shadow colour) is used to set the various fonts and button styling. *Note background colour only applicable to buttons.

  • Show Metrics - This enables the total Views, Comments and Votes metrics to be displayed under each entry.

  • iFrame width - This sets the widget of the widget to be displayed on the page. This can be expressed in either px or %. To maximise the width available to the gallery widget set this to 100%. This will allow it to be displayed correctly on mobile devices

  • iFrame height - Set this to the height of the gallery. Note if this is set too small the widget will display vertical scroll bars.

Embed code

The widget can be embedded in to the site by using the embed code.

Head/Footer embed code
The first code to embed includes the code that should be included in the header or footer section of your website.

In order to use this select the "Copy div to clipboard" option and then paste this code into the header or footer of your website. Then edit the code and paste the API key you registered ( refer: here ) earlier replacing the "Your API Key Here" text with your key. Make sure you keep the quotes around the API key.

Note that once you have done this for one widget you will not need to add this code for any other widgets as they all use the same header/footer embed code.

Widget embed code
Now that the header/footer code is inserted you can now place the embed code for the specific widget.  

Copy the embed code by selecting the "Copy div to clipboard" button and place the code wherever you would like the widget to appear in your website.

Once this is complete review your site and if required adjust the widget styling to fine tune to match with your site.

Did this answer your question?