0

I am developing my custom theme and trying to figure out how to modify the default code for WordPress <img> inserted into the post content, so I could add support for webP format and have it within <picture> element.

I cannot get it working with regex.

Currently, my post content has got element to display the thumbnail within <p> tag, but the <img> tag is a link <a> which points to the full-size image.

Currently I have got this for full-size image in the post content:

<p>
    <a href="http://www.example.com/wp-content/uploads/2018/11/image-full.jpg" itemprop="url" title="Some title">
        <img alt="Alt tag of the image" class="alignnone size-full" src="http://www.example.com/wp-content/uploads/2018/11/image-thumb.jpg" width="940" height="529">
    </a>
</p>

I am trying to modify it to get this as result:

<p>
    <a href="http://www.example.com/wp-content/uploads/2018/11/image-full.jpg" itemprop="url" title="Some title">
        <picture>
            <source srcset="http://www.example.com/wp-content/uploads/2018/11/image-thumb.webp" type="image/webp" />
            <img alt="Alt tag of the image" class="alignnone size-full" src="http://www.example.com/wp-content/uploads/2018/11/image-thumb.jpg" width="940" height="529">
        </picture>
    </a>
</p>

I have one or more images inserted like this. So, would need to check the whole post content and somehow modify/replace this by finding the with class having "size-full" and then for them add around?

Should I use some preg_replace() or any function?

Maybe using some filter?

Do you have any ideas how to change it?

Kiki FIstrek Novi
  • 185
  • 1
  • 1
  • 11

1 Answers1

0

You have to loop through all images inside $post the_content() using foreach().

Which gives us, regex for group matching of <img> tag. Put all images into array().

Start counting from -1 since 0 has the 1st image already in array().

Loop through array() with images, find image with "size-full" with group match 3, if yes, get it's src value with group match 7.

After, replace src="value" extenstion - .png, .jpg ..., assign the replaced string to new variable. Use the new variable and add extension ".webp" to the it.

Replace existing <img> tags with <picture> element and call the function on $content.

function webp_picture_fix($content){
    global $post;
    preg_match_all("/<img(.*?)class=('|\")(.*?)('|\")(.*?)src=('|\")(.*?)('|\")(.*?)>/i", $content, $images);

    if(!is_null($images)){
        $i = -1;
        foreach ($images as $key) {
            $i++;
            //echo $key[$i];
            if(strpos($images[3][$i], 'size-full') !== false){
                //echo "hi";
                $slika_ekstenzija = $images[7][$i];
                $sewebp = preg_replace('/\\.[^.\\s]{3,4}$/', '', $slika_ekstenzija);
                $webp_slika_src = $sewebp.".webp";
                $replacement = '<picture><source srcset="'.$webp_slika_src.'" type="image/webp" /><img'.$images[1][$i].'class='.$images[2][$i].$images[3][$i].$images[4][$i].$images[5][$i].'src='.$images[6][$i].$images[7][$i].$images[8][$i].$images[9][$i].'></picture>';
                $content = str_replace($images[0][$i], $replacement, $content);
            }
        }
    }

    return $content;
}
add_filter('the_content', 'webp_picture_fix', 9999);
Ho Thanh Cyberdelia Nhan
  • 442
  • 4
  • 20