Image Scaling using get_the_post_thumbnail issue in Wordpress

Question

Issue URL - http://www.creativescripters.com/clients/testwp/uncategorized/image-resized/

I am using wordpress (self hosted) latest version, The problem is I am looking to get a thumbnail from the resized/scaled image, and when I do that wordpress returns the test-150x150.jpg i.e. Thumbnail from the original image and not the resized image which should have been test-e1513229707262-150x150.jpg

Step to reproduce the issue

1. Upload an image , Scale it (click edit on uploaded image and change width and click scale). Wordpress will rename the image and add an Suffix Id to the name so you can confirm the image have been scaled. for eg if you uploaded test.jpg after scaling image name will become test-randomstring.jpg

2. When I call get_the_post_thumbnail($post, 'full') I get the correct image The resized one i.e. test-randomstring.jpg

3. When I try to get a different size of the scaled image for eg I need thumbnail generated from the image size and I call function get_the_post_thumbnail($post, 'thumbnail') wordpress return the THUMBNAIL from actual image (the one I uploaded initially test.jpg and not the resized one test-randomstring.jpg)

Screenshot - https://i.stack.imgur.com/dAbdl.png

Answer 1

ALWAYS REGENERATE SOURCE SET ON IMAGE EDIT

(New material, especially the custom function, follows conversation in comment thread.)

The following function automatically regenerates a full source set after an image edit action.

/**
 * ALWAYS REGENERATE FULL SOURCE SET AFTER EDITING IMAGE
 * answering StackExchange WordPress Development Question
 * see: https://wordpress.stackexchange.com/questions/288581/image-scaling-using-get-the-post-thumbnail-issue-in-wordpress/
 * exploits code already worked out in Regenerate Thumbnails Plugin
 */
add_action( 'edit_attachment', 'wpse_always_regenerate', 99);

function wpse_always_regenerate( $postID ) {

    $new_url = get_attached_file( $postID );

    $metadata = wp_generate_attachment_metadata( $postID, $new_url );

    wp_update_attachment_metadata( $postID, $metadata );

}

You would add this to your theme functions.php file if that's what you wanted to occur - if you were happy with index number generated and added to the original image, and were happy with the complete source set being governed by the edited (re-scaled) image. It happens to leave the original upload and its set in the folder. (Adding an optionalized "cleaner" operation is something I haven't gotten into, but there are plugins that will clean up unattached/unused images from a folder already - one could be applied on a semi-regular basis.)

I have not tested it for possible unwanted additional interactions. In most installations, it wouldn't hurt, might even help, though I can imagine some circumstances in which you might NOT want all image edit actions to "regenerate thumbnails" (which probably ought to be named "regenerate source set"). For those installations, you'd obviously want something more refined.

---

FULL DISCUSSION

Though a little more clarity on the initial question and how exactly to reproduce it would be helpful, I believe the answer is something along these lines:

When you upload an image, WordPress will upload the full version of the image, along with the normal set of thumbnails. If you scale the image, it will also create one specific variation, with the random number addition. So, on one installation, when I upload an image as post featured image and proceed to re-scale it, I get the following in my Uploads folder:

If I ask for get_the_post_thumbnail( $postID, $type ), I get:

full :

<img 
    width="500" 
    height="651" 
    src="http://ckmswp.com/wp-content/uploads/2017/12/pingdom_topline_before-e1514050718361.jpg" 
    class="attachment-full size-full wp-post-image" 
    alt="" 
    sizes="100vw" 
/>

post-thumbnail :

<img 
    width="500" 
    height="651" 
    src="http://ckmswp.com/wp-content/uploads/2017/12/pingdom_topline_before-e1514050718361.jpg" 
    class="attachment-post-thumbnail size-post-thumbnail wp-post-image" 
    alt="" 
    sizes="100vw" 
/>

thumbnail :

<img 
    width="150" 
    height="150" 
    src="http://ckmswp.com/wp-content/uploads/2017/12/pingdom_topline_before-150x150.jpg" 
    class="attachment-thumbnail size-thumbnail wp-post-image" alt="" 
    srcset="https://ckmswp.com/wp-content/uploads/2017/12/pingdom_topline_before-150x150.jpg 150w, 
            https://ckmswp.com/wp-content/uploads/2017/12/pingdom_topline_before-100x100.jpg 100w" 
    sizes="100vw" 
/>

So, in scaling the image on upload, I create a new "full" version of the image - with the "random" code added to the original filename, and, since I was uploading it as a Featured Image, it is now also slotted as the 'post-thumbnail' image.

This can also be verified using wp_get_attachment_image_src(), which, for "full" on the above, returns:

(
    [0] => http://ckmswp.com/wp-content/uploads/2017/12/pingdom_topline_before-e1514050718361.jpg
    [1] => 500
    [2] => 651
    [3] => 
)

