post thumbnails - How to force Wordpress to upscale images?

admin管理员组

文章数量:1327843

I have a bit of a problem with my Wordpress images. I want to force Wordpress to upscale images, so that the preferred add_image_size is always available.

I'm adding the sizes as follows:

    //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' );

As an example, I have uploaded a 600x700 pixel image. Regenerate thumbnails gives me the following list:

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

Take the amb_post_preview_800 image. The required image format is 800x500. But because the image width is only 600px, the final result is 600x500. I don't want this behaviour, because then the image ratio is not correct anymore. How should I fix this?

Second problem

Second, I also have a problem with loading image sizes that are too big and therefore not being generated. In my PHP I get an image url like this:

$amb_post_preview_image_1000 = wp_get_attachment_image_src( get_post_thumbnail_id(), 'amb_post_preview_1000'); 

This will return the url for the original image size, 600x700. But I don't want the original image size, but the biggest image with the correct ratio.

I think that this can be solved by 1) making Wordpress retrieve the biggest image with the same ratio when an image size does not exist or 2) force Wordpress to always upscale images. For allowing upscaling, I found this question, but I don't know how to apply that to my current add_image_size. Can anyone tell me how I should tackle these two problems?

I have a bit of a problem with my Wordpress images. I want to force Wordpress to upscale images, so that the preferred add_image_size is always available.

I'm adding the sizes as follows:

    //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' );

As an example, I have uploaded a 600x700 pixel image. Regenerate thumbnails gives me the following list:

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

Take the amb_post_preview_800 image. The required image format is 800x500. But because the image width is only 600px, the final result is 600x500. I don't want this behaviour, because then the image ratio is not correct anymore. How should I fix this?

Second problem

Second, I also have a problem with loading image sizes that are too big and therefore not being generated. In my PHP I get an image url like this:

$amb_post_preview_image_1000 = wp_get_attachment_image_src( get_post_thumbnail_id(), 'amb_post_preview_1000'); 

This will return the url for the original image size, 600x700. But I don't want the original image size, but the biggest image with the correct ratio.

I think that this can be solved by 1) making Wordpress retrieve the biggest image with the same ratio when an image size does not exist or 2) force Wordpress to always upscale images. For allowing upscaling, I found this question, but I don't know how to apply that to my current add_image_size. Can anyone tell me how I should tackle these two problems?

• images
• post-thumbnails

Share Improve this question asked Jul 30, 2020 at 12:26 ralphjsmitralphjsmit 40266 silver badges2323 bronze badges 6

• 1 You can always use the full size, if the issue is that your images don't cover enough area, you can fix that with CSS and the background-size and object-fit parameters. This will let you use img tags that are larger than the source image, or background images smaller than their container, and allow you to tell the browser how to make the image fit, e.g. stretching it or enlarging it to cover the entire canvas while keeping proportions, etc. Otherwise it appears you haven't shared your actual problem, just the proposed solution to it that you don't know how to implement :( – Tom J Nowell ♦ Commented Jul 30, 2020 at 13:11
• Hi Tom, thanks for responding. I'll look into the background-size and object-fit parameters as that might also be a possible solution for the second problem. The first problem is still actual though: how do I make Wordpress upscale images or prevent images with a different aspect ratio from being made? – ralphjsmit Commented Jul 30, 2020 at 15:19
• What's the problem that fixes? – Tom J Nowell ♦ Commented Jul 30, 2020 at 15:55
• I don't think this is a thing. I think if you need to make sure your image always fits / fills the space, you have to solve that problem with CSS not more images. You can do this with ratios. ratiobuddy will give you the css for it. – Faye Commented Jul 30, 2020 at 16:15
• @TomJNowell that WP doesn’t give me a different ratio when I request a specific image size. But on the other hand, adding those CSS properties as a backup, will also fix it. I now see what you mean. Thanks for explaining ;-). You could add it as an answer if you like. – ralphjsmit Commented Jul 31, 2020 at 7:08

 |  Show 1 more comment

1 Answer 1

Sorted by: Reset to default 1

You can always use the full size, but if the issue is that your images don't cover enough area, you can fix that with CSS and the background-size and object-fit parameters.

This will let you use img tags that are larger than the source image, or background images smaller than their container, and allow you to tell the browser how to make the image fit, e.g. stretching it or enlarging it to cover the entire canvas while keeping proportions, etc.

Generally you want the browser to do the upscaling at runtime so that it upscales too the actual dimensions and avoids the extra bandwidth

本文标签： post thumbnailsHow to force Wordpress to upscale images