What is an image list?

An image list is a way of displaying images with corresponding blocks of text and (optionally) a URL link. When a customer clicks an image, they will be redirected to the URL link if it has been provided.

There are two different listing layout options for image lists:

  • list - displays each image in a full-width row.

  • grid - displays a set number of images per row.

Both of these options have additional customisation settings.

How do I add an image list?

For a image list using the list option:

  1. Go to Website > Widgets.

  2. Click the Add button in the top right.

  3. Click on Image list.

  4. Enter a Title.

  5. Select the List option from the drop-down menu under Listing layout.

  6. Select a Listing alignment.

  7. Select a Listing horizontal layout.

  8. Select a Listing image aspect ratio.

  9. Optionally, enter a Listing image minimum width.

  10. Optionally, enter a Listing image maximum width.

  11. Select an Image link hover effect.

  12. Click the Add button.

For an image list using the grid option:

  1. Go to Website > Widgets.

  2. Click the Add button in the top right.

  3. Click on Image list.

  4. Enter a Title.

  5. Select the Grid option from the drop-down menu under Listing layout.

  6. Select a Listing orientation.

  7. Select a Listing alignment.

  8. Select a Listing horizontal layout*.

  9. Enter a Maximum listings per row.

  10. Enter a Listing minimum width.

  11. Select a Listing image aspect ratio.

  12. Optionally, enter a Listing image minimum width*.

  13. Optionally, enter a Listing image maximum width*.

  14. Optionally, enter a Listing image maximum height**.

  15. Select an Image link hover effect.

  16. Click the Add button.

You can now add this widget to your website but it will only be displayed if it has 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?

  1. Go to Website > Widgets.

  2. Find the image list you are looking for and click the Edit button in the Options column.

  3. Edit the image list's details.

  4. Click the Update button.

How do I delete an image list?

  1. Go to Website > Widgets.

  2. Find the image list you are looking for and click the Delete button in the Options column.

  3. Click the Delete button.

How do I add an image to an image list?

  1. Go to Website > Widgets.

  2. Find the image list you are looking for and click on it.

  3. Click the Widget tab.

  4. Click the Add button to the right of the Images heading.

  5. Click the Choose File button to open a File Explorer window and select an image.

  6. Enter some Alternative Text.

  7. Optionally, enter an Overlay heading (this is displayed on top of the image).

  8. Optionally, enter a URL (clicking the image will redirect to this URL address).

  9. Optionally, enter a Description.

  10. Enter an Overlay background opacity (darkens the image to provide greater contrast to the Overlay heading).

  11. Select a Status.

  12. 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?

  1. Go to Website > Widgets.

  2. Find the image list you are looking for and click on it.

  3. Click the Widget tab.

  4. Find the image you are looking for and click the Edit button in the Options column.

  5. Edit the image's details.

  6. Click the Update button.

How do I move an image?

  1. Go to Website > Widgets.

  2. Find the image list you are looking for and click on it.

  3. Click the Widget tab.

  4. Find the image you are looking for then click and hold the move icon to drag the image up or down the list of images.

How do I delete an image?

  1. Go to Website > Widgets.

  2. Find the image list you are looking for and click on it.

  3. Click the Widget tab.

  4. Find the image you are looking for and click the Delete button in the Options column.

  5. Click the Delete button.

How do I customise an image list?

There are a range of customisation settings for an image list depending on which Listing layout option has been used.

The settings available for the list option are:

  • Listing alignment - Choose how you want the listing to be aligned. Everything to the left, or everything centred.

  • Listing horizontal layout - Choose how much of the row is used for the image and how much is used for the description.

  • Listing image aspect ratio - Choose how the images are cropped and sized.

  • Listing image minimum width - Set a minimum image width to prevent the image from getting too narrow.

  • Listing image maximum width - Set a maximum image width to prevent the image from getting too wide.

  • Image link hover effect - If the image has a URL set, choose a subtle animation for when the image is hovered on.

The settings available for the grid option are:

  • Listing orientation - Choose how you want each listing to be orientated. Vertically (image above, description below) or horizontally (image to the left and description to the right).

  • Listing alignment - Choose how you want the listing to be aligned. Everything to the left, or everything centred.

  • Listing horizontal layout* - Choose how much of the listing is used for the image and how much is used for text.

  • Maximum listings per row - Choose the maximum number of listings you want to display per row in the grid. (e.g. 3 per row, 4 per row, etc).

  • Listing minimum width - Choose the minimum width a listing can be. This determines when the listings wrap on to the next row in the grid when the space available is reduced.

  • Listing image aspect ratio - Choose how the images are cropped and sized.

  • Listing image minimum width - Set a minimum image width to prevent the image from getting too narrow.

  • Listing image minimum width* - Set a minimum image width to prevent the image from getting too narrow.

  • Listing image maximum width* - Set a maximum image width to prevent the image from getting too wide.

  • Listing image maximum height** - Set a maximum image height to prevent the image from getting too tall.

* Only available if the Listing orientation is set to Horizontal.

** Only available if the Listing orientation is set to Vertical.

Can I see some image list examples?

Because image lists have so many customisation settings, they 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 options for this image list are:

  • Listing layout - Grid

  • Listing orientation - Horizontal

  • Listing alignment - Left

  • Listing horizontal layout - Image 50% / Description 50%

  • Maximum listings per row - 3

  • Listing minimum width - 180px

  • Listing image aspect ratio - Round (cropped to fit)

Example 2

This options for this image list are:

  • Listing layout - Grid

  • Listing orientation - Vertical

  • Listing alignment - Centred

  • Maximum listings per row - 4

  • Listing minimum width - 180px

  • Listing image aspect ratio - Square (cropped to fit)

Example 3

This options for this image list are:

  • Listing layout - List

  • Listing alignment - Left

  • Listing horizontal layout - Image 25% / Description 75%

  • Listing image aspect ratio - Natural (variable heights)

Example 4

This options for this image list are:

  • Listing layout - Grid

  • Listing orientation - Vertical

  • Listing alignment - Left

  • Maximum listings per row - 6

  • Listing minimum width - 180px

  • Listing image aspect ratio - Landscape / 3:1 (no crop) - great for logos

Did this answer your question?