php - 如何在 ampify_img 函数中获取图像的 src
问题描述
我正在使用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;
}
解决方案
我找到了一个不涉及使用 ampify_img 函数而只涉及使用放大器本身的解决方案,从而改变了布局。对于那些曾经有同样困难的人来说,不得不实现将他们的<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"';
最后</div>
结束$amp_tag .= '</amp-img></div>';
您可以查看我在以下位置找到此解决方案的 amp 教程: amp.dev 站点
这样您就不需要沿图像标签提供宽度和高度模式。
更新: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上查看代码并做出贡献
推荐阅读
- visual-studio-2017 - 无法在 Visual Studio 中打开 AVD 管理器,互联网连接错误消息
- javascript - 使用 datetimepicker 时如何显示接下来的 7 天?
- javascript - Chartjs注释插件彩色框颜色在来回切换后求和
- django - 向 Docker 容器提供配置文件的推荐方式
- linux - 为什么第一级进程init放在/sbin中?
- kubernetes - 将 Gcloud vpn 与 Kubernetes 一起使用时的访问限制
- flask - 烧瓶restful强制执行所需的类型参数
- python-3.x - Lambda 函数无权执行 sts:AssumeRole
- python - 如何将文本添加到特定的文件行?
- java - 为什么即使单击按钮,JPanel 的颜色也不会改变?