调整the_post_thumbnail的大小以正确拉伸，wordpress

Question

Hi Im using the_post_thumbnail for the nivo slider, my issue is that I cant seem to find a nice easy way to automatically resize the images to exact dimensions. When I use add_image_size it doesnt stretch it correctly, it keeps the constraint on. I dont want cropping or anything. I just want the user to upload the picture and not have to do anything after that.

Its probably a stupid but I have googled it and even though there is lots about it, including various plugins, I cant seem to find a solid answer to this.

Thanks

Answer 1

I think you need to clarify your question. If I understand correctly you want the uploaded image to be the exact image without cropping? Make sure that the upload is saved before calling the_post_thumbnail function of the nivo slider. That way you have the raw image to manipulate before the function gets it.

Answer 2

The add_image_size()-method has a flag for the crop method you wish to use. both of them will keep the proportions of the image intact however.

You could extend the functionality or build your own plugin to handle the resizing in the way you want - you may want to take a look at /wp-includes/media.php and a simple resizing class like https://github.com/mdular/ReSample.php/blob/master/ReSample.php

I'm not a big fan of distorting the image proportions though. If the client is unable to differentiate between a portrait or landscape aspect ratio then cropping the image rather than stretching it seems like the more elegant solution in most cases.

For a quick & dirty solution to your problem though i suggest the following:

1. add the image size and contrain it by the width OR height to fit your sliders width OR height (this example constrains only by width):

   add_image_size( 'slider-image', 760, 9999 ); //760 pixels wide, "unlimited" height

2. when outputting the image tags, force the dimensions to 760 x 474 in the image tag

   < img src="" width="760" height="474" ...>

This will leave you with image files that are potentially taller or wider than what you want but will be forced to the set dimensions in the browser, and therefore fit the slider. It's dirty, yes, but it will work with the tools you currently have.

Update in response to your comment: you can construct the image tag yourself by getting the raw image info.

1) grab the post meta, like so (assuming the_post() is already executed, it should be if you are in the while-loop):

$meta = get_post_meta($post->ID)

2) check for the thumbnail id to avoid empty output (and do steps 3 + 4 inside the if-block)

if(!empty($meta['_tumbnail_id'][0])

3) grab the actual thumbnail raw data - be sure to fill in the 'THUMBNAIL VERSION' (size) you want ('thumbnail', 'medium', etc.. or your own if you used add_image_size() in your functions.php)

$image = wp_get_attachment_image_src( $meta['_thumbnail_id'][0], 'VERSION');

4) construct the image tag:

$image[0] = the src url
$image[1] = the width - you may use this
$image[2] = the height - you may wish to force this to your liking

hope this helps :)