Gutenberg: Consider a different caption style for image galleries
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:_
kjellr
All 12 comments
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.)
sarahmonster
on 19 Jul 2018
@kjellr how would it look when you have just one image or two with a caption? Also, how does it handle CSS-crop?
mtias
on 19 Jul 2018
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
on 20 Jul 2018
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.
kjellr
on 23 Jul 2018
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?
karmatosed
on 24 Jul 2018
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.
michelleweber
on 24 Jul 2018
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.
StaggerLeee
on 26 Jul 2018
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.
kjellr
on 30 Jul 2018
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
on 31 Jul 2018
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
noisysocks
on 11 Oct 2018
I think it's okay to close for now. We can always reopen if we decide we want to pursue it later.
kjellr
on 11 Oct 2018
I posted about the grey background behind the gallery caption some time ago here: https://github.com/WordPress/gutenberg/issues/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.
paaljoachim
on 11 Oct 2018
Related issues
cr101
·
3Comments
aduth
·
3Comments
wpalchemist
·
3Comments
jasmussen
·
3Comments
jasmussen
·
3Comments
Most helpful comment
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.