对内容中的所有图像进行响应的类

时间：2018-12-22 作者：Alt C

我用这个函数为内容中的所有图像添加了一个响应类，但这破坏了网站的html结构。这将使用以下内容包装内容：<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd"><body> the content goes here (output from the_content();) </body></html>

function add_responsive_class($content)
{
    $content = mb_convert_encoding($content, \'HTML-ENTITIES\', "UTF-8");
    if (!empty($content)) {
        $document = new DOMDocument();
        libxml_use_internal_errors(true);
        $document->loadHTML(utf8_decode($content));

        $imgs = $document->getElementsByTagName(\'img\');
        foreach ($imgs as $img) {
            $classes = $img->getAttribute(\'class\');
            $img->setAttribute(\'class\', $classes . \' img-fluid\');
        }

        $html = $document->saveHTML();
        return $html;
    }
}
add_filter(\'the_content\', \'add_responsive_class\');
add_filter(\'acf_the_content\', \'add_responsive_class\');
我能知道为什么吗？是否有其他解决方案？

2 个回复
最合适的回答,由SO网友:Dave Romsey 整理而成

使用标准PHP库正确解析和修改HTML是一件非常痛苦的事情。有很多陷阱。下面是一个记录良好的示例，它将添加img-fluid 对内容中的所有图像初始化。

为确保doctype和HTML标记不会添加到HTML片段，请从this StackOverflow 答案是：

$dom->loadHTML( $content ), LIBXML_HTML_NOIMPLIED | LIBXML_HTML_NODEFDTD );
请注意，我链接到的SO帖子中讨论了其他方法，但这个解决方案对我很有效。

下面我发布的代码扩展了这个解决方案，以处理utf8字符。

/**
 * Adds img-fluid class to images in content.
 * Fire late to affect gallery images.
 */
add_filter( \'the_content\',     \'add_responsive_class\', 9999 );
add_filter( \'acf_the_content\', \'add_responsive_class\', 9999 );
function add_responsive_class( $content ) {
    // Bail if there is no content to work with.
    if ( ! $content ) {
        return $content;
    }

    // Create an instance of DOMDocument.
    $dom = new \\DOMDocument();

    // Supress errors due to malformed HTML.
    // See http://stackoverflow.com/a/17559716/3059883
    $libxml_previous_state = libxml_use_internal_errors( true );

    // Populate $dom with $content, making sure to handle UTF-8, otherwise
    // problems will occur with UTF-8 characters.
    // Also, make sure that the doctype and HTML tags are not added to our HTML fragment. http://stackoverflow.com/a/22490902/3059883
    $dom->loadHTML( mb_convert_encoding( $content, \'HTML-ENTITIES\', \'UTF-8\' ), LIBXML_HTML_NOIMPLIED | LIBXML_HTML_NODEFDTD );

    // Restore previous state of libxml_use_internal_errors() now that we\'re done.
    libxml_use_internal_errors( $libxml_previous_state );

    // Create an instance of DOMXpath.
    $xpath = new \\DOMXpath( $dom );

    // Get images.
    $imgs = $xpath->query( "//img" );

    // Add additional classes to images.
    foreach ( $imgs as $img ) {
        $existing_class = $img->getAttribute( \'class\' );
        $img->setAttribute( \'class\', "{$existing_class} img-fluid" );
    }

    // Save and return updated HTML.
    $new_content = $dom->saveHTML();
    return $new_content;
}

SO网友:Ravi

如果您正在使用引导，并且希望在the_content(). 您可以尝试此代码；在我的情况下效果很好img流体。您可以用自己的类替换它。

function add_image_responsive_class($content) {
    global $post;
    
    $pattern ="/<img(.*?)class=\\"(.*?)\\"(.*?)>/i";
    $replacement = \'<img$1class="$2 img-fluid"$3>\';
    $content = preg_replace($pattern, $replacement, $content);
    
    return $content;
}
add_filter(\'the_content\', \'add_image_responsive_class\');

标签： theme-development   images   the-content   小码农  

相关推荐

Remove <p></p> after images

我对<p></p> 出现在my之后的标记<img....>. 以下是我在本地主机上查看生成的页面时显示的内容。。。<img src=\"/wp-content/themes/wunderful/assets/images/feedback-danielle.png\" alt=\"Danielle Johnson Deal Town FC Treasurer\"> <p></p> 请注意随机生成的<p>&