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

Question

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!

0
Austin Allen 2 years 2022-05-09T16:05:03-05:00 0 Answers 0 views 0

Leave an answer

Browse
Browse