Add Event Pictures from Google Drive

Goal: add event photos from the shared Google Drive structure into the correct event folder and then connect them to the website carousel.

Google Drive folder structure

NCFP Google Drive └── Websites └── NCFP ├── Projects └── Events └── 2026 ├── Beach Pinic ├── Kalaivila │ └── photos

Tasks

• Open the Google Drive folder: NCFP Google Drive > Websites > NCFP > Events.
• Find the correct year folder, such as 2026.
• Open the matching event folder, such as Beach Pinic or Kalaivila.
• Check whether there is a photos folder inside the event folder.
• If the photos folder does not exist, create one.
• Review all images in the event’s folder and decide which photos should be used on the website.
• Download the selected images to your computer.
• Rename files if needed so they are clear and consistent, for example: beach-picnic-01.jpg or kalaivila-01.jpg.
• Keep file names simple, lowercase, and hyphenated when possible.
• Open the project image folder for the matching event in sites/ncfp/public/images/events/.
• Create the matching event folder if it does not already exist.
• Upload or copy the approved photos into that event folder.
• Confirm the files are in the correct local project location and the folder name matches the event name.
• Open the matching event file in sites/ncfp/src/content/events/.
• Find the event image list or carousel entries.
• Add the new image paths in the correct format, such as /images/events/<event-folder>/<file-name>.jpg.
• Save the event content file.
• Check for formatting or syntax issues in the markdown/frontmatter.
• Run the local preview and verify the photos appear in the event carousel.
• Confirm the images load properly and look correct in the browser.
• Remove duplicates, blurry images, or poor-quality photos before publishing.
• Final review: confirm the event page looks polished and the photo order is correct.

Example folder mapping

• Google Drive: NCFP Google Drive > Websites > NCFP > Events > 2026 > Beach Pinic > photos
• Local website folder: sites/ncfp/public/images/events/beach-picnic/
• Event content path: sites/ncfp/src/content/events/beach-picnic-26.md
• Image URL example: /images/events/beach-picnic/beach-picnic-01.jpg

Quick reminder

• Use the Google Drive event folder name and the local project event folder name consistently.
• The website reads images from the public folder, not directly from Google Drive.
• Always match the event folder in Google Drive to the event file in src/content/events/.

Notes

• If a folder already exists, add new photo files there instead of creating duplicates.
• Use the photos folder inside each event folder if it is already organized that way.
• If the event is not yet in the site, create the correct folder structure first and then add the image paths to the matching content file.

Task 2:

if there is a picture which starts with the name “cover”, use it as the event cover image. if not, use the first image as the cover image.

Task 3:

fix the photo transition where parts of two images are shown in one part of the carousel. Keep only one full slide visible at a time during the transition and ensure the track doesn’t show a partial second image.