Image list module

Use the Image List module to display several images on your website with the option to add dynamic features to the presentation of your images. You can add an Image list module by selecting Image List under the category Visuals in the Add module overlay.

To edit your Image List module, hover the module and click on Content, Design or Settings on the dropdown.

Content

There are two ways of adding images to the module:

• Upload new images: click on Add or drop file to add files from your computer or drag and drop your image on the outlined area. You can add several images at once.
• Use existing image from File Library: click on Select from File Library and choose from  your existing images in the File Library. You can add several images at once.

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: once you've added your image, you have the option to edit the image directly in the Editor. Click on Edit next to your image to open up the Image Editor.
• 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 image list.
• Link: choose the type of link you want on your image from the dropdown. You can choose from External URL, Internal page, Email and File. Read more about the four link types under the Image module. Enable the option Open link in new tab to open the linked content in a new browser tab when clicked. Activate Set "nofollow" property if you don't want search engines to follow the hyperlink. When this setting is enabled, your link will not affect the target's search engine ranking.
• Custom tracking name: track number of clicks on a specific image by adding a custom tracking name. The statistics will be visible on your dashboard.

   

Settings

Here you can change the appearance of your image list. Choose how many images you want to be visible at a time, the amount of columns (1-12) you want images 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 Image List.
• Show pagination dots: dots are added at the bottom of your Image List to help visitors navigate between slides.
• 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 Image List.

Transition Types

Choose how you want your Image List 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.

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.

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.