Using the Gallery Page Template on Charity+

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.

Use the Charity+ Gallery Template Page

Our Charity+ theme has a specific Gallery template page which allows you to create a dynamic gallery. Site visitors can click to expand the images within the gallery as well as filter by photo category. Here’s an example of this template page in action:

Set up a Charity+ Gallery Template Page

  • Create a new page and add a title.
  • Make sure the “Document” tab is selected in the top right-hand sidebar so you see the appropriate settings.
  • Make sure the “Page Attributes” section is expanded.
  • Select “Gallery” from the Template dropdown. You’ll see some additional form fields populate under the main content section of the page.
  • Each numbered row represents one image. To add your first image, click the light gray “Add Image” button in the first column of the first row that pops up under “Images”.
  • Select the image you’d like to add from your media library or upload a new image.
  • Be sure to add a title and alt text to each image. The alt text should describe the content of the image you’ve selected. This is to help people using screen readers understand what’s on the page, even if they can’t physically see it.
  • Continue adding as many images as you’d like to your gallery by clicking the blue “Add Image” button in the lower right-hand corner of your screen, below the images.
  • If you’d like site visitors to sort through your images by category, click the checkmark of the category the image belongs to in the “Gallery Categories” column on the right. Learn how to update categories ›
  • Once you’ve added in all of your images, you can reorder them by clicking in the gray section to the left of a specific image, and dragging it to its new location.
  • Preview the page to see how everything is coming together.
  • Once you’re happy with how the gallery looks, click the blue Publish or Update button in the top right of your screen.

Adjusting Charity+ Gallery Categories

If you want visitors to be able to filter your photos, like to see specific events, programs or locations, you can select categories for each image. You have the ability to create customized categories that best fit your needs.

To add or remove categories, click the blue link in the “Gallery Categories” description that says “Gallery Categories admin screen.”

  • To add a category, enter the new category name in the “Name” field, The slug will automatically pop up. No need to update that.
  • Click the blue “Add New Gallery Category” button to save it.

If you’re already working on your gallery in another window, you might not see the new category right away. Save the draft or update the page, then refresh the page to see and select the new category.

Any categories you do not select will not show up on the front end, so you don’t have to worry about blank categories looking awkward.

To delete a category, simply hover over the category you’d like to remove on the right side of the page. Then click the red “Delete” link that appears underneath it. Your category will be immediately deleted.

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.