Lookbooks: From Concept to Interactive Fashion Portfolio
A new platform for fashion photography
PB.NL has launched an entirely new feature: Lookbooks. A digital environment where fashion shoots, editorials, and collections come to life in an interactive, visually rich experience.
What's included?
Landing Page
The lookbook begins with a hero section that immediately sets the mood. Two large vertical images (4:5 format) flank the title, with technical specifications in sleek frames. A "View All Images" button invites further exploration.
Archive Grid
The heart of each lookbook: a dynamic image grid where small and large images alternate. Large images occupy four cells, while smaller images fill the spaces — a visual play between contrast and harmony.
Two-Stage Lightbox
Click on an image and it opens in an overlay. Move your mouse to pan across the image — a subtle yet powerful way to explore details without zooming. Click again for fullscreen.
Video Support
Not just photos: videos in 4:5 format integrate seamlessly into the grid. Autoplay on hover, muted, with the same styling as the photos.
Lazy Loading
Performance is key. Images load only when they come into view, with skeleton placeholders visually compensating for load time.
CMS: Full Control
Drag & Drop Management
Upload, drag, rearrange images. The five-zone system allows precision: drag to an edge to insert, to the centre to replace.
Arrangement Mode
Switch between "dense packing" (beautiful masonry layout) and "row mode" (predictable order for editing). Two modes for two purposes.
Size Switching
Small to large, large to small — with a single click. The grid adjusts automatically.
Page Structure
Organise images across multiple pages. Page 1 always shows the archive, additional pages for thematic arrangements.
Homepage Integration
Two new navigation blocks on the left side of the homepage (06.E and 07.F) offer direct access to the lookbooks. Fully manageable via the CMS, just like the four blocks on the right side.
Technical Foundation
React + TypeScript frontend
PostgreSQL database for all content
Object Storage for image storage
IntersectionObserver for lazy loading
CSS Grid with dense packing
Drizzle ORM for type-safe queries
