Online Support Centre


Photo Slideshow widget

The Photo Slideshow widget is used to display one or more images within a defined area on a page. Since photos often come in different aspect ratio proportions (such as portrait 6x4 or landscape 5x7 etc) you can use the Photo Slideshow widget to display differently proportioned images in consistent proportions on your page. The system includes 4 defined aspect ratios (proportions). These are Portrait, Landscape, Square, and Panorama:


Whichever aspect ratio you choose will fit within the column width available to it.

To get started, login and go to a position on a page where you wish to display your image(s), then click the Add Content button. Now select the Photo Slideshow widget.

You are presented with the option to add images to your slideshow.  You must add at least one image to the Desktop area. You also have the option to display different images that will appear in this position if someone visits the page using a Mobile device. If you do not set images for Mobile display, your Desktop images will be displayed on Mobile devices instead.

Click Add Images to add one or more images. Note that the reason you may prefer to add just one image instead of multiple images is if you are simply using this widget to force differently sized images to appear with consistent image proportions (for example, you could use this widget multiple times where each contains a single sponsor logo, or staff photo. This would ensure they all appear consistently sized across your page).


You can now select images already uploaded to your site, or you can upload new ones by clicking the link to Upload an Image. Select the image(s) you wish to display and click Save.


Each image now appears with with 3 icons.


Click and hold the Arrows icon to drag & drop your images into a different display order. 

Click the Delete (trashcan) icon to remove the image from the slideshow.

Click the Settings Cog icon to apply a caption or set a link against the image when displayed on your site. When a user clicks the image, they will be directed to the link you have set. 


From the Settings cog area you can also click Advanced Options to add one or two linked buttons to display on top of your image.  You can also choose to style and apply a Text overlay on top of your image.  



Click Save to apply your changes.  Continue to apply styling to each of the images in your slideshow by clicking the Settings cog icon for each image as required. 

Now set the aspect ratio of your image(s) by clicking the Layout tab. Note: if you select the Use image proportions option your images will be displayed with their original uploaded proportions (height versus width aspect ratio). So do not use this setting unless your images all have the same original aspect ratio or the slideshow will appear to gain and lose height as it transitions through each image.


Click the Display tab to modify how the image slideshow will appear on your site.

Because images normally come in many different proportions, you can choose how you want the system to fit your image within your previously selected aspect ratio as follows:

Scale: reduces the size of your image so that it fits within the constraints of your selected layout. Note that this looks to the pixel dimensions of your entire image, including any borders or transparent areas.

Scroll: causes your images to scroll (pan) within the constraints of your chosen layout. For example, if you have uploaded an image with a Portrait aspect ratio but then selected a Landscape layout, people would see your image being automatically panned (scrolled) within the space available.

Crop: causes your images to be cropped to fit within the constraints of your chosen layout. For example, if you have uploaded an image with a Portrait aspect ratio but then selected a Landscape layout, people would see your image where it has been automatically cropped at the top and bottom to fit within the space available.

You can also set progress dots and left or right arrows to appear on top of your image slideshow so that people can use these to manually transition between them. To apply advanced settings to multiple images within a slideshow you should use the >< icons to navigate through each image before clicking Save.

Lastly, tick the checkbox at the bottom of this section if you wish your slideshow to display your images in a random order instead of the order they are set on the Images tab.


Then click Save to view your image(s) appearing based upon the settings you have applied.


Was this article helpful?
0 out of 0 found this helpful