Jetpack: 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, [e-mail] 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]

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

[wpericam]

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

[wpericam]

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

[mnelson4]

Also encountered this today.

[damiannep]

Report of captions missing in tiled gallery block in 18210248-hc

[mnelson4]

As a user of this, these are the solutions I'd suggest:

• Use a light background instead of a dark one for captions (I thought that's what the old Tiled gallery did anyway). Then you can leave the hyperlink colors etc the same as usual.
• Limit caption size to 80% of the image size or something; if the caption is too long to fit, allow scrolling (I know nobody loves scrolling, but it's more usable than cutting off the text entirely)
• For circle layouts, just use the same light background color and otherwise treat the same. Don't let this hold up a popular feature.
• Continue pulling captions from image meta. For me that's a feature not a bug. Re-typing image captions (for those who want them) is far more annoying for than deleting them (for those who don't want them).

[kriskarkoski]

Another report of missing captions on Tiled Gallery in 8677284-hc. We should remove the mention from our public-facing docs if it's not working currently. I spent quite a bit of time testing expecting it to work before finding this issue.

[olesyabrk]

The guidelines for this project were based on the user feedback, comments on this issue, and UX best practices:

• Add option to remove caption from mobile
• Add caption to the bottom of Circle images
• Darken default opacity for the bottom of images
• Option to add caption under the image
• Captions are not hover over
• No links in captions

Visual workflow
1 step:

• Removed Default Style, we don’t need to duplicate that info.
• Added toggle to remove captions on mobile

2 step:

• Darkened bottom of the image for better visibility.
• Removed the ability to have links due to limited use and poor visibility.
• Added text alignment.

3 step:

3 step (alt, captions under the image):

3 step (alt, round images):

• for round images, the only way to display captions is under the image

3 step (alt, multiple quotes):

Mobile:

[rickybanister]

Removed Default Style, we don’t need to duplicate that info.

I think the "default style" dropdown is a global setting allowing customers to always use the same variation (like always default to rounded images).

[olesyabrk]

I think the "default style" dropdown is a global setting allowing customers to always use the same variation (like always default to rounded images).

Thanks for pointing that out, @rickybanister . In that case perhaps we can keep the dropdown and remove the duplicate visual styles since the user can adjust and preview these options via the block bar instead. @creativecoder is there a global settings pattern that blocks use, any idea why we're offering our users three places to adjust their styles in the same block?

[susanjanec]

Just noting a request in 21619595-hc

[creativecoder]

@olesyabrk Thanks for these designs! @pento @aaronrobertshaw @glendaviesnz and I took a look at these last week, and everything seems in order. It looks like you've followed very similar conventions to the Core gallery block for this, which is great. I think this is a good opportunity for us to take a look at what kind of shared functionality/code is possible for the caption functionality in a way that could be shared across multiple blocks (and what's available in Core that could be reused).

@creativecoder is there a global settings pattern that blocks use, any idea why we're offering our users three places to adjust their styles in the same block?

I think you're referring to

• The styles picker in the sidebar
• The "Default style" dropdown
• The style picker in the block toolbar that hovers above the block

These are all implemented by Core when styles are registered for a block. The Default style should cause additional blocks of the same type to use that style by default when they are inserted.

[olesyabrk]

@creativecoder unifying as much is possible would be fantastic. Adding my P2 about the ideal / MVP experience in pb5gDS-zx-p2

[rickybanister]

I wanted to ask about this recommendation:

Removed the ability to have links due to limited use and poor visibility.

I understand that there may be accessibility/visibility issues, but I can imagine a number of use cases for having links within captions for semantic purposes (like giving a photographer credit).

Since we already allow that, it feels worth looking for opportunities to improve it vs removing it.

[olesyabrk]

@rickybanister my suggestion was to roll out without the links and then iterate based on user feedback. I looked at a number of user sites, and haven't seen links in captions at all. Mostly it's just folks documenting their adventures. They're the photographers. So I'm basing this on the assumption that the majority of users don't have links in their captions.

I can spin up a few iterations with links though since you think it's worth exploring further.

[damiannep]

Since individual images in a gallery can't have custom links, HEs recommend that users add links to captions as a workaround. Removing the option to add links to captions will remove this workaround to an existing product gap/technical limitation.

Scrap that. This old method was replaced by Coblocks galleries, which do allow linking individual images as @msilbers pointed out below. Sorry for the confusion.

[msilbers]

@damiannep I think many HEs just suggest using a CoBlocks gallery which does allow linking out from each image. As far as I can tell, it's a pretty rare way to do that, and I've almost never seen a link in a caption (it's not that easy to click that way and doesn't seem especially accessible).

[olesyabrk]

thanks for chiming it @msilbers! It makes sense. I still think we should go ahead and release without the links, but if we do to include links, I'd go with the high contrast, no color like this. The text bar would include a link option.

Thoughts, @rickybanister ?

[LambertusM]

Hi olesyabrk. I cant see the display caption option in the tiled gallery options. Did I miss something? Is this an upgrade you are working on?

[jeherve]

@LambertusM Those changes have not been implemented yet. We'll update this issue, and close it, once the changes are added to the Jetpack plugin.

[rickybanister]

That works for me @olesyabrk!

[LambertusM]

