Gallery captions: Enhance with theme colors, possibly captions outside option

[jasmussen]

As extracted from #56252, at the moment gallery captions have a hard-coded visual style that is a little clunky and occasionally hard to read:

These captions achieve some contrast through a heavy scrim gradient, hard-coded to be black, and text on top hard-coded to be white. This contrast is reduced as captions grow longer (and in fact they can grow so long as to scroll):

When that happens, the scrim gradient is stretched, and especially the topmost lines of text lose potential contrast with the as a result. We can do a bit better here.

Overlay captions

The existing default needs to be maintained, but improved. Overlay captions are useful because they maintain the silhouette of the gallery images.

We could potentially improve these overlay captions by embracing theme colors. Every theme will define a background color, and a text color. We could use those same colors to apply to the scrim itself, the caption text, and even the inline scrollbar, to ensure there's always as much contrast as the theme itself is designed to have.

Shown here, a dark background theme with light text, and similarly a dark scrim with white text:

To further ensure contrast for very long overlay captions, the scrim is no longer a gradient, it's just a solid transparent color. By leveraging the same colors as the site itself, the caption blends right in.

The same DNA would be shared for a light theme, shown there with a beige background, black text, and simlar colors applied to scrim and caption text plus scrollbar:

External captions

Looking further ahead we might consider adding a new option for galleries, to have external captions. External captions are useful for some galleries, or some captions. Shown here, in the same dark colors, but with captions below each image in a gallery.

Even for external captions, they can grow long. To avoid substantial visual "rivers" in the content, we could perhaps apply a max-height to each caption, such as 4x lineheight, and then apply text-color scrollbars here as well. Editorially you could still achieve a uniform look by striving, for example, to have captions on all images.

Same, shown here in light mode:

[t-hamano]

Thank you for the great suggestion!

The focus of this approach is that the figcaption element itself needs to know the background color and text color applied throughout the theme.

To solve this problem, I'm thinking of an approach where I inject the background color and text color into the figcaption element with inline styles via the render_callback() function.

This is the same approach where the background color is injected into the lightbox scrim using inline styles.

I would like to find some time and work on this problem.

[jasmussen]

Thank you for the added context.

Note that I would think this issue to be a cool enhancement, but it can happen at any time with no rush. If you're available to experiment on it, I'd be super happy to review any PRs, and be very grateful 🙏 — but it's an issue that could be picked up by anyone.

[james-tyner]

Hi @jasmussen — responding to your invitation from #8030 (comment) to leave feedback here.

I think that, with regard to the editing experience, either of these options would be an improvement over the existing gradient appearance. As I noted on #8030, our preference at @sfstandard would be for captions to be placed outside the image instead of on top of it.

We use WordPress in a headless setup with a separate frontend, so I don't have a position on the value of using theme colors and can't say confidently which layout might be better long-term for the frontend on conventional WordPress sites.

However, I'll say that across the news industry (which I know is only a small subset of WordPress users), photo editors and photographers have a strong preference for not obscuring the subjects of their photos, and any option that places the caption on top of the photo will have a much higher risk of obscuring its subject. On mobile devices, where the image will usually appear smaller relative to the text than it would on a larger screen, this effect will be more severe.

From an accessibility perspective, achieving the necessary text contrast levels to ensure the caption is always readable may be more of a challenge when placed on the photo, and we have no way of anticipating what colors may appear behind the text. Adding a dark backdrop layer to make text easier to read will make it harder to discern what's going on in the photo beneath the caption, particularly for longer captions.

To the extent that WordPress can nudge site creators to place captions alongside images rather than on top of them, I think that will result in benefits for the editing experience, for photographers and illustrators, and for site viewers.

[jasmussen]

Appreciate your inputs, thank you! Let's see if we can't unblock 8030.