CODEWITHSUNDEEP
csswordpresswordpress-themingcropimage-resizing
Kareen Lagasca
Kareen Lagasca

Reputation: 939

Wordpress Featured image resize and crop not working

I am having trouble calling the featured image of the blog post in my wordpress blog. I have searched websites for the tutorial but it all leads to the same results.

It doesn't follow my assigned size which is 200x180px then the rest is cropped. to have a better view of what i'm trying to do, you can refer to this website:

http://freakify.com/

I am trying to have all the featured images in same sizes (200x180). on a very related topic, the sizes of my featured images is different but not lower than 500px and not more than 650px. I am trying to display it in different places such as my index file and side bar.php file

add_theme_support( 'post-thumbnails' );
set_post_thumbnail_size( 200, 180, true ); // 50 pixels wide by 50 pixels tall, crop mode
add_image_size( 'post-thumbnails', 200, 180  );

I hope you can help me guys.

Upvotes: 0

Views: 4337

Answers (1)

hcsnemrebured
hcsnemrebured

Reputation: 957

First, you dont need the add_image_size if you're going to use only a one thumbnail image size, only with the first two lines es enough. Second, with the 'true' statement you are 'telling' wordpress to hard crop the images, so it just cuts down the image to make them 200x180. On the other way, if you change the 'true' to 'false', then your images will be resized to the maximum width or height they can reach maintaining the aspect ratio. This are the two methods for resizing the images without changing their appearence, because if you don't mantain the aspect ratio, you'll have stretched images. My recommendation is to use the 200px as an absolute value, and change the height dynamically. To achieve this you can do this:

set_post_thumbnail_size( 200, 9999, false );

This way you can have your original images, filling the 200px requirements but not changing their height, so you could preserve the aspect ratio.

Look at http://dfine.me to see this in action, you just need to modify the css to get the items in a proper way.

Upvotes: 2

Related Questions