Cropped featured image replaces original image in gallery

Question

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,

Answer 1

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.

Answer 2

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:

• Post Thumbnails
• Function Reference/set post thumbnail size
• Function Reference/add image size
• Function Reference/the post thumbnail

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' ); ?>

• wp_get_attachment_image_src gets the source of the"Featured Image"
• get_post_thumbnail_id Returns the ID of the Thumbnail attached to the post
• 'thumbnail' is the 'size' of the image set in your Wordpress settings

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
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.