search

Automattic / jetpack

Security, performance, marketing, and design tools — Jetpack is made by WordPress experts to make WP sites safer and faster, and help you grow your traffic.
https://jetpack.com/
Other
1.59k stars 800 forks source link

Tiled gallery block captions #11794

Open simison opened 5 years ago

simison commented 5 years ago

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.

cc @MichaelArestad @scruffian @mapk

simison commented 5 years ago

Perhaps functioning MVP version of captions could be:

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

gaelgerard commented 5 years ago

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 commented 5 years ago

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 commented 5 years ago

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 commented 5 years ago

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

The other issues sound like technical concerns not design ones.

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

thomasguillot commented 5 years ago

Here's what I would do:

scruffian commented 5 years ago

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

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

thomasguillot commented 5 years ago

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 commented 5 years ago

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

Good point, I like this idea :)

jenhooks commented 5 years ago

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 commented 5 years ago

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

On Sun, 5 May 2019, 18:41 Jen, notifications@github.com 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 commented 5 years ago

@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 commented 5 years ago

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

jeherve commented 5 years ago

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 commented 5 years ago

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

formosattic commented 5 years ago

User request in #2056566-zen.

cecoates commented 5 years ago

User requested: #9543186-hc

samiff commented 5 years ago

Reported in 2166921-zen

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

simison commented 5 years ago

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

Thanks for the heads up!

p1562740031135900-slack-jpop-quill

dromero20 commented 5 years ago

Reported today in 13928682-hc

KokkieH commented 5 years ago

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

mriyazuddin commented 5 years ago

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

galakhyati commented 5 years ago

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

galakhyati commented 5 years ago

@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 commented 5 years ago

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

supernovia commented 4 years ago

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 commented 4 years ago

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

wpericam commented 4 years ago

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

wpericam commented 4 years ago

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

mnelson4 commented 4 years ago

Also encountered this today.

drwpcom commented 4 years ago

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

mnelson4 commented 4 years ago

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

kriskarkoski commented 4 years ago

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 commented 4 years ago

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

Visual workflow 1 step:

Frame-1

2 step:

Frame-2

3 step: Frame-3

3 step (alt, captions under the image): Frame-4

3 step (alt, round images):

Frame

3 step (alt, multiple quotes): alt with move quotes under images

Mobile: X - 1

rickybanister commented 4 years ago

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 commented 4 years ago

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 commented 4 years ago

Just noting a request in 21619595-hc

creativecoder commented 4 years ago

@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

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 commented 4 years ago

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

rickybanister commented 4 years ago

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 commented 4 years ago

@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.

drwpcom commented 4 years ago

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 commented 4 years ago

@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 commented 4 years ago

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. image

Thoughts, @rickybanister ?

LambertusM commented 4 years ago

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 commented 4 years ago

@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 commented 4 years ago

That works for me @olesyabrk!

LambertusM commented 4 years ago

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

pento commented 4 years ago

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:

.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 commented 4 years ago

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.