How to add an image gallery to your page | Civio Engage Knowledge Base [Skip to content](#main) [ ![Civio Engage Knowledge Base](/civio-light.svg) ](https://engage.knowledge.civ.io) [Product documentation](/articles) [Release notes](/releases) [Roadmap](/roadmap) [ Support portal ](https://engage.knowledge.civ.io/portal/login) Toggle navigation [Product documentation](/articles) [Release notes](/releases) [Roadmap](/roadmap) [Support portal](https://engage.knowledge.civ.io/portal/login) 1. [Home](/) › 2. [Product documentation](/articles) › 3. [Working with content](/articles?category=1) › 4. How to add an image gallery to your page How to add an image gallery to your page ======================================== Updated 5 months ago · 3 min read Search Search When you create a project or any other type of page on Civio Engage, you can add a image gallery to display multiple images organised in a visually appealing and structured manner. There are two types of image gallery you can create: 1. Thumbnail gallery 2. Carousel Slideshow How to create a Thumbnail gallery --------------------------------- 1. Navigate to the page where you want to add an image gallery. 2. Click **Edit**. The Edit page will now open. 3. Click on **Add block** on the bottom of the page. In the dropdown, select the **Image gallery** block type. 4. Enter a **Title** for your image gallery. 5. In the **Display as** field, make sure the **Thumbnail gallery** is selected. 6. In the **Display ratio** field, select either 16:9 or 4:3 from the dropdown. This ratio determines how the images are displayed in the actual image gallery. 7. Add the images to your gallery through clicking **Add images**. 8. For each image that you add, you will be presented with the following fields: 1. **Image** (required) 2. **Alt text** (required): Alternative text, the text that describes the appearance or function of an image on a page. This text is read aloud by screen readers used by visually impaired users, displays in place of an image if it fails to load and is indexed by search engine bots to better understand the context of your page. 3. **Caption**: The descriptive text displayed under the image (max. 200 characters). 9. Once you have added the images to your gallery, click **Add Image gallery**. 10. Click **Publish** to publish the gallery. ![gallery2.jpeg](/storage/articles/9189800454927.jpg) How to create a Carousel slideshow ---------------------------------- To create an image carousel: 1. Navigate to the page where you want to add an image carousel. 2. Click **Edit**. The Edit page will now open. 3. Click on **Add block** on the bottom of the page. In the dropdown, select the Image gallery block type. 4. Enter a **Title** for your image carousel. 5. In the **Display as** field, make sure the **Carousel slideshow** is selected. 6. In the **Display ratio** field, select either 16:9 or 4:3 from the dropdown. This ratio determines how the images are displayed in the actual image gallery. 7. Add the images to your gallery through clicking **Add images**. 8. For each image that you add, you will be presented with the following fields: 1. **Image** (required) 2. **Alt text** (required): Alternative text, the text that describes the appearance or function of an image on a page. This text is read aloud by screen readers used by visually impaired users, displays in place of an image if it fails to load and is indexed by search engine bots to better understand the context of your page. 3. **Caption**: The descriptive text displayed under the image (max. 200 characters). 9. Once you have added the images to your gallery, click **Add Image gallery**. 10. Click **Publish** to publish the gallery. ![gallery.jpeg](/storage/articles/9189800457359.jpg) Instructions for optimal image display -------------------------------------- ItemDescription**Supported file types**jpeg, jpg, png**Max. file upload size**20 MB**Max. dimension**If the image is larger than 5000 px to 5000 px, it automatically resizes the image down to the largest axis. Therefore we recommend the following maximum dimensions for both axes: Width = 5000 px , Height = 5000 px .**Recommended aspect ratio**The platform allows for upload of images with any ratio. However, the images in the image gallery view will be fitted to the selected ratio (4:3 or a 16:9) for the image gallery. When clicking on an image in the gallery, the full image will open in a lightbox in its original image ratio. Was this article helpful? ------------------------- Your feedback helps us prioritise what to rewrite. Yes No [ Back to Working with content ](/articles?category=1) On this page ### Still need help? Raise a request in the support portal and track it to resolution. [ Submit a support request ](https://engage.knowledge.civ.io/portal/login) Submit a support request through the [support portal](/portal) or email . © 2026 [Civio](https://civ.io) [Privacy Policy](/articles/privacy-policy) [Terms of Use](/articles/terms-of-use)