Rewrite inline image markup

时间:2016-03-15 作者:Nathan

是否有一种方法可以编写一个函数来替换\\u内容中内联图像的标准标记,将大小类移动到父容器,并为不同大小的图像编写一系列数据属性?

我曾尝试使用preg_match函数,最初编写该函数是为了删除图像周围的autop,但无法推断图像的ID,并从中写入新的输出(当我这样做时,它可以工作,但仅对第一张图像这样做——来自_内容的所有其他内容消失)。

我想要这个:

<p>
  <img class="alignnone size-medium wp-image-2093" src="http://website.com/wp-content/uploads/image-600x400.jpg" alt="image" width="600" height="400" />
</p>
成为:

<figure id="image-2093" class="size-medium">
  <img src="http://website.com/wp-content/uploads/image-300x200.jpg"
       data-medium="http://website.com/wp-content/uploads/image-600x400.jpg"
       data-large="http://website.com/wp-content/uploads/image-1200x800.jpg"
  />
</figure>
我希望避免使用image\\u send\\u to\\u editor,只使用能够全面工作的东西,而不仅仅是在新的图像嵌入上。

提前谢谢。

编辑:

这是我拥有的remove autop preg\\u match函数的损坏版本。它生成输出,但没有任何变量(因此id、src或data属性没有值),并且只对第一个图像执行此操作,同时删除所有其他内容。真的是一连串的失败。

function s7g_img_unautop($img) {

    $img = preg_replace(\'/<p>\\\\s*?(<a .*?><img.*?><\\\\/a>|<img.*?>)?\\\\s*<\\\\/p>/s\', \'<figure><div class="media-wrap">$1</div></figure>\', $img);

    preg_match(\'~wp-image-(.*?)"~\', $img, $output);
    $imgID = $output[1];
    $imgL = wp_get_attachment_image_src($imgID, \'thumbnail\');
    $imgM = wp_get_attachment_image_src($imgID, \'medium\');
    $imgH = wp_get_attachment_image_src($imgID, \'large\');

    $image = \'<figure id="image-\'.$imgID.\'"><img src="\'.$imgL[0].\'"  data-medium="\'.$imgM[0].\'" data-large="\'.$imgL[0].\'" /></figure>\';     

    return $image;

}
add_filter( \'the_content\', \'s7g_img_unautop\', 30 );

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

大部分代码取自核心文件,您可能还需要根据自己的需求对其进行一些修改。

这是核心文件链接,我的想法来自:https://developer.wordpress.org/reference/functions/wp_make_content_images_responsive/

你需要注意开放p 标记在图像的正前方。

很匆忙,所以我没有等着检查您尝试了什么,也没有修改它,而是很快创建了这个片段。

add_filter( \'the_content\', \'wpse_220739_modify_images\', 100 );

/**
 * Get all the image tags from content and modify them
 *
 * @param $content
 *
 * @return mixed
 */
function wpse_220739_modify_images( $content ) {
    if ( ! preg_match_all( \'/<img [^>]+>/\', $content, $matches ) ) {
        return $content;
    }

    $selected_images = $attachment_ids = array();

    foreach ( $matches[0] as $image ) {
        if ( preg_match( \'/size-([a-z]+)/i\', $image, $class_size ) && preg_match( \'/wp-image-([0-9]+)/i\', $image, $class_id ) && $image_size = $class_size[1] && $attachment_id = absint( $class_id[1] ) ) {
            /*
             * If exactly the same image tag is used more than once, overwrite it.
             * All identical tags will be replaced later with \'str_replace()\'.
             */
            $selected_images[ $image ] = $attachment_id;
            // Overwrite the ID when the same image is included more than once.
            $attachment_ids[ $attachment_id ] = true;
        }
    }
    foreach ( $selected_images as $image => $attachment_id ) {
        $content = str_replace( $image, wpse_220739_modify_image_tag( $image, $attachment_id, $image_size ), $content );
    }

    return $content;
}

/**
 * Modifies the image tag, by prepending a figure tag and adding necessary classes
 *
 * @param $image
 * @param $attachment_id
 * @param $image_size
 *
 * @return mixed|string
 */
function wpse_220739_modify_image_tag( $image, $attachment_id, $image_size ) {
    $image_src = preg_match( \'/src="([^"]+)"/\', $image, $match_src ) ? $match_src[1] : \'\';
    list( $image_src ) = explode( \'?\', $image_src );

    // Return early if we couldn\'t get the image source.
    if ( ! $image_src ) {
        return $image;
    }
    //Get attachment meta for sizes
    $size_large  = wp_get_attachment_image_src( $attachment_id, \'large\' );
    $size_medium = wp_get_attachment_image_src( $attachment_id, \'medium\' );

    $size_large  = $size_large ? $size_large[0] : \'\';
    $size_medium = $size_medium ? $size_medium[0] : \'\';

    //Check if the image already have a respective attribute
    if ( ! strpos( $image, \'data-large\' ) && ! empty( $size_large ) ) {
        $attr = sprintf( \' data-large="%s"\', esc_attr( $size_large ) );
    }

    if ( ! strpos( $image, \'data-medium\' ) && ! empty( $size_medium ) ) {
        $attr .= sprintf( \' data-medium="%s"\', esc_attr( $size_medium ) );
    }

    // Add \'data\' attributes
    $image = preg_replace( \'/<img ([^>]+?)[\\/ ]*>/\', \'<img $1\' . $attr . \' />\', $image );
    //Append figure tag
    $r_image = sprintf( \'<figure id="image-%d" class="size-%s">\', $image_size, $attachment_id );
    $r_image .= $image . \'</figure>\';

    return $r_image;

}
如果一个图像标签已经有了一个环绕,那么您需要添加另一个检查<figure> 标记与否,但您的主要问题是无法修改内容中的所有图像,应该通过此解决。

更新:第二个foreach循环需要在外部(当然,我没有注意到这一点,真傻),这应该会有所帮助。