Editorial Photo Fade Credits

ProNew

Use this when a story runs a photo essay: full-width photos that cross-fade, with a caption switch that clears the words off the picture and a credit line that follows the photo.

Customize

Derived from this item’s props table, because it declares no controls of its own. This item has no standalone playground, so changes update the code, the share link and the AI prompt.

label

defaultCaptions

Guide and examples

When to use it

Use it for articles and reports with a handful of photos where the words and the picture compete: let readers hide captions to see the full frame.

Do not use it for photos without credits or captions (use Carousel Fade directly), or when captions carry information that must always be visible.

Installation

This item is part of tealmac UI Pro

The source for this item installs with a Pro licence key. Log in with your key to see the install command, or read the Pro setup page.

Props

Prop	Type	Default	Description
`photos`	`EssayPhoto[]`	`-`	Each photo has an id, alt text, caption, credit and an image node.
`label`	`string`	`-`	Accessible name of the carousel.
`defaultCaptions`	`boolean`	`true`	Whether captions start visible.

Accessibility

The caption is real text inside each slide, so hiding it only affects sighted layout choice: the switch uses a visually hidden class on the caption, and the text stays available to screen readers.
The credit line is outside the carousel and updated for the current photo as plain text.
The cross-fade is instant with prefers-reduced-motion.
Keyboard: Left / Right: previous or next photo
Keyboard: Space on the switch: show or hide captions

Testing

The pattern ships with a Testing Library test (editorial-photo-fade-credits.test.tsx). Embla needs layout to count snaps, and jsdom has none, so the repo's mockCarouselLayout helper gives the viewport and slides real sizes.