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. Choose from four defined aspect ratios; portrait, landscape, square, and panorama.
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.
To get started, login and go to the position on your page where you wish to display your image(s), then click +ADD CONTENT. Select the Photo Slideshow widget from the widget menu.
Here you are presented with the option to add images to your slideshow. You must add at least one image to the Desktop area. If you wish to display different images to mobile users simply add images to the Mobile area. If you do not set images for Mobile display, your Desktop images will automatically be displayed on mobile devices instead. The widget is limited to a maximum amount of 20 images.
Note: 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 headshot photo. This would ensure they all appear consistently sized across your page).
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 and 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 Photo Slideshow Settings open Advanced Options to add one or two linked buttons to display on top of your image. Here you can also choose to style and apply a Text Overlay on 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.
You can also adjust the aspect ratio of your image(s) by clicking into the Layout tab.
Note: If you select the Use image proportions option your images will be displayed with their original uploaded proportions (height : width aspect ratio). Therefore, do not use this setting unless your images all have the same aspect ratio (or else the slideshow will appear to lose and gain height as it transitions through each image).
To modify how the image slideshow will appear on your site, click into the Display tab.
Because images 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 applies 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, 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 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, 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.
Click Save to view your Photo Slideshow.