Adding an Image Gallery to a Page

Photos have the power to bring your mission to life in the minds of your visitors. There might be instances when you’d like to include several images at once to a page. This could be super helpful in blog posts recapping fundraisers and events, for example. In this article, we outline the steps to add and format image galleries on your website pages and posts.

Prepare Photos for a Gallery

Before adding photos to your site, double check that the ones you’ve selected are a reasonable size. If you’ve just taken a photo from your camera, or downloaded a large high resolution image from a stock photo site, it’s really important to size those down.

Uploading a massive image can significantly reduce the load speed of the page. The attention span of web users is incredibly short. If your page loads slowly, the chances of your site visitors clicking away from your page increase substantially. Small images should be under 100KB, and larger header images should be under 350KB.

If you don’t have a program on your computer to crop and resize images, we recommend free tools like Pixlr or Canva.

Finding Photos to Use

If you’re short on photos, give Envato Elements a browse. It’s included in your website platform subscription! Simply send the links of photos you like to your project manager. We’ll get those downloaded and over to you to use as you update your website.

Add an Image Gallery

You can add individual photos throughout a page by using the Image block wherever you need it. If you’d like to display multiple photos together in a grid view or with columns, use the Gallery block instead.

Once you are logged in to your website, open the page where you would like to add a gallery and make sure you are looking at the editing view on the backend.

  • Locate the position on the page where you’d like to add the gallery and click “Add block.”
  • Choose the Gallery block.
Gallery Block
  • Access the photos by uploading them from your computer or by choosing from existing images in your Media Library.
Add Photos to Gallery
  • Click on the images you want to add to your gallery and adjust the Attachment Details on right of the screen to add a title, caption (if you want), and alt text for each image. For accessibility, we suggest adding alt text that describes the content of the image for people who may be using a screen reader due to sight impairments.
  • Once you’ve added titles, alt text, and selected the images you’d like to appear in your gallery, click the blue “Create a new gallery” button.
Select Images
  • In the next screen, you’ll see all of your images in the order they’ll appear. You can change the order by dragging and dropping the images into the sequence you desire. You can also add captions on this page if you like.
  • After you’ve ordered and captioned your images, click the blue “Insert gallery” button. The site will automatically create a nice, clean layout for your images based on image sizes.
Change Image order
  • Finally, you can adjust the number of columns and preview how that impacts the layout of the gallery. For best results, we suggest you allow the site to auto-crop images in the gallery and set the “Link To” dropdown to “None” in the block settings sidebar on the right.
Adjust Settings
  • Preview your page to see how everything looks and publish or update when you’re ready for everyone to see the photos.
Preview Gallery

Update an Existing Gallery

Once you’ve added a gallery to the page using the Gallery block, you can easily go back and add or remove images within the gallery settings. Whether adding or removing images, you’ll begin by clicking anywhere within the block to activate the top toolbar settings.

Adjust Gallery

Add a New Image

To upload new images from your computer, click in the gray box that appears on at the bottom of your gallery.

To add existing images in your media library, click the pencil icon in the toolbar at the top of the gallery block.

Add to Gallery

Remove an Image

To remove a single image or group of images from your gallery, click on the pencil icon in the toolbar at the top of the gallery block.

Remove Image

Remove a Gallery

To remove a gallery altogether, click the three-dot icon in the toolbar at the top of the Gallery block and select “Remove Block.”

Remove Gallery

Add a Single Image to a Page

This process is similar to adding a gallery. For detailed steps, check out our article about adding an image to a page.

Add a Featured Image to a Page

A featured image is also called a header image. It’s the photo that shows at the top of your page or post. Learn more about adding a header image.

Are You Using the Gallery Page Template on Charity+?

Read this article if you’re looking for instructions on how to use the Gallery page template on our Charity+ theme.

Still Have Questions?

Reach out to us within your website’s admin dashboard. Log into your website and then fill out the Website Support form. You’ll hear back from one of Wired Impact’s team members within one business day.