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 (https://github.com/Automattic/wp-calypso/issues/29729)

• Longer captions cover "remove image" button in the editor (#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 (https://github.com/Automattic/wp-calypso/issues/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 https://github.com/Automattic/wp-calypso/pull/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, [email protected] 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 https://github.com/Automattic/wp-calypso/pull/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 https://github.com/Automattic/jetpack/issues/11794#issuecomment-489437700, 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: https://github.com/Automattic/jetpack/issues/11594#issuecomment-474273664

[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

[dromero20]

Reported today in 13928682-hc

[KokkieH]

Another request for captions in the tiled gallery block in https://wordpress.org/support/topic/jetpack-image-gallery-carousel-updated/

[mriyazuddin]

Another user looking for captions in the Tiled Gallery Block: 2396123-zen

[galakhyati]

Another user looking for captions in Tiled Gallery block: #15807426-hc

[galakhyati]

@zyousafi and I replicated the issue on simple as well as on AT sites: Test sites:

Premium: https://khyatipremium.wordpress.com/tiled-gallery-block/ Free: https://khyatifree.wordpress.com/tiled-gallery-page/ AT: https://mywptest.blog/tiled-gallery/

[KokkieH]

A request for hover-over captions in https://en.forums.wordpress.com/topic/mouse-hover-mosaic-image-gallery/

[supernovia]

Another user having trouble here. https://en.forums.wordpress.com/topic/adding-captions-to-pictures-in-gallery/#post-3397985

What if we gave folks options for caption positioning? Like Desktop: hover/hide/top/bottom/underneath Mobile: hide/top/bottom/underneath

[darnelldibbles-zz]

Just noting another request: https://wordpress.org/support/topic/jetpack-blocks/#post-12198301

[ericamQA]

Unable to see image captions in a tiled gallery block (with tiled mosaic style applied). 2655712-zd

[ericamQA]

Unable to see image captions in a tiled gallery block zd-2662402

[mnelson4]

Also encountered this today.