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.

Firstly, I have done my research as thoroughly as I possibly can. Searches have been made, but I have not found any advice or solution as to my exact issue.

Ok, time to explain.

Currently I am working on a gallery theme for a client (I am not the original developer of this theme, it was created by another developer in the office). The theme is rather simple, the home page displays 220x170 thumbnails of each post containing an image. Click on the image, page with full size image comes up. Simple enough.

Now my trouble starts. The client would like to define which area of the image is displayed in the 220x170 thumbnail as currently WordPress just centers the image. My process to do this has been to upload the image to the gallery, insert into post and save.

I will then click on Set Featured image. The main problems begins here. There's 2 ways I can go about this, both causing issues. If I crop the image, select Apply Changes to: Thumbnail, save it and then select Use as featured image, the featured image remains the full sized image, just resized to fit the 220x170 size.

At first I thought I figured out a solution, but I'd call it more of a band-aid fix and my client would rather avoid this next way. If I crop the image, instead now using All image sizes, this will now set the correctly cropped image as the thumnbnail, but will obviously overwrite ... all the image sizes. So if I got back into my post (let's say I accidentally deleted the image from the post) and I wanted to insert it back in, the image now inside of the gallery is the cropped image.

I'm trying to look for some guidance as to how I can fix the first issue, where the cropped thumbnail does not display in the featured image section, but rather just the full sized image.

Thank you,

share|improve this question
    
This question is likely an exact duplicate of User-friendly cropping of post thumbnails –  Chip Bennett Apr 20 '12 at 17:19
    
@ChipBennett I would ask you to read your link. I am not looking for a plugin. The feature is there in WordPress, I'm looking for a means to use it without the aid of a plugin. –  Gilipe Apr 20 '12 at 21:14
    
No, you're asking how to modify the core handling of thumbnail image cropping. The question I linked deals with exactly the same issue. –  Chip Bennett Apr 20 '12 at 22:54
add comment

2 Answers

It sounds as if your client is savvy enough with an image editing program.

Just thinking out loud here, but you could add a custom meta box and have the client upload 2 images. 1 - The smaller image that puts the focus where they want it 2 - The large image, to be used as the "Featured Image".

Then call the custom image in the theme and the large image on click. I know it is an extra step for the client, but this is a method I have used in the past for a similar situation.

share|improve this answer
    
Although I personally wouldn't mind doing it that way (and as you, have done so in the past) the client is very picky. He rather avoid an extra step at all costs, even one so little as adding a second image. If I had it my way, I'd set the featured image first, cropping it and then inserting it first. Then I'd just add the image again when adding to the post. It's a very easy thing to do, but it's more a band-aid fix I'd like to avoid. Thank you though for your input. If worst comes to worst, this will be my final solution. –  Gilipe Apr 16 '12 at 15:00
add comment

I have a solution for you. It is not perfect, but I have tested it for your needs, and it will work. There are a few "bugs" in Wordpress, but I will discuss them later.

In you functions.php, define your images sizes:

// Add Thumbnail Support
if ( function_exists( 'add_theme_support' ) ) {

    add_theme_support( 'post-thumbnails' );

    set_post_thumbnail_size( 220, 220, true );

    add_image_size( 'very-large', 1024, 99999, false );
}

That is just an example for your large image, here are some links in the Wordpress Codex for more info:

In your theme, call the thumbnail with

<img src="<?php $imgsrc = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'thumbnail', false); echo $imgsrc[0]; ?>"> 

Then for the large image, use <?php the_post_thumbnail( 'very-large' ); ?>

Next, go to Admin >> Settings >> Media >> Thumbnail size. Enter 220 width and 170 height

Check "Crop thumbnail to exact dimensions (normally thumbnails are proportional)"


Here is one of the apparent bugs, I tested this 200+ different ways, I have set_post_thumbnail_size( 220, 220, true ); in the functions.php, but also needed to set the dimensions differently in the Wordpress settings or vice versa


Now, in the post new post/edit post screen:

  1. Click, "Set featured image"
  2. Upload your large image
  3. Click "Edit Image" underneath the image thumbnail
  4. Now, click and drag on the image to cropping selection
  5. In "Image Crop" to the right, enter 225 for width and 171 for height, example: 225:171
  6. In "Thumbnail Settings" you MUST select "Thumbnail"
  7. Click the crop icon just above the image crop icon
  8. Click "Save"
  9. Now at the main image screen, at the bottom click "Use as featured image"

Here are more apparent bugs.

  • You cannot simply begin by entering selection dimensions, you must first drag a selection.
  • You must enter a selection larger than the actual dimensions of the Wordpress thumbnail. You cannot enter the actual dimensions of the thumbnail.
  • Even though all of our settings and functions have set a hard crop for the thumbnail image, Wordpress will not ALWAYS crop to 220x170 exactly. Through trial and error, I found that 225:171 always works.

Something else to watch out for, I found out, if the area selected is large and greatly disproportionately tall or wide, the thumbnail will not be displayed as exactly 220x170 either.

I suppose you could fudge a few pixels here or there by adding height="170px" and width="220px" in the image code.

I really hope someone more intelligent than me can come improve this method, but it is the best I could come up with after playing with it for two days.

share|improve this answer
    
I'm going to give this a try after I finish my current work. Hopefully with some trial and error myself, I can play around with your method and improve on it. Thank you for the help! –  Gilipe Apr 19 '12 at 17:38
    
Sounds good. Make sure to edit my answer above if you manage to improve it. –  Travis Pflanz Apr 19 '12 at 18:56
    
Does this just fix the issue at hand, or does it also allow for the off center cropping.. –  RyanS Apr 23 '12 at 12:23
    
As the very first line of the answer says, "I have a solution for you. It is not perfect, but I have tested it for your needs, and it will work." It allows you to crop the thumbnail however you like, but with Wordpress, you can EITHER crop ONLY the thumbnail or your can crop ALL the images. You cannot pick and choose which images to crop and which to not. –  Travis Pflanz Apr 23 '12 at 15:15
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.