Make img AMP-ready

ampify_img.php

<?php
/**
 * Replace img tag with amp-img
 *
 * <amp-img src="[src]"
 *   width="[width]"
 *   height="[height]"
 *   layout="responsive"
 *   alt="[alt]">
 * </amp-img>
 *
 */
function _ampify_img ($html) {
  preg_match_all("#<img(.*?)\\/?>#", $html, $img_matches);

  foreach ($img_matches[1] as $key => $img_tag) {
    preg_match_all('/(alt|src|width|height)=["\'](.*?)["\']/i', $img_tag, $attribute_matches);
    $attributes = array_combine($attribute_matches[1], $attribute_matches[2]);

    if (!array_key_exists('width', $attributes) || !array_key_exists('height', $attributes)) {
      if (array_key_exists('src', $attributes)) {
        list($width, $height) = getimagesize($attributes['src']);
        $attributes['width'] = $width;
        $attributes['height'] = $height;
      }
    }

    $amp_tag = '<amp-img ';
    foreach ($attributes as $attribute => $val) {
      $amp_tag .= $attribute .'="'. $val .'" ';
    }

    $amp_tag .= 'layout="responsive"';
    $amp_tag .= '>';
    $amp_tag .= '</amp-img>';

    $html = str_replace($img_matches[0][$key], $amp_tag, $html);
  }

  return $html;
}

thank!

Thank you 👍

Thanks !

Thanks, if you use for WordPress, you can add class tag for inline alignments.

Hi,
This was not working for my case. Single quotes problem in image name.
$str = "<img class='avia_image' src='https://abc.com/abc.jpg' alt='Liquidaromen' title='Liquidaromen' itemprop="contentURL" width="100" height="100" />";
Case:

Updated Working:
function _domradio_util_ampify_img ($html) {
preg_match_all("#<img(.*?)\/?>#", $html, $matches);

foreach ($matches[1] as $key => $m) {

  //below line is updated by me

preg_match_all('/(alt|src|width|height)=(("[^"]")|('[^\']'))/i', $m, $matches2);
print_r($matches2);

$amp_tag = '<amp-img ';
foreach ($matches2[1] as $key2 => $val) {
  $amp_tag .= $val .'='. $matches2[2][$key2] .' ';
}
$amp_tag .= 'layout="responsive"';
$amp_tag .= '>';
$amp_tag .= '</amp-img>';
$html = str_replace($matches[0][$key], $amp_tag, $html);

}
return $html;
}

Hi,
This was not working for my case. Single quotes problem in image name.
$str = "";
Case:

Updated Working:
function _domradio_util_ampify_img ($html) {
preg_match_all("#<img(.*?)/?>#", $html, $matches);

foreach ($matches[1] as $key => $m) {

  //below line is updated by me

preg_match_all('/(alt|src|width|height)=(("[^"]")|('[^']'))/i', $m, $matches2);
print_r($matches2);

$amp_tag = '<amp-img ';
foreach ($matches2[1] as $key2 => $val) {
  $amp_tag .= $val .'='. $matches2[2][$key2] .' ';
}
$amp_tag .= 'layout="responsive"';
$amp_tag .= '>';
$amp_tag .= '</amp-img>';
$html = str_replace($matches[0][$key], $amp_tag, $html);

}
return $html;
}

Syntax error, please update and correct quotes.

@hardeep360 @saosangmo
Sorry but I don't see any error, I test your example string and works for me. Maybe I am missing something?

$str = "<img class='avia_image' src='https://abc.com/abc.jpg' alt='Liquidaromen' title='Liquidaromen' itemprop=\"contentURL\" width=\"100\" height=\"100\" />";
print _ampify_img($str);

<amp-img src="https://abc.com/abc.jpg" alt="Liquidaromen" width="100" height="100" layout="responsive"></amp-img>