Lookbook

Usage

Lookbook is a magazine-style presentation block: full-bleed slide layouts on desktop that carousel via Flickity, then stack vertically on mobile so every slide remains readable without horizontal scrolling.

Use it for brand stories, editorial spreads, portfolio chapters, or any content that benefits from print-inspired composition — overlapping photos, multi-column copy, and cover-style hero slides.

The parent block holds Inner Blocks only. Add one or more child slide blocks from the inserter. In the editor, all slides display at once for easier editing; on the front end, desktop visitors see a single slide at a time with bottom navigation dots.

Parent settings

Select the Lookbook parent block for carousel-wide options:

• Wraparound — when enabled (default), the carousel loops from the last slide back to the first. When disabled, navigation stops at the ends.
• Autoplay — off by default. When enabled, slides advance automatically.
• Autoplay Interval — seconds between transitions (0.1–10, default 3). Appears only when Autoplay is on. Use ~3 seconds or longer for readable content; leave autoplay off when slides need deliberate reading.

On desktop, Flickity runs with adaptive height, contain, and draggable disabled — visitors advance slides via the bottom navigation. On mobile, slides stack in document order with no carousel.

Child slide types

Four child blocks are available. Select an individual slide to edit its sidebar fields.

Cover Slide (acf/ds-lookbook-cover-slide)

Full-bleed photo slide with headline area top-left and body copy lower-right on desktop.

• BG Image — background photograph (full-slide cover)
• Reverse Print — light text for dark backgrounds
• Text BG — adds a background panel behind body paragraphs
• Lead — short label (h3 style)
• Headline — main title (h2)
• Subheadline — supporting line (h3, right-aligned on desktop)
• Body — rich text (Dirigible toolbar, no media upload)

Copy Slide (acf/ds-lookbook-copy-slide)

Text-forward magazine grid with up to three copy columns and an optional logo.

• BG — slide background color from the theme palette (default Gray)
• Reverse Print — light text treatment
• Alternative Layout — switches to alternate grid compositions
• Lead, Headline — short label and main title
• Copy Area A, Copy Area 2, Copy Area 3 — independent rich-text regions; desktop layout adapts based on how many areas have content (1–3)
• Logo — optional brand mark (max ~128×40px)

Cover Slide and Copy Slide share a similar editorial feel — photo hero vs. typographic spread.

Image Collage (acf/ds-lookbook-image-collage)

Overlapping photo collage with headline and body copy woven into the grid.

• Gallery — up to 5 images; desktop collage layout changes with image count (1–5)
• BG — slide background color (default Gray)
• Text BG — background panel behind body text
• Reverse Print — light text treatment
• Lead, Headline, Body — copy fields positioned within the collage grid

Image Blocks (acf/ds-lookbook-image-blocks)

Split-panel layouts pairing photos with a copy column.

• Gallery — up to 4 images; layout varies by count and Alternative Layout
• BG — slide background color (default Gray)
• Reverse Print — light text treatment
• Alternative Layout — mirrors or shifts the default photo/copy split
• Lead, Headline, Body — copy in the text panel

Image Collage and Image Blocks both use galleries but differ in composition — collage overlaps images magazine-style; image blocks use cleaner split grids.

Shared child field notes

• Reverse Print — prefer this block-level toggle over manually coloring individual headings. It applies to the slide and all nested content, making background changes easier later.
• Lead — typically a short section label, issue number, or chapter marker.
• On mobile, all slide types stack images above copy (or show a simplified grid) rather than using the desktop overlay layouts.

Block width

Lookbook supports Wide, Full, and Center alignment and defaults to Wide.

Tips

• Mix slide types for rhythm — open with a Cover Slide, follow with Copy Slide or Image Collage chapters.
• Match gallery image counts to the layouts you want; collage and image-block templates change at each count breakpoint.
• Turn Autoplay on for visual, low-copy slides; leave it off for text-heavy spreads.
• For a single repeater-driven slider with per-slide background overlays, see Storyboard Slider. For simpler inner-block slide editing, see Slideshow.