Cropped featured image replaces original image in gallery

2 Views

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.

Read More

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 220×170 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 220×170 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 220×170 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,

Post Views: 2

Related posts

Leave a Reply

2 comments

  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.

  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:

    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 220×170
      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 220×170 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.