如何从WordPress资源集中排除图像大小

时间:2018-01-23 作者:Richard Tinkler

Wordpress srcset是一个很好的特性,但有时控制srcset代码中包含的图像大小非常重要。

例如,在我们的一个网站上,我们生成了一个仅供外部使用的自定义图像大小-这意味着外部销售门户会自动收集此图像,以便在其网站上显示。它不打算在我们网站的任何地方显示。

但是,Wordpress srcset功能目前包括所有图像大小。例如:

<img width="350" height="426" src="https://xxx/wp-content/uploads/omega-pink-gold-1235-1-350x426.jpg" class="attachment-shop_catalog size-shop_catalog" alt="xxx" srcset="https://xxx/.../omega-pink-gold-1235-1-350x426.jpg 350w, https://xxx/.../omega-pink-gold-1235-1-246x300.jpg 246w, https://xxx/.../omega-pink-gold-1235-1-768x935.jpg 768w, https://xxx/.../omega-pink-gold-1235-1-841x1024.jpg 841w, https://xxx/.../omega-pink-gold-1235-1-1051x1280.jpg 1051w, https://xxx/.../omega-pink-gold-1235-1-534x650.jpg 534w, https://xxx/.../omega-pink-gold-1235-1-104x127.jpg 104w, https://xxx/.../omega-pink-gold-1235-1-595x725.jpg 595w, https://xxx/.../omega-pink-gold-1235-1-680x828.jpg 680w" sizes="(max-width: 350px) 100vw, 350px" title="xxx">
我们怎样才能更好地控制这种情况?

提前感谢您的帮助!

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

WordPress允许您连接到wp_calculate_image_srcset

See Core file on Trac

