Skip to content

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

Open

Description

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:

overlay captions

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):
multi line overlay caption

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:

Overlay, dark

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:

Overlay, light

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.

External, dark

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:

External, light

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Assignees

No one assigned

    Labels

    [Block] GalleryAffects the Gallery Block - used to display groups of images[Type] EnhancementA suggestion for improvement.

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions