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 600×700 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 800×500. But because the image width is only 600px, the final result is 600×500. 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, 600×700. 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?
Answers:
Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.
Method 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
All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0