Consider a different caption style for image galleries

[kjellr]

The Problem

The current implementation of gallery captions is problematic in some circumstances. For instance, when images get small, caption text is cut off and appears broken:

In this case, overflow text is scrollable, but for many users that's not clear from the appearance (#7963). It's also unwieldy to edit captions in such a small space — text and controls are hidden and appear clipped off (#6858):

Additionally, even when gallery images are larger, long captions can overlap a significant portion of the image, blocking it from view:

---

Proposed Solution

All of those issues could be avoided by adopting the caption style used for individual image captions: gray text, placed below the image. In addition to solving those issues, this may be a preferred style for some users in general.

Alternatively, we could address those issues with the current implementation and consider adding this new caption style as a second option for users — some users will not want text overlapping their images in any case.

---

Screenshots

Current:

Proposed:

---

Current:

Proposed:

---

Current:

Proposed:

[sarahmonster]

Adjusting the captions to be consistent with other captions used across the site makes sense to me. The overlaid captions are more aesthetically pleasing/modern feeling, and a bit more clearly associated with the image they caption, but problematic in cases on long captions and/or short screens, which is hard to account for in a consistent way. It's probably best to keep things super simple here, and then allow for further customisation via themes if people are looking for fancier captions.

The centre alignment of text can look a bit awkward particularly with longer captions, but this was an issue before as well (and also with the standalone image captions.)

[mtias]

@kjellr how would it look when you have just one image or two with a caption? Also, how does it handle CSS-crop?

[kjellr]

how would it look when you have just one image or two with a caption? Also, how does it handle CSS-crop?

It doesn't look too bad when only one or two images contain a caption: 

---

It does get messier when cropping is turned off, but I'm not sure that's necessarily because of the captions — this scenario looks a bit messy even without them.

---

Here's a quick prototype to get a feel for it:

https://wp.invisionapp.com/share/YZN2YRUF6J4#/309939863_01-Start

[kjellr]

Also, if we were to include this as an option instead of replacing the current implementation, here's a quick mockup of that new option in the sidebar:

If we go in this direction, we'd probably want to iterate on that copy though. 😄
Edit: Thanks @michelleweber for the copy suggestions.

The secondary text could toggle between “Captions are placed below images.” and “Captions are placed inside images.” depending on the current state.

[karmatosed]

I think the switch makes a lot of sense here. As a side note, switch wise we're going to explore not having secondary text just having calls in the primary. We'd be iterating here when that happens. What could work as text in that case?

[michelleweber]

If you only need a single line, I think "Display captions below images" is still clear. "Display captions below instead of overlaid on images" if you want more detail.

[StaggerLeee]

I like it as it is now.
Also problem with switch option is User will think it is forced on front-end too. Needs different label.

[kjellr]

Also problem with switch option is User will think it is forced on front-end too. Needs different label.

The current caption styles are carried over to the front-end by default, so I imagine this would be too.

[noisysocks]

Quick update: I started working on this on Thursday and am probably about halfway there. I've been pulled away by some other tasks, but am hoping to get back on this and submit a PR tomorrow.

[noisysocks]

My understanding is that this isn't a priority for Phase 1. Not sure whether that means we slap the Future label on it or simply close. Thoughts? @mtias @karmatosed @kjellr

[kjellr]

I think it's okay to close for now. We can always reopen if we decide we want to pursue it later.

[paaljoachim]

I posted about the grey background behind the gallery caption some time ago here: #7260

The main problem is that when something does not show up as the user has decided on then it is easy to think it is a bug. It was so for me. Having to figure out the CSS to remove the grey background behind the caption is extra work for the user. Another bump in the road so to speak. Having the option to move the caption below the image makes it cleaner as it does not cover the image, and it is also the same way seen for single images. Making it more consistent.

[glendaviesnz]

Going to reopen and add to Gallery improvements project as should be easier now it is using inner image blocks

[paaljoachim]

Last year @ellatrix made this PR for adding the caption as an inner block.
Image block: try caption as inner block
#31823
I believe it will be very helpful in multitudes of ways moving captions into Inner blocks. As one benefit could be to have its own paragraph like toolbar options.

[shelb-elliott]

Hi all, Newspack team here - we've had Carolina Public Press request this same feature in Slack, so I wanted to offer that information for consideration. There's also a similar issue open here that's worth noting.

[glendaviesnz]

Something similar is being worked on here

[t-hamano]

Recently, #56587 was also submitted suggesting improving the caption text color and background color using theme colors.

[james-tyner]

Hi! Just wanted to drop a note here expressing my support for this change to the gallery caption editing experience.

In our newsroom at @sfstandard, we find that for longer captions (which are the norm at major news publishers), the existing UX can result in captions being very difficult to read and therefore very difficult to edit, especially if you need to select some of the existing text in the caption. It's a frequent complaint of our copy editing team.

I think our team would prefer for captions to be placed outside the images by default, though I know that may not be a universal preference. My understanding is that one of the core tenets of the Gutenberg project is for the backend editing experience to closely mirror the frontend reading experience. If that's a concern here, I'd suggest that the gallery block have a writing & editing focused appearance when it's being actively edited, and then once it's no longer being edited it can transform into an appearance that more closely reflects the frontend.

[jasmussen]

@james-tyner thanks for chiming in. Would you have a chance to look at this related issue that overlaps a bit? I'd love your thoughts there, on the style bits as well.

CC: @glendaviesnz and @noisysocks since you touched on this in the past, would this and #56587 potentially be easy fixes? Anything I can help with perhaps?

[paaljoachim]

I am right now working on a Norwegian artist web site.
I just now added 6 images into a gallery.
The original site has captions that look like this: https://www.grofolkan.no/2020-2/

With a Gallery block in Gutenberg it looks like this:

Test site. https://designkurs.com/gallerier/2020-2/

Captions in Galleries really could use some work.
I believe I will have to add individual image blocks to the artist site instead of using galleries and that is just too bad, as it would be nice to use the Gallery block.

--

Btw I changed the galleries on my test site to instead of a Gallery block contain a Group block and two columns containing image blocks with captions. But with an artist web site it would save me a lot of time using the Gallery block to modify the caption and block spacing/padding between the images in the gallery. Anyhow I will see how it goes.

[glendaviesnz]

@paaljoachim in the gallery the captions are just positioned that way with css, so if you add some custom css you can make them behave like the stand-alone image ones, eg. something like this should work:

.wp-block-gallery.has-nested-images figure.wp-block-image figcaption {
    background: 0 0;
    color: #cccccc;
    position: initial;
    text-align: left;
}