如何在ampify_img函数中获取图像的src

Question

我正在使用ampify_img将常规图像标签转换为 amp 图像标签。所以：

    <img src="dir/whatever/photo.jpg" alt="Whatever">

转换为：

    <amp-img src="dir/whatever/photo.jpg" layout="responsive" class="i-amphtml-element"></amp-img>

问题是：要成为放大器宽度和高度的有效标记，必须在此转换后的标签中设置。而且我不知道如何将 src 提取到转换图像并写入新标签的函数中。我知道我可以使用 PHP getimagesize() 获取图像大小，但无法弄清楚它在哪里。我不擅长正则表达式，这可能会使实现目标变得更加困难。

放大默认图像功能：

<?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, $matches);

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

    preg_match_all('/(alt|src|width|height)=("[^"]*")/i', $m, $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;

}

我试图从 $matches2[2][$key2] 或 $matches2[2] 或 $matches 中提取 getimagesize() 没有成功。我认为比其他任何事情都更了解从何处提取信息以写入 $amp_tag。

<?php

// comments where i tried to get info

function ampify_img ($html) {

  preg_match_all("#<img(.*?)\\/?>#", $html, $matches);

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

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

    $amp_tag = '<amp-img ';

    foreach ($matches2[1] as $key2 => $val) {

      $amp_tag .= $val .'='. $matches2[2][$key2] .' '; // guess it can be here and possibly width and height can be writed here

    }

    $amp_tag .= 'layout="responsive"'; // certainly width and height can be writed here if we can get each image src at conversion and call PHP getimagesize

    $amp_tag .= '>';

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

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

  }

  return $html;

}

Answer 1

我找到了一个不涉及使用 ampify_img 函数而只涉及放大器本身的解决方案，改变了布局。对于那些曾经有同样困难的人来说，必须实现放大器将他们的<img>标签图像<amp-img>即时转换为标签，这是一个解决方案，但图像布局是固定的，保留了纵横比。.我也不知道检查长内容中的每个图像大小并写入标签会消耗多少 cpu 和 ram。但我认为这将是理想的选择，为每个图像编写特定的宽度和高度，而不是分配固定的布局。解决方案实施起来非常简单：function img_to_amp ($html) {&nbsp; preg_match_all("#<img(.*?)\\/?>#", $html, $matches);&nbsp; foreach ($matches[1] as $key => $m) {&nbsp; &nbsp; preg_match_all('/(alt|src|width|height)=("[^"]*")/i', $m, $matches2);&nbsp; &nbsp; $amp_tag = '<div class="fixed-height-container"><amp-img ';&nbsp; &nbsp; foreach ($matches2[1] as $key2 => $val) {&nbsp; &nbsp; &nbsp; $amp_tag .= $val .'='. $matches2[2][$key2] .' ';&nbsp; &nbsp; }&nbsp; &nbsp; $amp_tag .= 'class="contain" layout="fill"';&nbsp; &nbsp; $amp_tag .= '>';&nbsp; &nbsp; $amp_tag .= '</amp-img></div>';&nbsp; &nbsp; $html = str_replace($matches[0][$key], $amp_tag, $html);&nbsp; }&nbsp; return $html;}只需要放： <div class="fixed-height-container">之前<amp-img并更改：$amp_tag .= 'layout="responsive"'; 到：$amp_tag .= 'class="contain" layout="fill"';和</div>最后一个结束$amp_tag .= '</amp-img></div>';您可以在我找到此解决方案的地方查看 amp 教程： amp.dev 站点这样你就不需要沿着图像标签提供宽度和高度模式。更新：ampify_img 的作者返回了我的电子邮件，所以这里有一个更好的方法。PHP 从那里检查 img src 和 getimagesize()。通过这种方式，图像变得具有响应性。function img_to_amp ($html) {&nbsp; &nbsp; preg_match_all("#<img(.*?)\\/?>#", $html, $img_matches);&nbsp; &nbsp; foreach ($img_matches[1] as $key => $img_tag) {&nbsp; &nbsp; &nbsp; preg_match_all('/(alt|src|width|height)=["\'](.*?)["\']/i', $img_tag, $attribute_matches);&nbsp; &nbsp; &nbsp; $attributes = array_combine($attribute_matches[1], $attribute_matches[2]);&nbsp; &nbsp; &nbsp; if (!array_key_exists('width', $attributes) || !array_key_exists('height', $attributes)) {&nbsp; &nbsp; &nbsp; &nbsp; if (array_key_exists('src', $attributes)) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; list($width, $height) = getimagesize($attributes['src']);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $attributes['width'] = $width;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $attributes['height'] = $height;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; $amp_tag = '<amp-img ';&nbsp; &nbsp; &nbsp; foreach ($attributes as $attribute => $val) {&nbsp; &nbsp; &nbsp; &nbsp; $amp_tag .= $attribute .'="'. $val .'" ';&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; $amp_tag .= 'layout="responsive"';&nbsp; &nbsp; &nbsp; $amp_tag .= '>';&nbsp; &nbsp; &nbsp; $amp_tag .= '</amp-img>';&nbsp; &nbsp; &nbsp; $html = str_replace($img_matches[0][$key], $amp_tag, $html);&nbsp; &nbsp; }&nbsp; &nbsp; return $html;&nbsp; }您还可以检查代码并在https://gist.github.com/elalemanyo/034490164beb7b935559585ff1cc7d9f 上做出贡献