Internal Training Library

This article walks through how to add a new photo gallery to the PCRC website. The photo gallery system uses two tools:

• Picflow stores and displays the full gallery of photos.
• Webflow controls how that gallery appears on the PCRC website.

The basic process is: create the gallery in Picflow, add it to Webflow, then publish it to the site.

Step 1: Create the gallery in Picflow

Start by logging into Picflow and creating a new gallery for the event or program you want to add.

Name the gallery clearly so it is easy to recognize later. A simple format like the event name or program name works well.

Once the gallery is created, upload all of the photos you want included. Picflow will host the full photo gallery, so you do not need to upload every individual photo directly into Webflow.

After the photos are uploaded, click Share in Picflow and look for the embed code. Copy that embed code - you will need it for the next step in Webflow.

Step 2: Add the gallery in Webflow

Next, open Webflow and go to the CMS collection titled Photo Galleries.

Click New Photo Gallery.

Fill out the gallery fields:

• Name: Add the gallery name.
• Embed code: Paste the Picflow embed code you copied in Step 1.
• Gallery date: Choose the correct date for the event or gallery.
• Collection: Choose the section where the gallery should live, such as Arts Programming, Wellness Workshops, or Community Events.

This connects the Picflow gallery to the correct area of the PCRC photo section.

Step 3: Create and upload the cover image

Each gallery also needs a cover image. This is the image people will see before they click into the full gallery.

Choose one strong photo from the gallery and crop it to a 3:4 ratio so it fits correctly in the website layout.

Before uploading it to Webflow, compress the image using Squoosh. This step is important because smaller image files help the website load faster.

In Squoosh:

1. Upload the cover image.
2. Resize it to 800px wide.
3. Export it as a WebP file.

This can dramatically reduce the file size - often by around 98% - while still keeping the image looking great on the site.

Once the optimized WebP file is ready, upload it as the cover image in the Webflow CMS item.

Then click Publish.

Once published, the new gallery will automatically appear on the front end of the PCRC website in the section you selected.