What is the best way to convert the img tags into amp-img?

Question

I have a wordpress website and the images that come from the the_content() function have the <img> tag, however for the AMP pages they should be written like this: <amp-img>. What's the correct way of doing that in WP?

Answer 1

AMP images need to have some necessary attributes: width, height and layout. And you need to remove some WP attributes (decoding and loading). Also I'm sure that you want to do WP-to-AMP conversion not only for images but for all the rest of the content of your posts. I wrote my own function replaceTagsWpByAmpInText() with a couple of helper functions. This function also converts Iframe tags and removes !important words from styles. If you need you can modify the functions and add additional cleaning code. Please, use it this way:

$post_content = replaceTagsWpByAmpInText($post_content);

Here are the functions:

function checkImageSizes($width, $height)
{
    $LENGTH_LIMIT = 1200;
    if ($height > $LENGTH_LIMIT) {
        $height_new = $LENGTH_LIMIT;
        $width_new = $width * $LENGTH_LIMIT / $height;
    } else {
        $width_new = $width;
        $height_new = $height;
    }
    return ["width" => $width_new, "height" => $height_new];
}

function ampImgTag($src, $width, $height, $alt = "")
{
    return '<amp-img src="' . $src . '" alt="' . $alt . '" width="' . $width . '" height="' . $height . '" layout="responsive" style="max-width: ' . $width . 'px; max-height: ' . $height . 'px;"></amp-img>';
}

function replaceTagsWpByAmpInText($content)
{
    $content = str_ireplace("<img ", "<amp-img ", $content);
    $content = preg_replace_callback(
        '/<figure[^\>]*\>((?:(?!<\/figure>).)*)<\/figure>/is',
        fn ($matches) => $matches[1],
        $content
    );
    $content = preg_replace_callback(
        '/(?:<amp-img [^\>]*src=\"([^\"]*)\"[^\>]*(?:(width=\"(\d+)\" height=\"(\d+)\"){1}[^\>]*\>))/i',
        function ($matches) {
            $sizes = checkImageSizes($matches[3], $matches[4]);
            return "<p>" . ampImgTag($matches[1], $sizes["width"], $sizes["height"]) . "</p>";
        },
        $content
    );
    $content = preg_replace_callback(
        '/(?:<amp-img [^\>]*src=\"([^\"]*\-(\d+)x(\d+).[^\"]*)\"[^\>]*\>)/i',
        function ($matches) {
            $sizes = checkImageSizes($matches[2], $matches[3]);
            return "<p>" . ampImgTag($matches[1], $sizes["width"], $sizes["height"]) . "</p>";
        },
        $content
    );
    $content = preg_replace_callback(
        '/(?:<amp-img [^\>]*src=\"([^\"]*)\"[^\>]*\>)/i',
        function ($matches) {
            list($width, $height, $type, $attr) = getimagesize($matches[1]);
            $sizes = checkImageSizes($width, $height);
            return "<p>" . ampImgTag($matches[1], $sizes["width"], $sizes["height"]) . "</p>";
        },
        $content
    );
    $content = preg_replace_callback(
        '/(\<iframe [^\>]*)security=\"[^\"]*\"([^\>]*\>)/i',
        fn ($matches) => $matches[1] . $matches[2],
        $content
    );
    $content = str_ireplace("</img>", "</amp-img>", $content);
    $content = str_ireplace("<iframe ", "<amp-iframe ", $content);
    $content = str_ireplace("</iframe>", "</amp-iframe>", $content);
    $content = str_ireplace('decoding="async"', "", $content);
    $content = str_ireplace('loading="lazy"', "", $content);
    $content = str_ireplace(' !important', "", $content);

    return $content;
}

Answer 2

I would build a php function which replaces "img" with "amp-img".

<?php 
function parseTagsIntoAmpTagsFromString($string)
{
    $search = ["<img", "</img>"];
    $replace = ["<amp-img", "</amp-img>"];
    return str_replace($search, $replace, $string);
}
?>

As the code above shows, you will need to match starting and closing tags. The replacement is done on the found keys in $search and $replace.

Answer 3

Try with this:

add_filter('the_content', 'change_img', 99);
function change_img( $content )
{
    return str_replace('<img', '<amp-img', $content);
}