如何迫使WordPress提升图片档次?

时间:2020-07-30 作者:ralphjsmit

我的Wordpress图片有点问题。我想强制Wordpress升级图像,以便首选add_image_size 始终可用。

我添加的尺寸如下:

    //Theme supports
function amb_add_theme_support() {
   add_theme_support( \'title-tag\' ); //Support for title tags


if ( function_exists( \'add_theme_support\' ) ) { //Thumbnail images
    add_theme_support( \'post-thumbnails\' );
    set_post_thumbnail_size( 800, 500, true );
}

//Image sizes
add_image_size( \'amb_post_preview_400\', 400, 250, true );
add_image_size( \'amb_post_preview_600\', 600, 375, true );
add_image_size( \'amb_post_preview_800\', 800, 500, true );
add_image_size( \'amb_post_preview_1000\', 1000, 625, true );
add_image_size( \'amb_post_preview_1400\', 1400, 875, true );
add_image_size( \'amb_post_preview_1800\', 1800, 1125, true );
add_image_size( \'amb_post_preview_2200\', 2200, 1375, true );
add_image_size( \'amb_post_preview_2600\', 2600, 1625, true );
add_image_size( \'amb_post_preview_3000\', 3000, 1875, true );

add_image_size( \'amb_header_logo\', 200);

add_image_size( \'amb_original_400\', 400);
add_image_size( \'amb_original_600\', 600);
add_image_size( \'amb_original_800\', 800);
add_image_size( \'amb_original_1000\', 1000);
add_image_size( \'amb_original_1400\', 1400);
add_image_size( \'amb_original_1800\', 1800);
add_image_size( \'amb_original_2200\', 2200);
add_image_size( \'amb_original_2600\', 2600);
add_image_size( \'amb_original_3000\', 3000);
}

add_action( \'after_setup_theme\', \'amb_add_theme_support\' );
例如,我上传了一幅600x700像素的图像。“重新生成缩略图”提供了以下列表:

thumbnail: 150×150 pixels (cropped to fit) u2-150x150.jpg
medium: 300×300 pixels (proportionally resized to fit inside dimensions) u2-257x300.jpg
medium_large: 768×0 pixels (thumbnail would be larger than original)
large: 1024×1024 pixels (thumbnail would be larger than original)
1536x1536: 1536×1536 pixels (thumbnail would be larger than original)
2048x2048: 2048×2048 pixels (thumbnail would be larger than original)
post-thumbnail: 800×500 pixels (cropped to fit) u2-600x500.jpg
amb_post_preview_400: 400×250 pixels (cropped to fit) u2-400x250.jpg
amb_post_preview_600: 600×375 pixels (cropped to fit) u2-600x375.jpg
amb_post_preview_800: 800×500 pixels (cropped to fit) u2-600x500.jpg
amb_post_preview_1000: 1000×625 pixels (cropped to fit) u2-600x625.jpg
amb_post_preview_1400: 1400×875 pixels (thumbnail would be larger than original)
amb_post_preview_1800: 1800×1125 pixels (thumbnail would be larger than original)
amb_post_preview_2200: 2200×1375 pixels (thumbnail would be larger than original)
amb_post_preview_2600: 2600×1625 pixels (thumbnail would be larger than original)
amb_post_preview_3000: 3000×1875 pixels (thumbnail would be larger than original)
amb_header_logo: 200×0 pixels (proportionally resized to fit inside dimensions) u2-200x233.jpg
amb_original_400: 400×0 pixels (proportionally resized to fit inside dimensions) u2-400x467.jpg
amb_original_600: 600×0 pixels (thumbnail would be larger than original)
amb_original_800: 800×0 pixels (thumbnail would be larger than original)
amb_original_1000: 1000×0 pixels (thumbnail would be larger than original)
amb_original_1400: 1400×0 pixels (thumbnail would be larger than original)
amb_original_1800: 1800×0 pixels (thumbnail would be larger than original)
amb_original_2200: 2200×0 pixels (thumbnail would be larger than original)
amb_original_2600: 2600×0 pixels (thumbnail would be larger than original)
amb_original_3000: 3000×0 pixels (thumbnail would be larger than original)

First problem

采取amb_post_preview_800 形象所需的图像格式为800x500。但由于图像宽度只有600px,最终结果是600x500。我不希望出现这种情况,因为这样一来,图像比例就不再正确了。我应该如何解决这个问题?

Second problem

其次,我也有一个问题,加载的图像尺寸太大,因此无法生成。在我的PHP中,我得到如下图像url:

$amb_post_preview_image_1000 = wp_get_attachment_image_src( get_post_thumbnail_id(), \'amb_post_preview_1000\'); 
这将返回原始图像大小600x700的url。但我不想要原始图像的大小,而是具有正确比例的最大图像。

我认为这可以通过以下方式解决:1)当图像大小不存在时,让Wordpress以相同的比率检索最大的图像;2)强制Wordpress始终使用高比例图像。因为允许扩大规模,我发现this question, 但我不知道如何将其应用到我当前的add_image_size. 有人能告诉我应该如何解决这两个问题吗?

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

您始终可以使用full 大小,但如果问题是图像没有覆盖足够的区域,可以使用CSS和background-sizeobject-fit 参数。

这将允许您使用比源图像大的img标记,或比其容器小的背景图像,并允许您告诉浏览器如何使图像适合,例如拉伸或放大图像以覆盖整个画布,同时保持比例等。

通常,您希望浏览器在运行时进行放大,以便放大实际尺寸并避免额外带宽

相关推荐

WP Large Images crash page

我遇到了一个问题,照片库中最宽的一面有多个7MB、4000px的图像,导致wordpress页面崩溃,或者页面变得没有响应。我使用smush调整图像大小。除了较小的图像,还有其他想法吗?还是更少的图像?