0

Please bear with me here:

With the thumbnail function we can define a hard crop when an image is uploaded. That's great for when I have a thin and narrow widescreen image (say 1280px by 300 px ) as a post header. 

add_image_size( 'featured-image-2-L', 1280, 400, true ); // hard crop

As long as the user uploads an image that is wider then 1280px, we're good. A new image is created that is cropped to 1280 x 400 px.

Now, with Wordpress supporting img srcset out of the box I would love to utilize that so I don't need to load a 1280 px wide image on mobile, but rather an opitimized in the right size. As long as the proportions are exactly the same on the featured image sizes, Wordpress now recognizes that and adds the srcset code automatically. Thus I would like to have the newly created image above scaled down proportionally to for example: 640px by 200px and so on.

But if I do this:

add_image_size( 'featured-image-2-L', 1280, 400, true ); // hard crop
add_image_size( 'featured-image-2', 640, 200, true ); // hard crop

the scond image created is (of course) showing just the top left part of the image. Ie. it does its own cropping from the original photo, instead of scaling down the big custom featured image.

Does anyone have a good solution for this problem? I guess my question could be rephrased as: "How can I both crop and resize proportionally at the same time?"

Improve this question
2
  • I use code exactly the same as yours all the time and it works. For each image size, WP scales the original to fill your specified size and then crops it. Things only ever go wrong if you upload an image smaller than your target sizes.
    – Andy Macaulay-Brook
    Commented May 19, 2016 at 12:10
  • Ah. If you add this code you will also need to regenerate existing images. The new code will only affect new uploads. Are you looking at an image that was uploaded before you put in the add_image_size statements?
    – Andy Macaulay-Brook
    Commented May 19, 2016 at 12:12

1 Answer 1

Reset to default
0

Not sure I 100% follow what you trying to do, but you may have better luck if you try fiddling with the crop position. But it's odd you are saying cropping from the top left, as default crop position is center and center.

add_image_size( 'featured-image-2', 640, 200, array( 'center', 'bottom' ) ); // Hard crop center bottom

The first value in the array is the x axis crop position, and the second is the y axis crop position.

  • x_crop_position accepts 'left' 'center', or 'right'.
  • y_crop_position accepts 'top', 'center', or 'bottom'.
Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.