By Christine Cooper


2019-04-12 13:51:03 8 Comments

Before the Block Editor was implemented, the <figure> tag used to have an inline width styling, matching the value of the image inside, example:

<figure style="width:300px;">
    <img src="https://example.com/image.jpg" width="300" height="100">
    <figcaption> text </figcaption>
</figure>

But since the Block Editor, this inline styling is removed:

<figure>
    ...
</figure>

How can we add this inline width styling back to the <figure> tag (avoiding a jQuery approach)?

1 comments

@userabuser 2019-04-12 16:31:57

I am assuming you want this value on the front-end as opposed to needing it in the block editor due to the <figure> somehow not displaying correctly when viewed in the block editor.

If that is the case then you can use something similar to DOMDocument as per the following example:

Assume HTML of:

<div>
    <figure>
        <img src="https://example.com/image.jpg" width="300" height="100">
        <figcaption> text </figcaption>
    </figure>
    <figure>
        <img src="https://example.com/image.jpg" width="300" height="100">
        <figcaption> text </figcaption>
    </figure>
    <figure>
        <img src="https://example.com/image.jpg" width="300" height="100">
        <figcaption> text </figcaption>
    </figure>
</div>

Processing logic:

$html = '<!-- YOUR HTML -->';

libxml_clear_errors();
$libxml = libxml_use_internal_errors(true);

$dom = new DOMDocument;
$dom->loadHTML($html);

$elements = $dom->getElementsByTagName('figure');

foreach ($elements as $element) {
    foreach ($element->getElementsByTagName('img') as $img) {
        if ( $img->hasAttribute('width') ) {
            $width = $img->getAttribute('width');
            $element->setAttribute('style', "width:{$width}px;");
        }
    }
}

libxml_clear_errors();
libxml_use_internal_errors($libxml);

// for debugging purposes print out the modified HTML
echo $dom->saveHTML();

Feel free to add more conditional guards/checks for existing style attributes so you can append/parse accordingly as my example shows a basic use-case only to get you started assuming this method is suitable for you.

Resulting output $dom->saveHTML():

<div>
    <figure style="width:300px;">
        <img src="https://example.com/image.jpg" width="300" height="100">
        <figcaption> text </figcaption>
    </figure>
    <figure style="width:300px;">
        <img src="https://example.com/image.jpg" width="300" height="100">
        <figcaption> text </figcaption>
    </figure>
    <figure style="width:300px;">
        <img src="https://example.com/image.jpg" width="300" height="100">
        <figcaption> text </figcaption>
    </figure>
</div>

Notes:

  • you could filter the content and/or resulting template prior to rendering on client via the_content and or similar
  • you could optionally filter the content prior to save via save_post

LibXML/DOMDocument:

Due to issues with processing HTML5, DOMDocument will generate warnings as a result of errors raised within libxml. Word on the street is that these are fine to suppress however I was only able to suppress them via using:

  • libxml_clear_errors();
  • libxml_use_internal_errors();
  • libxml_clear_errors();
  • libxml_use_internal_errors();

Alternatively you could use @ suppresion on:

  • @$dom->loadHTML($html);

...which is a little cleaner than the verbosity of four extra function calls.

Apparently this should work (since it was fixed):

$doc->loadHTML($html, LIBXML_NOWARNING);

...however I was unable to get this constant to work (could be version issues etc), see this and this.

@Christine Cooper 2019-04-15 09:17:37

This is great @userabuser - I am yet to test it out, but the code makes perfect sense. I would probably add a check to see whether if the <figure> tag may already have the width statement added. My initial hopes was to find a way to hook into the block code and add the styling there (so it is implemented naturally), but the fallback was DOMDocument so thank you very much for posting this solution!

@userabuser 2019-04-16 10:07:35

@ChristineCooper you are welcome, let us know how you get on or if you need further help. I'd be interested to know, if you end up using save_post hook before insertion, if the editor does not parse out the attributes on load (I'd assume not).

Related Questions

Sponsored Content

1 Answered Questions

Add width & height attributes to Gutenberg’s image output?

1 Answered Questions

[SOLVED] Can't figure out how to get space around an image?

  • 2016-09-28 19:55:13
  • ChrisS.
  • 21 View
  • 0 Score
  • 1 Answer
  • Tags:   images

2 Answered Questions

[SOLVED] Remove inline width from figure

0 Answered Questions

Filter the_content() to add custom figure tags

1 Answered Questions

[SOLVED] Insert Images at Master Uniform Height

1 Answered Questions

[SOLVED] Image width tag is less than the image pixel width - why?

1 Answered Questions

[SOLVED] Prevent Width and Height Attributes in Image Tag Output

Sponsored Content