Photo Block Slider
Usage
Photo Block Slider pairs a fixed copy panel with an auto-advancing photo gallery. Add multiple images to Gallery and they cycle on one side while your headline, body, and link stay put on the other — ideal for telling one story across several photos rather than unique copy per slide.
The layout is a 50/50 split: photo carousel on one half, text on the other. Use Swap Blocks to flip which side holds the gallery vs. the copy panel on desktop.
Content fields
All text applies to the shared copy panel (not per image):
- Headline — main title (
h2, default placeholder provided) - Subheadline — optional supporting line (
h4) - Body — rich text with the Dirigible toolbar (no media upload)
- Link — optional ACF link with Link Style (Understated default, Button, Alternate, or Hollow)
Typography (conditional)
- Headline Style — Customizer preset (
h1–h6, defaulth2). Shown when Headline has content. Visual only — tag staysh2. - Subheadline Style — preset for subheadline (default
h4). Shown when Subheadline has content. Visual only — tag staysh4. - Link Style — shown when Link is set.
Layout and appearance
- Text Placement — nine-position grid for copy within the text panel (default center). Also sets text alignment — e.g. lower-right uses right-aligned text.
- Reverse Print — light text on dark panel backgrounds.
- Swap Blocks — swaps photo and text column order on desktop.
- Background — copy panel color from the theme palette, including Dark (default Gray).
Gallery and timing
- Gallery — images that rotate in the photo carousel. Each gallery image becomes one slide in the Flickity gallery. Minimum one image required for front-end output; the editor shows a placeholder when empty.
- Slide Interval — milliseconds between photo transitions (1000–5000, default 2000). The gallery always autoplays — there is no autoplay toggle. Adjust interval to control pacing.
The photo carousel uses Flickity with wrap around, adaptive height, and no prev/next buttons or page dots. Photos render at large size with object-cover fill.
Block width
Photo Block Slider supports Wide and Full alignment and defaults to Full width.
Tips
- Write copy that works for every image in the gallery — the text panel does not change as photos advance.
- Use Swap Blocks to put photos on the left or right to match your page flow.
- Set Slide Interval around 2000ms as a starting point; faster feels frantic, slower may lose attention.
- For unique copy on each slide, use Storyboard Slider instead. For freeform blocks per slide, use Slideshow.
Screenshots
Front-end
-
Desktop layout with Swap Blocks reversing photo and text column order.
Editor
-
Text Placement grid positions copy within the text panel. -
Background color picker for the copy panel. -
Swap Blocks toggles which side holds the gallery vs. text on desktop.
Settings
Photo Block Slider
Shared headline for the copy panel, rendered as h2. Same text displays regardless of which photo is showing.
Optional supporting line below the headline in the shared copy panel.
Shared rich-text body for the copy panel. Applies to all gallery images — not per slide.
Optional link below the body in the shared copy panel.
Customizer typography preset for the headline (h1–h6, default h2). Visual only — tag stays h2.
Customizer preset for the subheadline (default h4). Visual only — tag stays h4.
Understated, Button, Alternate, or Hollow style for the link. Shown when Link is set.
Nine-position grid for copy within the text panel (default center). Sets both position and text alignment.
Light text treatment on the copy panel for dark background colors.
Swaps photo gallery and copy panel column order on desktop.
Background color for the copy panel, from the theme palette including Dark (default Gray).
Milliseconds between photo transitions (1000–5000, default 2000). Gallery autoplay is always on.
Images that auto-cycle in the photo carousel. Each image is one Flickity slide; copy stays fixed alongside.