How Catherine Lashbrooke Crafted a Unique Photo Portfolio with WooThemes

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.