Gallery Captions below Images (not inside) with Gutenberg

Moving the tag outside of figure block would be invalid HTML, it must be a child of the figure block. Your hunch about using flex CSS is correct. Start with

.blocks-gallery-item figure {
    flex-direction: column;
}
figcaption.blocks-gallery-item__caption {
    position: relative !important;
}

You’ll likely also want to fiddle with the text color and gradient background. Use your browser’s element inspector tool to help you arrive at appropriate CSS.

Custom CSS is best placed in the customizer’s Additional CSS section.

Thank you for your advices !

The problem with that is using column as flex-direction remove the equal height of my figures…

.wp-block-gallery.aligncenter .blocks-gallery-item figure {
    justify-content: center;
    flex-direction: column;
    object-fit: cover;
    align-items: stretch;
    align-content: stretch;
}

It’d help if all the images were the same aspect ratio ?? Try adding this:

.columns-4 .blocks-gallery-item a {
    min-height: 15vw;
}

You’ll likely need some media queries with varying heights depending on screen width. And different CSS selectors to target different galleries. It’s difficult to come up with CSS that works everywhere when the images and captions are inconsistent.

Thank you @bcworkz, it works in the case of this specific gallery, but I have 3 possible galleries sizes (thumbnails, large, full) which is an option within gutenberg editor. Unfortunately it will remove this capacity (making my galleries all the same size), and there are no classes for these different types of gallery (the option affects img size directly).

I guess the best solution now would be to manually add a class for these 3 types of gallery…

• This reply was modified 2 years, 10 months ago by sblooom.

You can distinguish galleries on different pages with a selector like .page-id-451 (in the page’s body tag). But to distinguish between multiple galleries on the same page, yes, you’d need to add a custom class attribute to the gallery block. Or maybe use some tricky CSS selector like the :nth-child() pseudo-selector.

The solution I offered is more of a patch for a gallery or two. It’s not a good sustainable solution for many galleries throughout the site. If you don’t like the way captions are presented in the galleries, you probably would be better off with an alternative gallery plugin.
https://www.ads-software.com/plugins/search/gallery/

Converting a lot of existing galleries could be labor intensive. But so is custom CSS for each different gallery.

I think I will simply write my different captions in the main gallery caption block (the final caption block for all figures), separated by ‘-‘…

In my opinion, there should be a native solution for this.

@bcworkz thanks for your time anyway !

I agree with sbloom. There should be a native solution for this. Captions should by default be below images. 1) for legibility, 2) for accessibility, 3) to allow long captions. It is very important to be able to do this easily. I used custom CSS to fix this but the more recent changes to the caption block has made that CSS invalid. Very frustrating.

I am also looking forward to a integrated solution for caption below images in a gallery!

You can override the figcaption ‘position’ in your style. Change the position from ‘absolute’ to ‘relative’ to get the caption below the image, instead of on top of it. You will also change the font color and remove the background tinting. Here the css I use to do it:

figure.wp-block-gallery.has-nested-images figure.wp-block-image figcaption {
    font-size: 18px;
    font-weight: bold;
    background: none;
    position: relative;
    color: #000;
    line-height: 1.2em;
    margin-top: 0.2em;
}

@kimball31 Very nice solution!

Many thanks to @sbloom for opening this thread and to @kimball31 for the great proposed solution!
You guys helped a lot!
Like others, I also think that a native solution for this should be offered (to display the caption below and outside the image).
Thank again!

Thank you to @kimball31 for a concise, excellent fix!

Thank you, @kimball31! Your CSS works beautifully.

Thanks @kimball31 worked for a novice

Not a solution but a work around without CSS: I chose the ‘column’ block instead of the gallery. You can add pictures in the columns and chose how many rows you want to have. The great thing is that you can add captions that are below the image and add a link to the image and/or caption. Worked for me until they have figured out a native solution. @sblooom @kimball31 @frank6tg @afengerle

• This reply was modified 1 year, 2 months ago by ursula543.