Skip to content
Need help? Check out our Support Page

Photos and Videos

Photos and Videos

Adding a photo grid

It is easy to display your photos in a grid on your Photos and Videos page. When a user clicks on one of the photos, a slideshow opens with arrows to view all the photos one by one.

Don’t see your Photos and Videos page in your menu?
If you don’t currently have photos or videos on your site, then your Photos and Videos page is set to Draft mode and is not in your menu system yet. After you’ve added your photos/videos with the instructions below and published the page, see the Menus and Navigation tutorial for instructions on adding the page to your menu system.

Before you add your photos

1) Do you have the right to use the image?

Make sure that:

  • you own the image, or
  • you have purchased a licence, or
  • the image is free for use

2) Have you optimized the image for the web?

If your image files are too large, they will slow down your site and take up too much server space. Never upload images directly from a camera without first resizing.

General rules for images:

  • No wider than 1000 pixels
  • File size under 300KB

Tools for reducing file sizes:

  • Photo editor on your phone
  • Windows computer: Photos app (3 dots > Resize image > Width: 1000 pixels, Quality: 80%)
  • Mac computer: Preview app (Tools > Adjust Size > Width: 1000 pixels)

Steps for adding a set of photos

  1. Once you’ve logged into your site, click on Pages in the menu on the left of the dashboard. You will see a list of all the pages on your site. Find Photos and Videos and click on it to edit the page.
  2. If you don’t have any photos on the page yet: We have set up an Image Grid element for you. All you have to do is add your photos. (Go to the next step below.)
    If you already have photos/videos on the page and want to add more: Make a copy of the Image Grid by clicking the Clone icon Two squares overlapping each other in the upper right corner of the gray box. If you want your new photos to be above the previous ones, you will edit the top copy of the Image Grid. If you want them below, edit the bottom copy of the Image Grid.
  3. Hover over the Image Grid box and click the pencil icon to edit.
    The Image Grid edit icon is the pencil icon in the green box.
    Click for larger image
  4. Give a name to the set of photos that you are uploading (for example, Project Red Ribbon 2021): Click the General tab and enter the name in the Header field. Leave all the other settings as-is.
  5. Go to the Gallery tab to upload your photos. Click the box with the plus in it (under the word Images).
  6. Click the ‘Upload files’ tab and click Select Files. Find and select the images on your computer and click Open to upload. (You can upload more than one image at a time by selecting multiple images before clicking Open.)
  7. Once the files are uploaded, you’ll see them with a blue check in the Media Library grid. (Optional) You can add a caption to your photo if you want. Enter your caption in the Caption field on the right side of the Media Library tab. If you don’t want a caption, leave the field blank.
  8. Click the Add Images button at the bottom right.
  9. You will now see your photo or photos in the Image Grid Settings: Gallery tab. If you want to add more to this set, repeat Steps 5 to 9 above. To change the order of your photos, drag and drop them.
  10. Click the blue Save Changes button.
  11. On the right side of the editor page, click Update or Publish.
  12. To see how the published page looks, click View Page in the black bar at the top of the screen.
  13. If you are publishing this page for the first time, make sure to add a link to it in your menu. See the Menus and Navigation tutorial for instructions.
  14. If you want to add another set of photos (for example, from another event), click the Clone icon Two squares overlapping each other in the upper right corner of the existing gray box. Edit the new Image Grid and delete the old photos. Then upload new ones according to the steps above. Remember to change the name of the photo set in the General tab.

Adding a video

To add a video to your page, the video file must first be uploaded to a video hosting service like YouTube or Vimeo. Because of their size, video files cannot be uploaded directly to your website.

Steps for embedding a video on your Photos and Videos page

  1. Once you’ve logged into your site, click on Pages in the menu on the left of the dashboard. You will see a list of all the pages on your site. Find Photos and Videos and click on it to edit the page.
  2. Click the large plus icon in the Page Builder area.
  3. Choose the blue Video element.
    The video element has a play icon and says Video: Embeded or self hosted video
  4. In the Video Settings dialog, select the video type (YouTube or Vimeo).
  5. Copy the web address (URL) of the video on YouTube/Vimeo and paste it in the Video URL field.
  6. Click Save Changes.
  7. On the right side of the editor page, click Update or Publish.
  8. To see how the published page looks, click View Page in the black bar at the top of the screen.
  9. If you are publishing this page for the first time, make sure to add a link to it in your menu. See the Menus and Navigation tutorial for instructions.
Back To Top