如何在 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>

问题是：要成为 amp 宽度和高度的有效标记，必须在此转换后的标记中设置。而且我不知道如何将 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 功能，只涉及放大器本身，改变布局。对于那些曾经有过同样困难的人，必须实现 amp 将他们的 <img> 标签图像动态转换为 <amp-img> 标签，这是一个解决方案，但图像布局是固定的，保持纵横比. .

我也不知道cpu和ram会消耗什么来检查长内容中的每个图像大小并写入标签。但我认为这将是理想的替代方案，为每个图像编写特定的宽度和高度，而不是分配固定的布局。

解决方案实施起来非常简单：

function img_to_amp ($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 = '<div class="fixed-height-container"><amp-img ';
    foreach ($matches2[1] as $key2 => $val) {
      $amp_tag .= $val .'='. $matches2[2][$key2] .' ';
    }
    $amp_tag .= 'class="contain" layout="fill"';
    $amp_tag .= '>';
    $amp_tag .= '</amp-img></div>';
    $html = str_replace($matches[0][$key], $amp_tag, $html);
  }
  return $html;
}

只需输入： <div class="fixed-height-container"> 在 <amp-img

之前

并更改：$amp_tag .= 'layout="responsive"'; 至：$amp_tag .= 'class="contain" layout="fill"';

和最后一个 $amp_tag .= '</amp-img></div>';

之后的结束 </div>

您可以在我找到这个解决方案的地方查看 amp 教程： amp.dev site

这样您就不需要在图片标签上提供宽度和高度模式。

更新： ampify_img 的作者回复了我的电子邮件，所以这是一个更好的方法。 PHP 从那里检查 img src 和 getimagesize()。这样图像就可以响应了。

function img_to_amp ($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;
  }

你也可以查看代码并贡献 https://gist.github.com/elalemanyo/034490164beb7b935559585ff1cc7d9f

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

How to get src of a image inside ampify_img function

php

regex

image

amp-html