Gallery module

Use the Gallery module to show several images on your website with the option for visitors to open the images individually in an overlay when clicked.

 

You can add a Gallery module by selecting Gallery under the category Visuals in the Add module overlay.

 

To edit your Gallery module after it has been added, double click in the module or click on the Edit icon. You can then expand and edit options under Content, Design or Settings in the module overlay. 

 

 

Content

There are three ways of adding images to the module:

• Upload new images
• Use existing images from File Library
• Use images from Global Data

 

Upload new images

Click on Add or drop file to add a file from your computer or drag and drop your image on the outlined area. You can add several images at once.

 

Use existing images from File Library

Click on Select from File Library and choose existing images from the File Library. You can add several images at once.

 

Use images from Global Data

Toggle the option Use Global Data source in the module overlay to select gallery images that you've previously uploaded in Global Data.

 

To view and update the images in global data, go to Content > Global Data > Gallery. Here you can add additional photos by selecting from the file library or by dragging and dropping files. 

 

 

You can sort the images in your gallery in four different ways:

• manually
• by newest to oldest
• oldest to newest
• alphabetically

Simply choose from the dropdown under "Gallery Sorting".

 

 

Once you've added images to the module, you have the option to add specific information to each image by clicking the arrow next to the file name: 

• Edit: When you've added your image, you have the option to edit it directly in the Editor. Click on Edit next to your image to open up the Image Editor. Read more about using the Image Editor here. 
• Replace and remove: if you regret adding the image to your website you can either click Replace to add a different image or click Remove.
• Alternative text: include an Alt text (alternative text) to help search engines "read" your images.
• Caption text: the caption text becomes visible on your image when you enable hover effects with caption on your gallery.

 

Design

The Design section is where you change the background, border and spacing of your Gallery module. For more specific styling options, click more local design options or edit the Global Design of the Gallery module. For a more thorough introduction to styling, see our dedicated styling guide.
 

Settings

Here you can change the appearance of your gallery. Choose how many images you want to be visible at a time, the amount of columns (1-12) you want images to be divided into, and margin between your images. If Amount of images shown is set to 0, the module will display all your images.  

If you choose to not display all of your images in the list at the same time, the Editor automatically adds arrows on each side of the module so visitors can flip through the images. You can adjust the following transition settings:

• Show arrow navigation: arrows are added on the sides of your gallery.
• Show pagination dots: dots are added at the bottom of your gallery to help visitors navigate between images.
• Auto change of slides: your images will automatically transition without the visitor clicking on the module.  
• Pause transition on hover: the auto change of slides will pause when a visitor hovers the gallery.

 

As an addition to the standard layout in the Gallery Module, we have added the masonry layout as a display option. You can choose the layout style in the edit overlay of the Gallery Module. Navigate to Settings and then Gallery Overview. There, you can choose from the Gallery Style Dropdown menu. Selecting 'Standard' from the gallery dropdown will crop the photos so that all photos have a standard size, whereas the 'Masonry' keeps the original format of the photo.

 

Transition Types

Choose how you want your Gallery to change images with the Slide transition type setting available on both of the modules. You have three different options: sliding, slow fade and fast fade.

Sliding

 

Slow fade

 

Fast fade

The time between transitions is by default 5000 milliseconds (5 seconds). Change the interval to a higher value if you want the images to be visible for a longer time and a lower value if you want the images to slide faster. Remember to input the value in milliseconds (1000 milliseconds = 1 second).

Note that the transitions on the images in the examples above are set to 2000 milliseconds (2 seconds).

 

Thumbnails

Cropped or uncropped thumbnails: You have the option to choose whether you want your images to be cropped or uncropped thumbnails. See the example below for a visual comparison of the two settings.

 

Tick the box Show caption with thumbnail if you want to display the caption text below your images. You also have the opportunity to add the same caption on the image overlay, just remember to tick Show caption in overlay as well. 

In the Settings section you can also add hover effects on your images. You can either use the hover effect as a purely graphical feature or to display the image caption text on top of the image. Read more about hover effects here.

 

Difference: Image List vs Gallery

The Gallery and Image List modules look very similar when you add them to your website. The difference between the two modules lies in the behavior when a visitor clicks the images. When using the Gallery module to display images, an image will enlarge and be shown in an overlay when clicked. Clicking an image from the Image List module, the visitor will be directed to another page/website/email/file if you have added a link to the image (if no link has been added, nothing happens when the image is clicked).

 
The two modules also differ in terms of image sources. The Gallery module can fetch images from the Gallery content in Global Data whereas the Image List module cannot be set up to fetch Global Data content.