Image Scaling using get_the_post_thumbnail issue in WordPress

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:

![enter image description here

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 150×150 (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-150×150.jpg for you. or

2) Achieve a similar effect by “regenerating thumbnails.”

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

enter image description here

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.

Leave a Comment