Image galleries allow us to display a carousel of images that relate to the subject matter. For example, we can show highlights of the accommodation we offer on relevant pages or pictures of an event.

Overview

Image Gallery wireframe
An example of an Image Gallery component

Image galleries are flexible and can be updated as new pictures become available. The images within a gallery can be added to or removed as requirements dictate. Furthermore, when building a page you can select an existing image gallery where it exists, edit an existing one, or create a new one.

An image gallery on the live website.
On the live site, an Image gallery looks like this

When creating or editing an image gallery, you will encounter the following steps. 

  • The Reference Title is how the image gallery is referenced in the backend of Contentsis and won’t be displayed
  • The ‘Title’ is what will be displayed on the front end of the website, so choose a relevant, concise title! It looks like this within Contensis...
  •  
Title fields in an image gallery within Contensis.

Once you've titled your gallery you can add or edits images, image titles and descriptions. 

  • Click ‘+ Add component’ to add an image card. The image at the top in Contensis will be displayed first once the gallery is published.
  • Then clock ‘+ Select an image’ to search the gallery within Contensis, or ‘upload image’ to add a new one.
  • Use the ‘x’ at the top right-hand side of an image to remove or replace it
  • You can use the three dots at the top right of each image entry to change its order within the gallery or remove it altogether
  • Add an image title relevant to what’s displayed
  • Add alt text which describes the image for accessibility purposes
  • Add or edit a short description of the image in the ‘text’ box at the bottom.

Once you have completed these steps you will have created an image entry

An image entry in Contensis.
An image entry looks like this in Contensis

To add more images, simply click the green '+' button. 

Once you are happy, you can then publish the component and add it to relevant pages. 

Remember: A single image gallery can be added to multiple pages once it is created, but if you edit it in one place those edits will appear across the website. 

Component in action