Creating an image carousel | Civio Engage Knowledge Base       [ ![Civio Knowledge Base](/civio-light.svg) ](https://nginx.deploy-lagoon-production.engage-vic-docs.dh1.amazee.io)  [Articles](/articles)

   [Home](/)   [Knowledge base](/articles)   [✏️ Content tools](/articles?category=5)

Creating an image carousel
==========================

Updated 1 year ago

    Search  Go

   Example of an image carousel:

![image (61).png](/storage/articles/9493461249807.png)

Instructions for optimal image display
--------------------------------------

**Supported file types**jpeg, jpg, png**Max. file upload size**20 MB

**Max. dimensions**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 carousel view will be fitted to the selected ratio for the image carousel: 16:9, 4:3, 1:1, 21:9, 3:1, 16:9 (portrait), 3:1 (portrait), 4:3 (portrait). When clicking on full screen button, the full image will open in a lightbox in its original image ratio.
For optimal display we recommend all images to have the same ratio and this ratio being either 4:3 or 16:9.

Creating an image carousel
--------------------------

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 a ratio from the drop down. The available ratios are: 16:9, 4:3, 1:1, 21:9, 3:1, 16:9 (portrait), 3:1 (portrait), 4:3 (portrait). This ratio determines how the images are displayed in the actual image carousel.
7. Add the images to your carousel through clicking **Add images**.
8. For each image that you add, you will be presented with the following fields:

    1. Image
    2. Alt text: 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 (optional): The descriptive text displayed under the image (max. 200 characters). Basic html tags including <a>, <strong>, and <em> can be used to format the caption.
9. Once you have added the images to your carousel, click **Add block**.
10. Click **Publish** to publish the carousel.

![image (60).png](/storage/articles/9493461251087.png)

![image (58).png](/storage/articles/9493461251343.png)

 [    Back to articles ](/articles)

  Table of contents
-----------------

    © 2026 [Civio](https://civ.io)