Support » Fixing WordPress » Gallery Captions below Images (not inside) with Gutenberg

  • sblooom

    (@sblooom)


    Hello,

    in my wordpress GALLERIES, I am looking for a solution to move figcaptions at the bottom of the figure like other simple images, and not inside the image (because sometimes I have a very long caption all over a small image).

    I tried a few solution like this one but it is only possible with a defined height so that it revokes gutenberg default gallery’s adaptability (responsive, possibility to have a thumbnail/large gallery, auto-images-resizer…).

    There might be a solution with flexbox, but I think the best way would be to simply edit the php structure moving <figcaption> outside of <figure> ?? Is there any hook or other possibility to achieve that ?

    I think I am not the only one looking for this answer, thanks in advance !

    <figure>
      <a href="http://jouy-en-josas-histoire.fr/wp-content/uploads/2022/01/GRH_image-5.png" data-rel="lightbox-gallery-ScCf5ZOe" data-rl_title="" data-rl_caption="" title="">
        <img loading="lazy" width="412" height="308" src="http://jouy-en-josas-histoire.fr/wp-content/uploads/2022/01/GRH_image-5.png" alt="" data-id="473" data-full-url="http://jouy-en-josas-histoire.fr/wp-content/uploads/2022/01/GRH_image-5.png" data-link="http://jouy-en-josas-histoire.fr/les-lieux-de-la-memoire/lieux-de-culte/leglise-saint-martin/attachment/grh_image-5/" class="wp-image-473" srcset="http://jouy-en-josas-histoire.fr/wp-content/uploads/2022/01/GRH_image-5.png 412w, http://jouy-en-josas-histoire.fr/wp-content/uploads/2022/01/GRH_image-5-300x224.png 300w" sizes="(max-width: 412px) 100vw, 412px">
      </a>
      <figcaption class="blocks-gallery-item__caption">
        <em>sur le plan terrier de 1765 les cimetières, petit et grand, sont identifiés par deux croix</em>
      </figcaption>
    </figure>

    The page I need help with: [log in to see the link]

Viewing 12 replies - 1 through 12 (of 12 total)
  • Moderator bcworkz

    (@bcworkz)

    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.

    Thread Starter sblooom

    (@sblooom)

    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;
    }
    Moderator bcworkz

    (@bcworkz)

    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.

    Thread Starter sblooom

    (@sblooom)

    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 12 months ago by sblooom.
    Moderator bcworkz

    (@bcworkz)

    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://wordpress.org/plugins/search/gallery/

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

    Thread Starter sblooom

    (@sblooom)

    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!

Viewing 12 replies - 1 through 12 (of 12 total)
  • You must be logged in to reply to this topic.