Add an Image Gallery to Your Page - Step-by-Step Guide
📄 Working with content

How To Add An Image Gallery To Your Page

Amjadkhan Pathan

•

When you create a project or any other type of page on District Engage, you can add an 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
  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 at 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, select Thumbnail gallery.
  6. In the Display ratio field, select either 16:9 or 4:3. This ratio determines how the images are displayed in the gallery.
  7. Click Add images and upload your files.
  8. For each image you add, complete the following fields:
    1. Image (required)
    2. Alt text (required): Describes the appearance or function of the image. This is read by screen readers, displays if the image fails to load, and is indexed by search engines.
    3. Caption: Optional text displayed under the image (max. 200 characters).
  9. Click Add Image gallery.
  10. Click Publish to make the gallery live.
Example thumbnail gallery

Watch: How to create a slideshow 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 at 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, select Carousel slideshow.
  6. In the Display ratio field, select either 16:9 or 4:3. This ratio determines how the images are displayed in the gallery.
  7. Click Add images and upload your files.
  8. For each image you add, complete the following fields:
    1. Image (required)
    2. Alt text (required)
    3. Caption (optional, max. 200 characters)
  9. Click Add Image gallery.
  10. Click Publish to make the gallery live.
Example carousel gallery

Instructions for optimal image display

Item Description
Supported file types jpeg, jpg, png
Max. file upload size 20 MB
Max. dimensions Images larger than 5000px × 5000px are automatically resized.
Recommended maximum: 5000px width, 5000px height.
Recommended aspect ratio Any ratio can be uploaded. In the gallery, images are fitted to the selected ratio (4:3 or 16:9). Clicking an image opens it in a lightbox with its original ratio.