PROJECT OVERVIEW
CollagePix is the photography brand of Richard, a seasoned professional with over 30 years behind the lens. Having served as the official Miss Texas Photographer from 2006 to 2011, and having traveled nationwide covering pageants, talent shows, weddings, sports events and reunions, Richard needed a website that truly matched the quality and character of his work.
He came to TheWebLab with a clear design direction and a set of real-world constraints – primarily that the site needed to be manageable by a non-developer, use only free plugins, and reflect a cinematic, luxury photography aesthetic. The result is a fully custom WordPress theme built from scratch: no page builders, no bloat, just clean PHP, CSS, and vanilla JavaScript.
THE CLIENT
Richard has been capturing moments since 1985 and became a credentialed photographer in 1992 with a degree from the NY Institute of Photography. His portfolio spans model portfolios, wedding photography, pageants, sports, family portraits, and corporate events. He also produces Video Scrapbooks — cinematic video keepsakes for prom parties, pageant events, and reunions — making him a full-service visual storyteller.
His previous digital presence did not reflect the sophistication of his work. He needed a site that could stand alongside the calibre of his photography, while being simple enough for him to update himself without relying on a developer every time.
THE CHALLENGE
This project had a number of technical and creative constraints that shaped every decision:
- ACF Free only – repeater fields and the gallery field type are Pro features, requiring a flat-field architecture for all dynamic content
- No page builders – Richard wanted a fast, clean site without Divi or Elementor dependency
- Non-developer client – all content needed to be editable via simple WordPress admin panels
- Multi-section single homepage – hero, about, services, portfolio, testimonials, and contact all on one scrolling page
- Gallery sub-pages – each photography category needed its own dedicated page with a full photo grid and lightbox viewer
- Video Scrapbooks integration – a YouTube video card on the homepage with hover-to-preview and click-to-fullscreen behaviour
- Contact form – styled to match the dark theme, with CF7 spinner and response message working correctly
- Global site settings – contact info, social links and footer copy needed to be editable from one place without ACF Pro options page
OUR APPROACH
Design Direction
We adopted a cinematic warm-dark aesthetic — deep charcoals (#1A1410), cream off-whites (#F5F0E8), and a signature gold accent (#C9A84C). Typography was treated as a design element: Playfair Display for headings, Dancing Script for the brand tagline accent, and Lato for body copy. Every spacing, colour, and layout decision was made to evoke the feel of a high-end editorial photography portfolio, not a generic template.
Gallery cards were designed in landscape 16:10 format so that the YouTube Video Scrapbooks card would sit naturally alongside photo gallery cards without any visual inconsistency.
ACF Free Architecture
Because repeater and gallery fields are locked behind ACF Pro, we engineered a flat-field system. Gallery items are stored as gallery_1_title, gallery_1_image, gallery_1_link through to gallery_6, with gallery_6 having an additional gallery_6_youtube URL field for the Video Scrapbooks card. Testimonials were moved to a Custom Post Type — Richard simply adds a new Testimonial post with the client name as the title and the quote as the content. The slider on the homepage queries these automatically.
Native WordPress Options Page
Rather than using ACF Pro’s options page feature, we built a native WordPress options page using the Settings API. Registered under CollagePix Settings in the WP Admin sidebar, it gives Richard a clean panel with three sections: Contact Info, Social Media, and Footer. Phone, email, Facebook, Instagram, footer tagline, and credit text are all editable in one place and reflected instantly across the contact section and footer.
Gallery Sub-Pages
Each photography category (Pageants, Bridals, Sports, Events, Models) has its own page using a custom Gallery Page template. Rather than using ACF’s gallery field (Pro only), images are added via WordPress’s native Add Media → Create Gallery workflow. The template parses the “gallery” shortcode, extracts the attachment IDs, and renders them as a styled grid. Clicking any photo opens a custom-built lightbox with next/prev arrows, a close button, a photo counter, keyboard navigation, and touch swipe support.
Video Scrapbooks Card
The sixth gallery card on the homepage is a YouTube video card. When a YouTube URL is entered in the ACF field, the template extracts the video ID and renders the hqdefault thumbnail as the card poster image. On hover (desktop), a muted iframe preview auto-plays after a short delay. Clicking opens a fullscreen modal with sound and controls. The hover iframe uses pointer-events: none so clicks always pass through to the card handler, fixing a common iframe click-intercept glitch.
The Video Scrapbooks pill in the services strip also triggers the same YouTube modal, giving visitors a second natural entry point to the video.
Contact Form 7
The contact section uses Contact Form 7 with a fully custom dark theme matching the site aesthetic. All CF7 default styles were initially suppressed, but the CF7 spinner relies on its own CSS keyframe animations, so the filter was removed and only specific overrides are applied. The response output box is hidden by default using max-height: 0 and revealed via CSS class detection after submission, avoiding any conflict with CF7’s JavaScript-controlled display toggling.
Services Strip
The services strip is dynamically wired to the gallery ACF data. Each pill is rendered as an anchor tag pointing to its corresponding gallery sub-page URL (set via the ACF link field). The Video Scrapbooks pill renders as a button element with a data-yt-id attribute, triggering the YouTube modal directly. If no URL is set for a category, the pill renders as a non-linked div so there are never broken links.
TECHNOLOGY STACK
| Platform | WordPress 6.x — custom theme, no page builder |
| Templating | PHP — custom template files (template-home.php, template-gallery.php) |
| Custom Fields | Advanced Custom Fields Free — flat field architecture throughout |
| Custom Post Types | Testimonials CPT — title = author name, content = quote |
| Options Page | Native WordPress Settings API — no ACF Pro required |
| Styling | Vanilla CSS with custom properties — no framework |
| JavaScript | Vanilla JS — custom lightbox, YouTube modal, testimonials slider, scroll animations |
| Contact Form | Contact Form 7 — styled to match theme, CF7 default CSS retained for spinner |
| Lightbox | Custom built — no plugin, supports next/prev/close/keyboard/swipe |
| YouTube | Custom modal + hover iframe preview with pointer-events fix |
| Typography | Playfair Display, Dancing Script, Lato (Google Fonts) |
| Icons | Font Awesome 6 |
| Image Sizes | 5 custom registered sizes for hero, gallery, portrait, square, wide |
KEY FEATURES DELIVERED
- Sticky header with transparent-to-dark scroll transition and mobile hamburger menu
- Full-viewport hero with Ken Burns zoom effect and staggered CSS fade-in animations
- About section with overlapping dual-image layout and animated credential stat counters
- Services strip with 6 category pills — 5 link to gallery sub-pages, 1 triggers YouTube modal
- Landscape gallery grid (16:10) — 5 photo categories + 1 YouTube video card
- YouTube video card — hqdefault thumbnail, muted hover preview, fullscreen modal on click
- Gallery sub-pages — photo grid with custom lightbox (prev/next/close/counter/swipe/keyboard)
- Testimonials slider — auto-advances, touch swipe, dot navigation, reads from CPT
- Contact section — two-column layout with CF7 form styled to dark theme
- CollagePix Settings admin page — contact info, social links, footer text in one place
- Footer reads all contact and social data from the settings page globally
- Fully responsive across desktop, tablet, and mobile
- Performance optimised — emoji scripts removed, assets conditionally enqueued
RESULT
The CollagePix website is now a production-ready digital presence that matches the calibre and character of Richard’s photography. The cinematic dark aesthetic, gold accent palette, and considered typography set it apart immediately from generic photography templates.
Richard can now manage every aspect of the site independently: updating gallery photos, adding testimonials, editing his contact details, publishing his Video Scrapbooks YouTube link, and maintaining social links — all from the WordPress admin without touching code.
The codebase is lean, well-structured, and built to last. No page builders means no dependency on third-party plugin updates. No ACF Pro means no licensing cost. Every feature was built at the right level of abstraction for this specific client and this specific site.
“Capturing moments today… to have for all your tomorrows.” — CollagePix Brand Tagline
