0

I format my single.php images to a perceived 3:2 ratio like this:

<figure style="position:relative; width:100%; padding-bottom:66%;">
<img style="position:absolute; width:100%; height:100%; object-fit:cover;">
<figcaption>some text</figcaption>
</figure>

With Gutenberg, this sticks my caption behind my image or on top of my image (if I position figcaption relative or absolute). I'd like it to be below my image. Before gutenberg, I could customize my image markup. No longer can. Now I am trying to figure out how to make my image caption the next sibling of the figure tag and not a child of it.

Something like

<figure>
<img>
</figure>
<figcaption>some text</figcaption>

I know this breaks the figcaption rules. Right now I am worried about styling.

Any recommendations are appreciated. Thanks!

3
  • I know this breaks the figcaption rules. Google will murder your SEO with bad accessibility these days. It doesn't just break with a gentleman's agreement about HTML markup. What you want to achieve should be easy out of the box with CSS. Maybe bottom:0; left:0 and higher z-index than the image (z-index:10 maybe) Hard to tell as I can't see the other styling you run
    – Bysander
    May 13, 2022 at 10:46
  • Thank you for the reply @Bysander May 13, 2022 at 23:37
  • Good recommendation and advice. But it still places my figcaption on top of the image. Which might not be so terrible at the end of the day. If you can't beat 'em, join 'em. Though, I think I found a dirty way to get what I want. Answering soon. May 13, 2022 at 23:45

1 Answer 1

0

I control the aspect ratio/crop of my images with padding, like this. Though, new WP blocks styles clash with this method. Resulting in captions behind or on top of the image. By looping through each image block <figure class="wp-block-image"> I was able to insert some markup of my choice, using this method

Almost like the old image_send_to_editor filter.

This moved my styles off the <img> and <figure> tags to my new classes/elements. Which allowed wordpress and my custom theme styles to get along.

myFunc(){
const block = Array.from(document.getElementsByClassName("wp-block-image"));

block.forEach((i) => {
  const org_html = i.innerHTML;
  const new_html =
    "<div class='fig-container'>" +
    "<div class='fig-wrapper'>" +
    org_html +
    "</div>" +
    "</div>";
  i.innerHTML = new_html;
});
}
myFunc();

Pen

It has tested well with galleries and columns with images. It also works with straight image blocks, though, having some new margin issues with those scenarios.

edited for clarity

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.