将图像宽度应用于<Figure>标记

时间:2019-04-12 作者:Christine Cooper

在实现块编辑器之前<figure> 标签用于具有内联宽度样式,与内部图像的值相匹配,例如:

<figure style="width:300px;">
    <img src="https://example.com/image.jpg" width="300" height="100">
    <figcaption> text </figcaption>
</figure>
但由于使用了块编辑器,此内联样式将被删除:

<figure>
    ...
</figure>
如何将此内联宽度样式添加回<figure> 标记(避免jQuery方法)?

1 个回复
最合适的回答,由SO网友:Adam 整理而成

我假设您希望在前端使用此值,而不是在块编辑器中需要它,因为<figure> 在块编辑器中查看时,显示不正确。

如果是这种情况,那么您可以使用类似DOMDocument 根据以下示例:

假设HTML为:

<div>
    <figure>
        <img src="https://example.com/image.jpg" width="300" height="100">
        <figcaption> text </figcaption>
    </figure>
    <figure>
        <img src="https://example.com/image.jpg" width="300" height="100">
        <figcaption> text </figcaption>
    </figure>
    <figure>
        <img src="https://example.com/image.jpg" width="300" height="100">
        <figcaption> text </figcaption>
    </figure>
</div>
处理逻辑:
$html = \'<!-- YOUR HTML -->\';

libxml_clear_errors();
$libxml = libxml_use_internal_errors(true);

$dom = new DOMDocument;
$dom->loadHTML($html);

$elements = $dom->getElementsByTagName(\'figure\');

foreach ($elements as $element) {
    foreach ($element->getElementsByTagName(\'img\') as $img) {
        if ( $img->hasAttribute(\'width\') ) {
            $width = $img->getAttribute(\'width\');
            $element->setAttribute(\'style\', "width:{$width}px;");
        }
    }
}

libxml_clear_errors();
libxml_use_internal_errors($libxml);

// for debugging purposes print out the modified HTML
echo $dom->saveHTML();
请随意为现有样式属性添加更多条件保护/检查,以便您可以相应地附加/解析,因为我的示例显示了一个基本用例,只是为了让您开始假设此方法适合您。

结果输出$dom->saveHTML():

<div>
    <figure style="width:300px;">
        <img src="https://example.com/image.jpg" width="300" height="100">
        <figcaption> text </figcaption>
    </figure>
    <figure style="width:300px;">
        <img src="https://example.com/image.jpg" width="300" height="100">
        <figcaption> text </figcaption>
    </figure>
    <figure style="width:300px;">
        <img src="https://example.com/image.jpg" width="300" height="100">
        <figcaption> text </figcaption>
    </figure>
</div>
备注:

在客户端上呈现之前,您可以通过the_content 和或类似内容,您可以选择在通过save_postLibXML/DOMDocument:

由于处理HTML5的问题,DOMDocument 将由于在libxml中引发的错误而生成警告。街上流传的消息是,这些都可以抑制,但我只能通过以下方式抑制它们:

libxml\\u clear\\u errors()

  • libxml\\u use\\u internal\\u errors()
  • libxml\\u clear\\u errors()
  • libxml\\u use\\u internal\\u errors()
  • 或者您可以使用@ 抑制时间:

    • @$dom->loadHTML($html);
    。。。这比四个额外函数调用的冗长程度要干净一些。

    显然,这应该是可行的(因为它是固定的):

    $doc->loadHTML($html, LIBXML_NOWARNING);

    ...但是,我无法使该常量工作(可能是版本问题等),请参见thisthis.

    相关推荐

    Use wget to find used images

    我正在寻找方法来清理一个站点的图像目录,该站点已经被未使用的图像和缩略图超载。是否可以使用wget只下载站点上html页面引用的图像?我注意到可以浏览下载文件夹并查看列出的文件,所以我假设直接的wget-r将下载这些文件。如何使用wget,但不包括对上传目录进行爬网?