resize and crop thumbnail photos

Question

I am using a wordpress theme that displays an image as 600x400 for the slider, the same image on the home page is 290x180 but inside the article the same image is displayed as 600x250 (!). If the image is a mobile phone (an iPhone for example) it is displayed correctly on two first size versions but it is cropeped in the latest 600x250 version and you can see the iphone without top and bottom edges.

I downloaded the plugin Post Thumbnail Editor that allows me to change individually each size-version created and crop the image but it doesn't allow me to resize the image individually. For example on the 600x2500 version I can resize the height of the phone to be 250 so it will be displayed correctly in the header (600x250) size version.

Do you know if there is any plugin that would allow me to edit images directly in the backend without the need to use photoshop?

Answer 1

I created the Post Thumbnail Editor Plugin, and this sounds like the type of problem that it should work on. However, I believe that the answer depends on how the responsiveness of your site works (i.e. how does the site change the image depending on browser size -- phone, tablet, etc.).

According to your example above, there should probably be at least 4 post thumbnails defined: Slider (600x400), homepage-thumb (290x180), article (600x250) and article-mobile (300x100). Using the PTE plugin you could then crop each post thumbnail as needed. However, the theme, or the plugin that manages the responsiveness of your site would need to use the two article post thumbnails in their code to refer to the different post thumbnails.

Answer 2

WordPress comes with features for cropping, resizing, flipping and rotating images right from the Media Library. You can checkout this link for complete details and instructions.

Answer 3

You can use some CSS+JS for that. It can't actually be called crop, but if you use a box with overflow hidden this can be done.

Take dimensions with JS and, with previously position relative applied by CSS, use top = -(image_height - box_height)/2 [(600-250)/2 = -175px for this case]. When you get the thumbnail with the_post_thumbnail(), you have to apply an array dimensions of 600,600. This gonna make the image with 600px width be centered at the vertical middle of the box.

You can build a slightly more complex function checking the box and image dimensions and then applying the appropriate position for vertical or horizontal with conditionals so you can use it generically.

Hope it helps.