skip to Main Content

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

Before you add an image to a page, ensure that the image is suitable for publishing to the web:

  • Ensure that you have the right to use the image (either you own the image, you have purchased a licence, or the image is free for use).
  • Ensure the image is not too big. Never upload images directly from a camera without first resizing.
  • An image need not be larger than 1000 pixels wide for uploading to your web site.
  • Each image should be no more than 500 KB large, and preferably closer to 100 KB.
  • Here is an easy-to-use program (Windows only) for resizing your photos.

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

TUTORIAL COMING SOON

Back To Top