What is an image list?
An image list is a way of displaying images with text and URL links. When a customer clicks an image, they will be redirected to the URL link if it has been provided. Image lists have a range of settings that can be used to customise the arrangement of the images and the appearance and behaviour of the scroll-triggered animation.
Once a image list has been added, it can then be displayed on your website by adding it to the content of a row column.
How do I add an image list?
In the admin area
For an image list that displays the images in individual rows:
Go to Website > Widgets.
Click the Add button in the top right.
Click on Image list icon.
Enter a Title.
Select the List option from the listing arrangement Layout drop-down menu.
Select a listing arrangement Alignment.
Select a listing arrangement Horizontal layout.
Select a listing image Aspect ratio.
Optionally, enter a listing image Minimum width.
Optionally, enter a listing image Maximum width.
Select a listing image Hover effect.
Optionally, select a listing animation Type.
Enter a listing animation Duration.
Tick/un-tick listing animation Only play the animation once.
Click the Add button.
For an image list that displays a number of images per row:
Go to Website > Widgets.
Click the Add button in the top right.
Click on Image list icon.
Enter a Title.
Select the Grid option from the listing arrangement Layout drop-down menu.
Select a listing arrangement Orientation.
Select a listing arrangement Alignment.
Select a listing arrangement Horizontal layout*.
Enter a listing arrangement Maximum per row.
Enter a listing arrangement Minimum width.
Select a listing image Aspect ratio.
Optionally, enter a listing image Minimum width*.
Optionally, enter a listing image Maximum width*.
Optionally, enter a listing image Maximum height**.
Select a listing image Hover effect.
Optionally, select a listing animation Type.
Enter a listing animation Duration.
Tick/un-tick listing animation Only play the animation once.
Click the Add button.
You can now add this widget to your website but it will only be visible if it contains published images, see How do I add an image to an image list.
* Only available if the Listing orientation is set to Horizontal.
** Only available if the Listing orientation is set to Vertical.
How do I edit an image list?
In the admin area
Go to Website > Widgets.
Find the image list you are looking for and click the Edit button in the Options column.
Edit the image list's details.
Click the Update button.
How do I delete an image list?
In the admin area
Go to Website > Widgets.
Find the image list you are looking for and click the Delete button in the Options column.
Click the Delete button to confirm.
How do I add an image to an image list?
In the admin area
Go to Website > Widgets.
Find the image list you are looking for and click on it.
Click the Widget tab.
Click the Add button above the Image list.
Click the Choose File button to open a File Explorer window and select an image.
Optionally, enter some Alternative Text.
Optionally, enter an Overlay heading (this is displayed on top of the image).
Optionally, enter a URL (clicking the image will redirect to this URL address).
Optionally, enter a Description.
Enter an Overlay background opacity (darkens the image to provide greater contrast to the Overlay heading).
Select a Status.
Click the Add button.
What size should my image be?
We recommend a minimum of 768px wide, but the bigger the better. We automatically optimise and resize the image for you. We also keep the original you upload so we can recreate sizes in the future, should sizing change.
If you would like the images to be square or round, we highly recommend you pre-prepare the images to be square before uploading so no unexpected cropping occurs.
How do I edit an image?
In the admin area
Go to Website > Widgets.
Find the image list you are looking for and click on it.
Click the Widget tab.
Find the image you are looking for and click the Edit button in the Options column.
Edit the image's details.
Click the Update button.
How do I move an image?
In the admin area
Go to Website > Widgets.
Find the image list you are looking for and click on it.
Click the Widget tab.
Find the image you are looking for in the Images list and click and hold the arrow icon to drag the image up or down.
How do I delete an image?
In the admin area
Go to Website > Widgets.
Find the image list you are looking for and click on it.
Click the Widget tab.
Find the image you are looking for and click the Delete button in the Options column.
Click the Delete button to confirm.
How do the settings affect the appearance of an image list?
The range of customisation settings available depends on which listing arrangement layout option is used.
For an image list using the List option:
Listing arrangement alignment - Changes the alignment of any text to left-aligned or center-aligned.
Listing arrangement horizontal layout - Changes the ratio of the text and the image.
Listing image aspect ratio - Changes how the images are cropped and sized.
Listing image minimum width - Sets a minimum image width to prevent the image from getting too narrow.
Listing image maximum width - Sets a maximum image width to prevent the image from getting too wide.
Listing image hover effect - Changes which animation will play when a customer hovers on an image with a URL.
Listing animation type - Changes which animation will play when a customer scrolls past the image list.
Listing animation duration - Changes the speed of the animation, a longer duration means the animation will be slower.
Listing animation only play the animation once - Sets the animation to only play the first time the customer scrolls past the image list or to play every time the customer scrolls past the image list.
For an image list using the Grid option:
Listing arrangement orientation - Changes the orientation of the listing content to vertically (image above, text below) or horizontally (image on the left, text on the right).
Listing arrangement alignment - Changes the alignment of any text to left-aligned or center-aligned.
Listing arrangement horizontal layout* - Changes the ratio of the text and the image.
Listing arrangement maximum per row - Sets the maximum number of images to display per row in the grid. (e.g. 3 per row, 4 per row, etc).
Listing arrangement minimum width - Sets the minimum width of an image thumbnail. This determines when the image thumbnails will wrap onto the next row in the grid when the space available is reduced.
Listing image aspect ratio - Change how the images are cropped and sized.
Listing image minimum width* - Sets a minimum image width to prevent the image from getting too narrow.
Listing image maximum width* - Sets a maximum image width to prevent the image from getting too wide.
Listing image maximum height** - Sets a maximum image height to prevent the image from getting too tall.
Listing image hover effect - Changes which animation will play when a customer hovers on an image with a URL.
Listing animation type - Changes which animation will play when a customer scrolls past the image list.
Listing animation duration - Changes the speed of the animation, a longer duration means the animation will be slower.
Listing animation only play the animation once - Sets the animation to only play the first time the customer scrolls past the image list or to play every time the customer scrolls past the image list.* Only available if the Listing orientation is set to Horizontal.
* Only available if the Listing orientation is set to Horizontal.
** Only available if the Listing orientation is set to Vertical.
Can I see some examples of image lists?
Sure, the range of customisation settings can feel a little bit daunting the first time you use them. Here are a few examples of image lists with their settings to help you get started.
Example 1
This settings for this image list are:
Listing arrangement layout - Grid
Listing arrangement orientation - Horizontal
Listing arrangement alignment - Left
Listing arrangement horizontal layout - Image 50% / Description 50%
Listing arrangement maximum per row - 3
Listing arrangement minimum width - 180px
Listing image aspect ratio - Round (cropped to fit)
Example 2
This settings for this image list are:
Listing arrangement layout - Grid
Listing arrangement orientation - Vertical
Listing arrangement alignment - Centred
Listing arrangement maximum per row - 4
Listing arrangement minimum width - 180px
Listing image aspect ratio - Square (cropped to fit)
Example 3
This settings for this image list are:
Listing arrangement layout - List
Listing arrangement alignment - Left
Listing arrangement horizontal layout - Image 25% / Description 75%
Listing image aspect ratio - Natural (variable heights)
Example 4
This settings for this image list are:
Listing arrangement layout - Grid
Listing arrangement orientation - Vertical
Listing arrangement alignment - Left
Listing arrangement maximum per row - 6
Listing minimum width - 180px
Listing image aspect ratio - Landscape / 3:1 (no crop) - great for logos