Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

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?

share|improve this question
    
What function are using to output the thumbnails? –  Joseph Aug 27 '12 at 1:10
    
Use the media library - it offers from crop to rotate a lot of options to edit images. –  kaiser Aug 27 '12 at 2:15
add comment

3 Answers

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.

share|improve this answer
    
Yes your plugin is just very very good and it helps me a lot - THANKS ! :) But why not allow us to resize the image as well? Uploading the image phonegg.com/ZTE/Grand-X-LTE-T82/ZTE-Grand-X-LTE-T82.jpg it looks like postimage.org/image/hns529q15. It would be nice if we can resize the image so it can look like: postimage.org/image/43ibcnf2n. –  GeorgeK Aug 31 '12 at 1:37
    
The reason that I don't do the normal images is because wordpress already does that. If you find your image in the media gallery there should be an option to "edit image" which you can then crop and rotate, as well as some other simple operations. –  brent Sep 7 '12 at 16:00
    
Wordpress already does for the base image, what about croping a specific size/thumbnail? That is what I am saying... It would be nice if you can crop specific image size not the base image that would change all other sizes as well. –  GeorgeK Sep 11 '12 at 14:06
add comment

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.

share|improve this answer
    
Well, it doesnt allow me do this for each different size. It allows me to resize and crop the main image and based on that image it creates thumbnails. I just need to resize/crop a specific size version of the image, for example ONLY the 600x250 –  GeorgeK Aug 27 '12 at 8:49
add comment

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.

share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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