此筛选器提供5个参数:

  • $sources 要包含在“srcset”中的一个或多个源数据数组$size_array 以像素为单位的宽度和高度值数组(按该顺序)
  • $image_src 图像的“src”
  • $image_meta “wp\\u get\\u attachment\\u metadata()”返回的图像元数据$attachment_id 图片中的post\\u id这里是一个示例代码,您可以在主题中使用function.php 或插件文件:

    add_filter( \'wp_calculate_image_srcset\', \'my_custom_image_srcset\', 10, 5);
    
    function my_custom_image_srcset($sources, $size_array, $image_src, $image_meta, $attachment_id) {
        // The following code is an adaption from wp-includes/media.php:1061-1180
        $image_sizes = $image_meta[\'sizes\'];
    
        // Get the width and height of the image.
        $image_width = (int) $size_array[0];
        $image_height = (int) $size_array[1];
    
        $image_basename = wp_basename( $image_meta[\'file\'] );
    
        /*
         * WordPress flattens animated GIFs into one frame when generating intermediate sizes.
         * To avoid hiding animation in user content, if src is a full size GIF, a srcset attribute is not generated.
         * If src is an intermediate size GIF, the full size is excluded from srcset to keep a flattened GIF from becoming animated.
         */
        if ( ! isset( $image_sizes[\'thumbnail\'][\'mime-type\'] ) || \'image/gif\' !== $image_sizes[\'thumbnail\'][\'mime-type\'] ) {
            $image_sizes[] = array(
                \'width\'  => $image_meta[\'width\'],
                \'height\' => $image_meta[\'height\'],
                \'file\'   => $image_basename,
            );
        } elseif ( strpos( $image_src, $image_meta[\'file\'] ) ) {
            return false;
        }
    
        // Retrieve the uploads sub-directory from the full size image.
        $dirname = _wp_get_attachment_relative_path( $image_meta[\'file\'] );
    
        if ( $dirname ) {
            $dirname = trailingslashit( $dirname );
        }
    
        $upload_dir = wp_get_upload_dir();
        $image_baseurl = trailingslashit( $upload_dir[\'baseurl\'] ) . $dirname;
    
        /*
         * If currently on HTTPS, prefer HTTPS URLs when we know they\'re supported by the domain
         * (which is to say, when they share the domain name of the current request).
         */
        if ( is_ssl() && \'https\' !== substr( $image_baseurl, 0, 5 ) && parse_url( $image_baseurl, PHP_URL_HOST ) === $_SERVER[\'HTTP_HOST\'] ) {
            $image_baseurl = set_url_scheme( $image_baseurl, \'https\' );
        }
    
        /*
         * Images that have been edited in WordPress after being uploaded will
         * contain a unique hash. Look for that hash and use it later to filter
         * out images that are leftovers from previous versions.
         */
        $image_edited = preg_match( \'/-e[0-9]{13}/\', wp_basename( $image_src ), $image_edit_hash );
    
        /**
         * Filters the maximum image width to be included in a \'srcset\' attribute.
         *
         * @since 4.4.0
         *
         * @param int   $max_width  The maximum image width to be included in the \'srcset\'. Default \'1600\'.
         * @param array $size_array Array of width and height values in pixels (in that order).
         */
        $max_srcset_image_width = apply_filters( \'max_srcset_image_width\', 1600, $size_array );
    
        // Array to hold URL candidates.
        $sources = array();
    
        /**
         * To make sure the ID matches our image src, we will check to see if any sizes in our attachment
         * meta match our $image_src. If no matches are found we don\'t return a srcset to avoid serving
         * an incorrect image. See #35045.
         */
        $src_matched = false;
    
        /*
         * Loop through available images. Only use images that are resized
         * versions of the same edit.
         */
        foreach ( $image_sizes as $identifier => $image ) {
            // Continue if identifier is unwanted
            if ($identifier === \'unwanted-identifier\') {
                continue;
            }
    
            $is_src = false;
    
            // Check if image meta isn\'t corrupted.
            if ( ! is_array( $image ) ) {
                continue;
            }
    
            // If the file name is part of the `src`, we\'ve confirmed a match.
            if ( ! $src_matched && false !== strpos( $image_src, $dirname . $image[\'file\'] ) ) {
                $src_matched = $is_src = true;
            }
    
            // Filter out images that are from previous edits.
            if ( $image_edited && ! strpos( $image[\'file\'], $image_edit_hash[0] ) ) {
                continue;
            }
    
            /*
             * Filters out images that are wider than \'$max_srcset_image_width\' unless
             * that file is in the \'src\' attribute.
             */
            if ( $max_srcset_image_width && $image[\'width\'] > $max_srcset_image_width && ! $is_src ) {
                continue;
            }
    
            // If the image dimensions are within 1px of the expected size, use it.
            if ( wp_image_matches_ratio( $image_width, $image_height, $image[\'width\'], $image[\'height\'] ) ) {
                // Add the URL, descriptor, and value to the sources array to be returned.
                $source = array(
                    \'url\'        => $image_baseurl . $image[\'file\'],
                    \'descriptor\' => \'w\',
                    \'value\'      => $image[\'width\'],
                );
    
                // The \'src\' image has to be the first in the \'srcset\', because of a bug in iOS8. See #35030.
                if ( $is_src ) {
                    $sources = array( $image[\'width\'] => $source ) + $sources;
                } else {
                    $sources[ $image[\'width\'] ] = $source;
                }
            }
        }
        return $sources;
    }
    

SO网友:Andrew

WordPress通过附加在the_content

add_filter( \'the_content\', \'wp_make_content_images_responsive\' ); 第141行,共wp-includes/default-filters.php.

您可以通过remove_filter 功能如下:

remove_filter( \'the_content\', \'wp_make_content_images_responsive\' );

以上内容将删除站点范围内的srcset属性,因此您可能希望查看使用template hierarchyconditional tags 仅在需要时移除过滤器。

结束

相关推荐

Remove P tags from images

我使用的是WordPress 4.2.2,每次我向wysiwyg添加图像时,它都会将输出的图像包装在段落标记中。我需要去掉这些标签。我在网上找到的所有东西都是从2011年开始的,而且似乎都不起作用。我试着把东西放在函数中。php类:function filter_ptags_on_images($content){ return preg_replace(\'/<p>\\s*(<a .*>)?\\s*(<img .* \\/>)\\s*(<\\/a&g