The Photo Gallery feature allows you to share engagement photos, pre-wedding shoots, and eventually wedding day photos with your guests through external gallery hosting services.
Overview While this template doesn’t include a built-in gallery viewer, it integrates seamlessly with external gallery services. The navigation menu includes a direct link to your hosted photo gallery:
< li > < a href = "https://603de94bdc7d27-95255343.gallery.photo/gallery/anil---ankita/" > Photos </ a > </ li >
Why Use External Gallery Hosting?
Storage Efficiency Photo hosting services handle:
Large file storage
Image optimization
Bandwidth management
No impact on your site speed
Professional Features Gallery services provide:
Beautiful presentation
Download options
Slideshow modes
Mobile-optimized viewing
Easy Management Benefits include:
Upload photos directly
Organize into albums
Add/remove photos anytime
Privacy controls
Guest Interaction Engagement features:
Favorites/likes
Comments on photos
Guest photo uploads
Photo ordering
Recommended Gallery Services Gallery.photo This is what the template example uses:
< li > < a href = "https://603de94bdc7d27-95255343.gallery.photo/gallery/anil---ankita/" > Photos </ a > </ li >
Features:
Clean, modern interface
Password protection options
Download controls
Mobile responsive
Google Photos Best for: Free hosting with unlimited storage (at compressed quality)
Create an Album
Go to photos.google.com
Click “Create” → “Album”
Add photos to your album
Name it (e.g., “Ankita & Anil Wedding”)
Get Shareable Link
Open the album
Click the share icon
Toggle “Create shared album”
Copy the link
Add to Your Website
< li > < a href = "https://photos.app.goo.gl/YOUR_ALBUM_ID" target = "_blank" > Photos </ a > </ li >
SmugMug Best for: Professional photographers, high-quality display< li > < a href = "https://yourname.smugmug.com/Wedding" target = "_blank" > Photos </ a > </ li >
Pricing: 55 − 55- 55 − Features:
Unlimited storage (full resolution)
Custom domains
Sell prints
Password protection
Advanced privacy controls
Flickr Best for: Free tier available, photography community< li > < a href = "https://www.flickr.com/photos/username/albums/72157XXXXXXXXXX" target = "_blank" > Photos </ a > </ li >
Features:
1,000 photos free
Organized albums
Privacy settings
EXIF data display
Integration Approaches The simplest approach used in the template:
< nav id = "nav" > < ul > < li class = "special" > < a href = "#menu" class = "menuToggle" >< span > Menu </ span ></ a > < div id = "menu" > < ul > < li >< a href = "index.html" > Home </ a ></ li > < li >< a href = "pages/live_stream.html" > Live Stream </ a ></ li > < li >< a href = "pages/the_couple.html" > The Couple </ a ></ li > < li >< a href = "pages/schedule.html" > Schedule </ a ></ li > < li > < a href = "https://YOUR-GALLERY-URL" target = "_blank" > Photos </ a > </ li > </ ul > </ div > </ li > </ ul > </ nav >
Adding target="_blank" opens the gallery in a new tab, keeping your wedding website open in the background.
Dedicated Gallery Page Create a page that explains the gallery before linking:
< article id = "main" > < header > < h2 > Photo Gallery </ h2 > < p > Browse our engagement photos and pre-wedding memories </ p > </ header > < section class = "wrapper style5" > < div class = "inner" > < section > < h2 > Our Photo Collection </ h2 > < p > We've compiled our favorite engagement photos and moments leading up to the big day. After the wedding, we'll add ceremony and reception photos here too! </ p > < div class = "gallery-preview" > < div class = "row gtr-50 gtr-uniform" > < div class = "col-4" > < span class = "image fit" > < img src = "../images/preview1.jpg" alt = "" /> </ span > </ div > < div class = "col-4" > < span class = "image fit" > < img src = "../images/preview2.jpg" alt = "" /> </ span > </ div > < div class = "col-4" > < span class = "image fit" > < img src = "../images/preview3.jpg" alt = "" /> </ span > </ div > </ div > </ div > < ul class = "actions" > < li > < a href = "https://YOUR-GALLERY-URL" class = "button primary large" target = "_blank" > View Full Gallery </ a > </ li > </ ul > </ section > </ div > </ section > </ article >
Some services provide embed codes:
< section class = "wrapper style5" > < div class = "inner" > < h2 > Photo Gallery </ h2 > <!-- Google Photos embed example --> < div class = "gallery-embed" > < iframe src = "https://photos.google.com/share/YOUR_SHARE_KEY/embed" width = "100%" height = "600" frameborder = "0" > </ iframe > </ div > </ div > </ section >
Using Grid Layouts for Preview Show a preview grid on your homepage linking to the full gallery:
< section id = "two" class = "wrapper alt style2" > < section class = "spotlight" > < div class = "image" > < img src = "images/gallery_preview.jpg" alt = "" /> </ div > < div class = "content" > < h2 > Photo Gallery </ h2 > < p > Check out our engagement photos, pre-wedding celebrations, and favorite moments together. More photos will be added after the wedding! </ p > < ul class = "actions" > < li > < a href = "https://YOUR-GALLERY-URL" class = "button" target = "_blank" > View Photos </ a > </ li > </ ul > </ div > </ section > </ section >
Password Protection Most gallery services offer password protection:
Google Photos shared albums are automatically unlisted (only people with the link can view). No password option, but links are hard to guess.
Open your gallery settings
Enable “Password Protection”
Set a custom password
Share the password with guests
Display on your website: < p > < strong > Gallery Password: </ strong > weddingday2022 </ p > < a href = "https://YOUR-GALLERY-URL" target = "_blank" > View Photos </ a >
SmugMug offers multiple privacy levels:
Public : Anyone can viewUnlisted : Only people with the linkPassword : Requires password to viewPrivate : Only you can view If using password protection, make sure the password is clearly displayed on your website so guests don’t get frustrated trying to access photos.
Adding Photos in Sections You can integrate photos directly into your couple story using the grid system (see Couple Story page):
< div class = "box alt" > < div class = "row gtr-50 gtr-uniform" > < div class = "col-4" > < span class = "image fit" > < img src = "../images/friends_1.jpg" alt = "" /> </ span > </ div > < div class = "col-4" > < span class = "image fit" > < img src = "../images/friends_2.jpg" alt = "" /> </ span > </ div > < div class = "col-4" > < span class = "image fit" > < img src = "../images/friends_3.jpg" alt = "" /> </ span > </ div > </ div > </ div >
Guest Photo Uploads Some services let guests upload their own photos:
Google Photos Enable “Collaboration” on your shared album:
Open album
Share options
Toggle “Collaborate”
Guests can now add photos directly.
Wedpics Free app specifically for wedding photo sharing:
Guests download the app
Enter your event code
Upload photos during/after wedding
You get all photos in one place
Post-Wedding Updates After your wedding:
Add Professional Photos
Once you receive photos from your photographer:
Create a new album or update existing
Organize by ceremony, reception, portraits
Select the best 100-200 photos (don’t overwhelm guests)
Update Website
Add a notice to your site: < div class = "update-notice" > < p > < strong > New! </ strong > Wedding ceremony and reception photos have been added to the gallery. Thanks for celebrating with us! </ p > < a href = "https://YOUR-GALLERY-URL" target = "_blank" > View Wedding Photos </ a > </ div >
Send Notifications
Email guests with:
Gallery link
Password (if applicable)
Thank you message
Deadline for viewing (if temporary)
Best Practices Curate Your Gallery : Don’t upload every single photo. Choose 150-300 of the best shots that tell the story of your wedding day. Quality over quantity keeps guests engaged.
Organize into Albums : Create separate albums for:
Engagement photos
Pre-wedding events (bridal shower, bachelor/bachelorette)
Ceremony
Reception
Candid moments
Photo Rights : Make sure your photographer contract allows you to share photos online. Most do, but it’s worth confirming before uploading to public galleries.
