Place image caption outside of figure tag (Gutenburg Image Markup)

Question

Place image caption outside of figure tag (Gutenburg Image Markup)

Austin Allen

2022年5月14日 00:37

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;
figcaptionsome 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
figcaptionsome text/figcaption

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

Any recommendations are appreciated. Thanks!

Topic block-editor captions images Wordpress

Category Web

Austin Allen · Accepted Answer · 2022年5月14日 00:37

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

Place image caption outside of figure tag (Gutenburg Image Markup)

About