@jeherve Thx. So, will need a bit more patience.

[pento]

I've just been reviewing this issue, I think it can potentially be achieved through deprecating jetpack/tiled-gallery in favour of block style variations registered against core/gallery.

There are four styles to be concerned about:

• _Circles_ and _Squares_: Both are quite similar to core/gallery, except that the width and height is the same. This could potentially be done with just CSS, though there'd probably be some hackery involved in calculating the height based on the width.
• _Columns_: This can be done entirely with CSS: set the column-count on .blocks-gallery-grid appropriately, remove flex from it, and change the width on .blocks-gallery-item to 100%.
• _Mosaic_: This is a trickier one, but I think it could be done using grid layout instead of flex. Playing around with it a little bit, something like this is showing promise:

.blocks-gallery-grid {
    display: grid;
    /* Make the grid 6 columns wide, each column equal width. */
    grid-template-columns: repeat(6, 1fr);
    grid-gap: 16px;
    /* Allow the layout engine to fill in gaps at the end. */
    grid-auto-flow: dense;
}

/* By default, images cover two columns, one row. */
.blocks-gallery-item {
    width: 100%;
    height: 100%;
    grid-column: span 2;
}

.blocks-gallery-item figure {
    display: block;
}

.blocks-gallery-item img {
    /* Images should expand to fit the whole block. */
    width: 100%
    height: 100%;
    /* Trim the edges of the image, if needed to fit. */
    object-fit: cover;
}

/* Every fourth image should be twice as big as normal. */
.blocks-gallery-item:nth-of-type(4n) {
    grid-column: span 4;
    grid-row: span 2;
}

/* Every eight image should be twice as big, and right aligned. */
.blocks-gallery-item:nth-of-type(8n) {
    grid-column: 3 / span 4;
}

Tweaking or adding nth-of-type rules allows for more variety in the layout. I'd advise not adding too many rules that give big images, as there'll be not enough small images left over to fill the gaps at the end.

[glendaviesnz]

Had a look at some other options to reduce the code duplication between core and jetpack for this, like abstracting out some of the core gallery block into @wordpress/components so it could be shared by the jetpack blocks, but @pento's idea seems much more promising so will try and get a PoC of that approach together.

[glendaviesnz]

Have added a very basic PoC at https://github.com/Automattic/jetpack/pull/16476 of adding a style to the core gallery ... it seems to work pretty effectively so worth pursuing this option further as this will give us all the caption functionality from core rather than having to duplicate it.

[pento]

WordPress/gutenberg#23929 is a similarly experimental PoC, but approaching from a slightly different direction: looking at generating mosaic rules based on the number of columns in the grid. Between that, and #16476, I think these are good indications that we're onto something.

[glendaviesnz]

but approaching from a slightly different direction: looking at generating mosaic rules based on the number of columns in the grid. Between that

Ah, nice, that was my job for today to look at how we modify this to copy with multiple columns, I am going to close my PR in favour of your one for now.

[pento]

After a couple of days of experimenting with this approach, I have a few concerns, that I suspect will be difficult to address:

• Without having full control over the packing algorithm used to lay out the images within the gallery (as Jetpack galleries do), it's very difficult to make things line up exactly. I'm going to dig into the math a bit and see what I can come up with, but there's a high risk of this turning into a much more complex approach than I initially thought.
• Transitioning from the current Jetpack gallery to the new one will definitely require the end user to choose to upgrade: there are benefits to make the upgrade worth it, but due to different packing being used, the new gallery will inevitably look different to the current gallery, so we can't upgrade without the user deciding to make the change.
• As with anything, doing this in the Gutenberg plugin means we're 6+ months away from all Jetpack users being able to transition to the new gallery style.

While discussing the problem with @jasmussen, he noted that Core galleries will be changing their structure in the near future (WordPress/gutenberg#11436): they'll become container blocks, with standard image blocks used as the images. This approach is a potential option for Jetpack, too: use the standard image block in Jetpack galleries, which gives us the extra features we're after (in this case, captioning), while also reducing the complexity of Jetpack's code, and future maintenance burden.

I think it's worth doing an experimental attempt of this approach, as the potential benefits are a legit upside. If it turns out that this approach also has unforeseen drawbacks, then I think we'll have reached the point where we should fall back to implementing caption support within the current Jetpack gallery codebase, and leave bringing Jetpack and Core closer together for a future iteration.

[jasmussen]

I'm back from a little much appreciated AFK time, let me know if there's anything I can do to help here!

[otpidusprime]

User reported this feature to be missing in 3425228-zen

[fstath]

A forum user reported it:
https://wordpress.com/forums/topic/caption-in-tiled-block-group/

[supernovia]

Another request here:

why can’t tiled galleries have captions.

[sanjeev00733]

Another report in 25443273-hc

can you tell me why my captions don't appear when I click the photo on the website

[eduardozulian]

Another in 25477790-hc

[JoshBDunn]

Another request for this feature in 25682278-hc

[allykmyta]

Another request for this feature in 26341980-hc

[happychait]

26396768-hc

[Agepeuve]

Another in zen-3642369

[ahmadbaig1]

Tiled Gallery (Mosaic) doesn't show captions in slideshow mode.
User report- 3624123-zen

[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

[otpidusprime]

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.