Gallery Captions below Images (not inside) with Gutenberg

  • 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="https://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="https://jouy-en-josas-histoire.fr/wp-content/uploads/2022/01/GRH_image-5.png" alt="" data-id="473" data-full-url="https://jouy-en-josas-histoire.fr/wp-content/uploads/2022/01/GRH_image-5.png" data-link="https://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="https://jouy-en-josas-histoire.fr/wp-content/uploads/2022/01/GRH_image-5.png 412w, https://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 16 replies (of 16 total)
  • arrisje

    (@arrisje)

    @kimball31 I am not familiar with css so I just copied yours, and I thank you for that. It’s working but I have one more thing the sizes of the thumbnails are different sizes. Is there anyway to add some script of css to my site to make it uniform size of the thumbnail?

    I was using next gen for a long time and was working well till I did an update from then on I am not able to link to a webpage. So I am still using an older version for the time being and looking in to this gallery feature.

    my website is arrisje.com

Viewing 16 replies (of 16 total)
  • The topic ‘Gallery Captions below Images (not inside) with Gutenberg’ is closed to new replies.