How to add an image gallery to your page

When you create a project or any other type of page on District 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.

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.

Instructions for optimal image display