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