So, in short, if you call for one of the named images in the usual image set, you'll get the ones created before you scaled the image. If - assuming you scaled the image when uploading it as a featured image - you call for either the full image or the (in this installation) post-thumbnail image, you'll also get the new scaled image.

To get the original full image, I think you might have to access the attachment object, which looks like this:

[64755] => WP_Post Object
        (
            [ID] => 64755
            [post_author] => 1
            [post_date] => 2017-12-23 17:38:24
            [post_date_gmt] => 2017-12-23 17:38:24
            [post_content] => 
            [post_title] => pingdom_topline_before
            [post_excerpt] => 
            [post_status] => inherit
            [comment_status] => open
            [ping_status] => closed
            [post_password] => 
            [post_name] => pingdom_topline_before
            [to_ping] => 
            [pinged] => 
            [post_modified] => 2017-12-23 17:38:24
            [post_modified_gmt] => 2017-12-23 17:38:24
            [post_content_filtered] => 
            [post_parent] => 64752
            [guid] => **http://ckmswp.com/wp-content/uploads/2017/12/pingdom_topline_before.jpg**
            [menu_order] => 0
            [post_type] => attachment
            [post_mime_type] => image/jpeg
            [comment_count] => 0
            [filter] => raw
        )

)

If you wanted to get a 150x150 (or whatever is set for you installation for thumbnail) version of the scaled image, you'd have to either:

1) upload the scaled image separately, and let WordPress generate the test-image-random-150x150.jpg for you. or

2) Achieve a similar effect by "regenerating thumbnails."

After such a regeneration action, my uploads folder shows the following:

Note that the original image set is left unaltered in the folder.

Creating such a re-generated image set would be the preferable method especially if you intend to use the scaled image for other purposes, since re-uploading it and letting it generate the full source set of images appropriate to your installation will help with responsiveness and consistency.

To achieve those purposes, you'll need a custom function (such as the one provided at the outset of this answer), and a more complex, optionalized implementation might be worth considering, even though I'm not convinced it would be used very often. (When I want to scale an image to particular dimensions, I almost always do it separately from WP, and give it a name that makes sense to me, but I can't speak for others.)

If you wish to get a complete source set of images (relative to the new scaled image), and don't wish to re-upload the new scaled image, or rely on the function to do it for you whenever you edit an image in the Library, you can use Regenerate Thumbnails or similar plugin. Finally, you can also crop (or false crop) the image to produce the set of thumbnails.

This last one is easy to execute: In addition to re-scaling the image, in "edit image" you can use the cropping tool to produce a virtual near-copy of the original - and WordPress will produce the full source set when you save the image. I say near-copy because in tests the editor will not let you completely save a "copy" actually identical to the original, but at this point I have no choice but to examine the code in detail if I want to understand, and that's something I'll leave to another day and maybe write up somewhere else - unless someone else comes along with the full briefing first.

So, in sum,

1. When you first upload an image, WordPress creates a set of thumbnails based on the uploaded file.

2. If you simply re-scale the image, it will produce a single unique scaled image, with a generated filename based on the original name, with the addition of a "random" element (actually a heterogeneous index number)

3. If you re-upload the new scaled image or if you regenerate thumbnails - using a custom function, a plugin, or an editing trick - you can produce a new set of images based on the scaled image, using the generated filename.

Answer 2

Used img tag and display image

<img src="<?= $img_url=get_the_post_thumbnail_url($post->ID,'full'); ?>" alt="image" />

Answer 3

Use post-thumbnail instead of thumbnail. Your final code will be get_the_post_thumbnail($post, 'post-thumbnail');. Please refer to this link

Answer 4

You may want to try adding IMAGE_EDIT_OVERWRITE constant in your wp-config file to force WP to purge old images and use new ones.

Function wp_save_image() is what processes the image and it is called by wp_ajax_image_editor() which is the AJAX handler for image editor AJAX endpoints.

You can read more about how it works in file /wp-includes/image-edit.php or browse it's source code online @ https://developer.wordpress.org/reference/functions/wp_save_image/

However, I'm still not sure if this is really an issue,

1. Original image is say 1024x707
2. WP converts it to thumbnail size along with other sizes.
3. You get a thumbnail from that image that is 150x150.
4. You resize it to say 400x276.
5. Now thumbnail for that image would actually be identical to the thumb of first image.

So result is pretty much the same either way :)

Answer 5

You have to add the appropriate image size in your theme's functions.php file

add_image_size('my_post_thumbnial', 400, 99999, false);

400 is width, 99999 is height, false is do not crop. This must be "after" add_theme_support(post-thumbnails); so find that and place the above code after it.

You don't have to regenerate all your images... just re-upload the ones you need. Optionally, the Regenerate Thumbnails plugin (https://wordpress.org/plugins/regenerate-thumbnails/) adds a link to each image in your media library to regenerate that particular image.

Then call your thumbnail with the_post_thumbnail('my_post_thumbnial');