How Catherine Lashbrooke Crafted a Unique Photo Portfolio with WooThemes
Business Description
Table of Contents
Navigate through the case study sections
Executive Summary
Case Study Content
Overview
When Catherine Lashbrooke saw her portfolio blend in with the crowd, she asked for a fresh site. Using WordPress and Canvas, her developer husband customized everything via a child theme. The goal: a memorable, quick-loading gallery of polaroid-style slides and shoot pages.
Choosing Canvas as a Base
Canvas offered a library of hooks and filters that allowed custom markup without touching core files. Setting up a child theme kept modifications clean, so future updates to the parent wouldn’t break the layout. All custom code stayed in one place.
Creating Hanging Polaroids
To give a floating effect, each mini-slider got its own container with absolute positioning. The CSStransform: rotate(-10deg)was applied to the wrapper so every child element rotated at once. A few tweaks handled browser prefixes and legacy filters.
Building the Masonry Layout
Instead of a static grid, the Isotope jQuery library powered a dynamic masonry layout. It reorganizes photo thumbnails smoothly as the page loads. Custom CSS adapted the default portfolio templates to fit Catherine’s unique design.
Powering Sliders with WooSlider
Four separate sliders on the homepage use a custom slide type created via the WooSlider API. Each slide displays a single image in the polaroid frame. Despite multiple sliders, load times stayed lean thanks to efficient script loading and image preloading.
Instagram Feed via WooDojo
An embedded Instagram widget from WooDojo brings in the latest social shots. A handful of CSS overrides matched the feed to the site’s typography and spacing. The result is an always-fresh gallery that draws live content from Catherine’s feed.
Optimizing Image Delivery
Rather than serving full-resolution files, two custom image sizes were declared withadd_image_size(). The WooFramework’swoo_image()helper ensured correct markup and srcsets for responsive loading.
The Result
Catherine’s site now stands out with a gallery that feels handcrafted. Visitors can scroll through gently angled polaroids, watch images snap into place, and browse shoots with a fluid masonry grid. Page speed stays high, even on mobile.
Takeaways
Custom child themes, small utility functions, and off-the-shelf plugins can combine to create a site that looks custom but remains maintainable. Good practices in image sizing and widget integration keep load times in check.
Key Takeaways
- 1Using a child theme with Canvas lets you override templates without modifying core files, keeping updates simple and secure.
- 2Custom slide types built with WooSlider API and strategic CSS positioning deliver engaging polaroid-style sliders without slowing page load.
- 3Isotope’s masonry layout powers a dynamic portfolio grid, making individual shoots accessible and organized for site visitors.
- 4WooDojo’s Instagram widget integrates social feeds in minutes, requiring just CSS tweaks to match a custom site design.
- 5Optimizing image sizes with add_image_size() and woo_image() eliminates unnecessary loading and speeds up page rendering.
- 6Splitting customizations into CSS and child-theme functions ensures site maintainability and easy updates over time.
Tools & Technologies Used
Premium Content Locked
Subscribe to access the tools and technologies used in this case study.
Subscribe NowHow to Replicate This Success
Premium Content Locked
Subscribe to access the step-by-step replication guide for this case study.
Subscribe NowAbout the Author
Founders Hut
Founders Hut is a leading online platform dedicated to sharing thousands of in-depth business case studies from successful companies around the globe. Since its launch, Founders Hut has empowered entrepreneurs, marketers, and corporate innovators with actionable insights drawn from real-world successes and failures.
Interested in Being Featured?
Share your success story with our community of entrepreneurs.
Explore More Case Studies
Discover other inspiring business success stories
How Finisterre Rode Shopify to Fuel Sustainable Growth and Fast Expansion
Finisterre, a Cornish outdoor apparel maker, used Shopify’s unified commerce tools to bridge its online and in-store cha...
Finisterre
Braun Büffel Boosts D2C Sales by 50% with Shopify Store Revamp
German heritage brand Braun Büffel migrated from Magento to Shopify in three months, empowering their team to self-manag...
Braun Büffel
How Eddie Eastman Built a 6-Figure Business Selling Ready-Made Online Stores
Eddie Eastman wasn't always a tech founder—he started as a survivalist, but pivoted to building and selling digital Shop...
Startup Streams