Tiled gallery block captions

[simison]

Tiled gallery block currently doesn't have captions directly in the block interface.

It could have captions very similar to core gallery block. They have several issues and bugs we should solve before shipping captions to our customers.

This is a list of all the issues, bugs and problems around captions so that it's easier to re-design how captions should work.

Screenshots are from the time when captions were actually implemented in Tiled gallery; they were just taken out just before releasing the block because of several issues.

• Links in captions look awful (Tiled gallery block: styles for links in captions wp-calypso#29729)
  

• Longer captions cover "remove image" button in the editor (Repo Gardening: update triage tasks (wording and Slack notifications) #29706)
  
  

• Captions don't look great on small tiles. We need to rethink how we adjust caption text size when tiles scale down for small screens. Captions in a tile might look great on desktop but then the gallery looks awful on mobile.
  

• Writing captions for circle layout doesn't work.
  We had to disable captions for circle layout because, well:
  
  

• Captions are automatically pulled in from image meta. It's easy enough to just not write captions, but cleaning out automatically added captions from a lot of images, especially on smaller screens is really annoying or impossible:
  

• Users might expect captions to appear only on mouse hover, just like with old tiled gallery. That isn't too amazing with touchscreens, though.
  

• Detecting if caption is empty using RichText.isEmpty() is buggy. Calypso-Gutenberg seems to pass an old version of RichText format (array) and our block expects new format (string), thus making it seem like caption isn't empty, causing caption UI to behave weirdly and causing block invalidations on save. We need to RichText.toHTMLString( caption )

• Adding files from Media picker wipes out previously added captions (Gutenlypso: Opening Media Library Breaks Image Blocks wp-calypso#29557, p7jreA-21M-p2)

---

cc @MichaelArestad @scruffian @mapk

[simison]

Perhaps functioning MVP version of captions could be:

• No rich text, just plain text
• Edit them via sidebar (and move them back to the block area when we've designed better UI for it)
• Don't auto-import captions from image meta
• Scale down text size on small screen or container width
• Still no captions for circles or center captions horizontally

That doesn't give amazing caption-editing experience but solves majority of issues.

[gaelgerard]

Hello,

I'm looking to display tiled gallery image captions in order to display them in the lightbox after the user clicks on it.

In fact as you noticed, the placement of the caption is not easy that's why i would certainly choose not to display them at all on the gallery but only on click.

CSS is my friend but not for every wp user and that's why I understand you don't want to publish this functionnality again at the moment. (it's working on tiled galleries in classic mode but not in gtbg)

Perhaps the solution could be to add a checkbox for the user to display the caption or not in the gallery. So that the user is responsible for the bad design and can eventually edit his caption to fit in place.

Concerning the MVP above, I would prefer auto-import captions from image meta as it as always been done. I don't want to edit every image from every galleries from every websites I manage to copy/paste existing captions.

In classic mode, Tiled galleries display caption but breaks my layout. I have to replace them with gtbg bloc galleries but then no more caption on my images 😥

Can you please tell me if there will be a release soon or if i should look another way to achieve my goal?

Thank you for your help

Gaël

[molszewska]

Just got one report and I've tested that captions in Tiled Gallery Block do not appear on hover (as I'd expect them to do). They do appear only after clicking the image, in the slideshow.

This can be remedied with adding the gallery within Classic Block.

[gaelgerard]

Unfortunately, in classic mode, the tiled gallery breaks my layout.

I think it's due to the inlined width of the gallery but I didn't look further since the gtbg bloc tiled gallery fits just fine.

For now, I will use wp default galleries when I need Captions to be shown and beautifull tiled galleries when it's less important.

Thanks for your help

[scruffian]

Here's my take on how to handle these issues:

• For the links, I suggest we match the text colour of links to the rest of the text, and underline the link

• For circle tiles I suggest we centre the text on the tile both horizontally and vertically

• I think we need a couple of block settings, one which enables/disables captions and another which pulls captions from image meta (or not)

• I think there's a good case for matching the design of the old tile galleries in terms of the text size, alignment, and background. That should make it simpler to convert old galleries to new ones.

• I also like the idea of only showing the captions on hover. Perhaps on mobile we could use a "swipe left" interaction to simulate hover, which would bring the caption in?

• The captions covering the "remove image" button in the editor looks like a core issue. It would be great if someone submitted a patch for that.

The other issues sound like technical concerns not design ones.

cc @thomasguillot, i'd love your thoughts on this

[thomasguillot]

Here's what I would do:

• Like @scruffian said, match the text colour of links to the rest of the text, and underline it.
• Maybe we could offer a (plain) background and colour option and have it default to what we currently have (black gradient + white)
• Automatically truncate the caption (e.g. if height > 50% of parent.height)
• Add a caption setting
• Potentially force the setting to be disabled when using the Circle Tiles -- I think it's OK if 1 style doesn't support captions as I'm not sure about having it horizontally and vertically centred; it would obfuscate the image.
• I also like the idea of the hover on desktop. Maybe hide it on touch+small screen and always display it on touch+larger screen.

[scruffian]

Automatically truncate the caption (e.g. if height > 50% of parent.height)

Would this make the rest of the caption impossible to read?

[thomasguillot]

Automatically truncate the caption (e.g. if height > 50% of parent.height)

Would this make the rest of the caption impossible to read?

It would but the caption would still be available when a visitor clicks and opens the carousel.

[scruffian]

It would but the caption would still be available when a visitor clicks and opens the carousel.

Good point, I like this idea :)

[jenhooks]

As of today, I'm not seeing captions showing up at all. See live here: https://jenwpjm.mystagingwebsite.com/testing-jetpack-tiled-gallery-captions/

Reported in 2009353-zen. Based on Automattic/wp-calypso#30014 -- sounds like this is something that is already known?

[simison]

Nope, there are no plans to add captions to tiled gallery block any time soon.

…

On Sun, 5 May 2019, 18:41 Jen, ***@***.***> wrote: As of today, I'm not seeing captions showing up at all. See live here: https://jenwpjm.mystagingwebsite.com/testing-jetpack-tiled-gallery-captions/ Reported in 2009353-zen. Based on Automattic/wp-calypso#30014 <Automattic/wp-calypso#30014> -- sounds like this is something that is already known? Can I confidently tell the user this is something that will be fixed? — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#11794 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AAAVJAFZ2NDKJ4OQZQL2WYDPT35ZDANCNFSM4HCU4YXA> .

[RCowles]

@simison thanks for clarifying! We received a report that captions no longer appear underneath the full-size image in Carousel. I was able to repro here:
https://ryancowles.mystagingwebsite.com/2019/05/tiled-gallery-block/

Note in the above example, each image has a Title, Description, Caption, and Alt Text value. Only the Title and Description fields show in Carousel.

Is this related/expected behavior as well?

[simison]

I'm not quite sure how carousel picks those up — @jeherve would you be more familiar with Carousel?

[jeherve]

Yep, that's a known issue / byproduct of how the gallery blocks store their data:
#11594 (comment)

[RCowles]

Thank you both for the additional context! Please feel free to close this issue as you see fit.

[formosattic]

User request in #2056566-zen.

[cecoates]

User requested: #9543186-hc

[samiff]

Reported in 2166921-zen

Noting that the current documentation still mentions hover-over captions as a feature.

[simison]

Noting that the current documentation still mentions hover-over captions as a feature.

Thanks for the heads up!

p1562740031135900-slack-jpop-quill

[TrovenTrip]

Hi all, I've come across this thread while trying to add captions to my Jetpack tiled gallery blocks. Looks like there's been some good work on it so far, but nothing posted since July 2020. Just wondering if this is still being looked at? I'm happy to help with any beta testing on my site if/when a solution reaches that stage.
Thanks

[creativecoder]

Hi @TrovenTrip! I don't think anyone is actively working on this, specifically. There's related work on the image gallery block in WordPress Core. The hope is that once that approach is proven, the same approach could be copied in the Tiled Gallery block. This would bring with it all the standard image block controls (including captions).

[noteeth]

Another request for captions in Tiled gallery
3782362-zen
27450396-hc

[Robertght]

Another request in 3785382-zen

[swoodipto]

Another report in 27450396-hc
Follow up at 3782362-zen

[tmmbecker]

3788256-zen

[aleone89]

Another request for this has been made here: https://wordpress.com/forums/topic/find-pictures-captions-in-my-slider/

[kelasante]

Another request 28495746-hc

[lizkarkoski]

Another request from the forums today: https://wordpress.com/forums/topic/captions-13/
suggested they use the regular gallery block as a work around for now.

[retnonindya]

Request from a user on chat:
28274850-hc

I suggested them to use regular Gallery block. We also discussed the possibility of using third-party plugin to display captions on tiled gallery-look.

[supernovia]

A request here for some control over gallery captions:
https://wordpress.com/forums/topic/galleries-out-of-control/

They'd like them to not show over the images, but show in the carousel view.

[katiebethbrown]

User expected captions to display on Tiled gallery block. Suggested they transform to core gallery instead.

29385594-hc

[msilbers]

requested in 30174287-hc
Recommended the core Gallery block instead

[retnonindya]

Another request:
30460629-hc

I suggested them to use core Gallery block

[Robertght]

New request in 30514763-hc

[metabreakr]

4133913-zen
Recommended the core Gallery block instead

[danjjohnson]

Requested in https://wordpress.org/support/topic/image-title-in-tiled-gallerys/

[tmmbecker]

Several Newspack publishers have asked about this. They love the tiled gallery but don't love that there are no captions :/

[daria2303]

30884014-HC requested here too

[rickmgithub]

User not seeing captions on the tiled gallery - 4194585-zd
Seems to appear on desktop but not mobile.

[mikeicode]

Requested 31215860-hc

[mikeicode]

Another 31230051-hc

[kspilarski]

33575554-hc

[mxhassani]

Another one: 5372601-zd-woothemes

[filipanoscampos]

Another one:
5905506-zd-woothemes

[github-actions]

Support References

This comment is automatically generated. Please do not edit it.

• 2009353-zen
• 2056566-zen
• 2166921-zen
• 2396123-zen
• 2655712-zen
• 3425228-zen
• https://wordpress.com/forums/topic/caption-in-tiled-block-group
• https://wordpress.com/forums/topic/block-vs-classic
• 3624123-zen
• 3782362-zen
• 3785382-zen
• 3788256-zen
• https://wordpress.com/forums/topic/find-pictures-captions-in-my-slider
• https://wordpress.com/forums/topic/captions-13
• https://wordpress.com/forums/topic/galleries-out-of-control
• 4133913-zen
• 4194585-zen
• 5372601-zen
• 5905506-zen

[pehaa]

Another request in forum https://wordpress.org/support/topic/no-captions-in-tiled-gallery/

[erricgunawan]

+1 for my own personal request