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 6:4, landscape 5:7, or square 1:1, etc.) you can use the Photo Slideshow widget to display differently proportioned images in consistent proportions on your page.
To get started, login and click +ADD CONTENT where you'd like to add the Photo Slideshow widget on your page.
Select the Photo Slideshow widget from the widget menu.
Image tab
Add images to your slideshow by selecting images under the Desktop area. If you wish to display different images to mobile users simply add images to the optional Mobile area.
When adding images you can now select from images already uploaded to your site, or you can upload new ones by following the link to Upload an Image. Select the image(s) you wish to display and click Save.
Each image now appears with three 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. That way when a user clicks the image, they will be directed to the link you have set.
When in the image settings, scroll down and open Advanced Options to add one or two linked buttons to display 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 on the Settings Cog icon for each image as required.
Layout tab
Under the Layout tab, choose from four defined aspect ratios; portrait, landscape, square, and panorama.
Note: If you select the Use image proportions option your images will be displayed with their original uploaded proportions (height : width aspect ratio).
The selected aspect ratio will automatically fill to fit the column width available to it, and the image will be scaled to fit the column width.
Display tab
To modify how the image slideshow will appear on your site, click into the Display tab.
Choose to either Scale, Scroll or Crop your slideshow.
Scale: Reduces the size of your image so that it fits within the constraints of your selected layout.
Scroll: Causes your images to scroll (pan) within the constraints of your chosen layout.
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, your image will be automatically cropped at the top and bottom to fit within the space available.
You can also set progress dots and left and/or right arrows to appear by your image slideshow so that people can manually transition between images. To apply advanced settings to multiple images within a slideshow, use the >< icons to navigate through each image before clicking Save.
Tick the checkbox at the bottom of the Display section if you wish your slideshow to display images in a random order instead of the order they are set on the Images tab.
Click Save when you're finished.