All Collections
Website
Widgets
Image gallery widget
Image gallery widget

How to display images in a customised grid on your website.

Clare Wade avatar
Written by Clare Wade
Updated over a week ago

What is an image gallery?

An image gallery is a way of displaying images in a customised grid. Image galleries 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 an image gallery 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 gallery to my website?

In the admin area

  1. Go to Website > Widgets.

  2. Click the Add button in the top right.

  3. Click on Image gallery icon.

  4. Enter a Title.

  5. Select a Caption display mode.

  6. Enter a listing arrangement Maximum per row.

  7. Enter a listing arrangement Minimum width.

  8. Select a listing image Aspect ratio.

  9. Optionally, select a listing animation Type.

  10. Enter a listing animation Duration.

  11. Tick/un-tick listing animation Only play the animation once.

  12. 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 images to an image gallery?.

How do I edit an image list?

In the admin area

  1. Go to Website > Widgets.

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

  3. Edit the image gallery's details.

  4. Click the Update button.

How do I delete an image list?

In the admin area

  1. Go to Website > Widgets.

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

  3. Click the Delete button to confirm.

How do I add images to an image gallery?

  1. Go to Website > Widgets.

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

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

  4. Drag your images directly into the designated area or click the Choose images button to open a File Explorer window and select the images.

  5. Wait for the images to upload.

  1. Go to Website > Widgets.

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

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

  4. Edit the image's details.

  5. Click the Update button.

How do I move an image?

  1. Go to Website > Widgets.

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

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

  1. Go to Website > Widgets.

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

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

  4. Click the Delete button to confirm.

How do the settings affect the appearance of an image gallery?

There is a range of customisation settings available for an image gallery:

  • Listing arrangement maximum listings per row - Sets the maximum number of images you want 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. This determines when the images will wrap onto the next row in the grid when the space available is reduced.

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

  • Listing animation type - Changes which animation will play when a customer scrolls past the image gallery.

  • 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 - Choose whether the animation only plays the first time the customer scrolls past the image gallery or plays every time the customer scrolls past the image gallery.

Did this answer your question?