Apply image width to tag

by

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.

Leave a Comment