4

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

enter image description here

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

  2. 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.imgur.com/sQKoZcF.png

  • Did you try to regenerate thumbnails? – Arsalan Dec 14 '17 at 6:53
  • Image regeneration would supposedly work but is not the correct solution I have over 20,000 images on my site and everytime I scale an image regenrating thumbnail might not be a correct solution unless I can do it with some hook for eg everytime the image is scaled regenerate thumbnails but even in that case it would be a very time consuming task to regenerate 20,000 images everytime – June Dec 14 '17 at 7:24
  • Can you give us the dump of wp_get_attachment_metadata(get_post_thumbnail_id($post->ID)); – Elex Dec 19 '17 at 17:50
  • @Jean-RémiLARCELET-PROST I have multiple custom fields where I am fetching all these images , resizing theme to a custom size I registered with add_custom_size Dump is on this url goo.gl/aJn9j6 scroll to very bottom – June Dec 20 '17 at 11:53
4
+25

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

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.

  • Using an external editor for image doesn't make sense when wordpress have an inbuilt image editor. the perfect behavior should have been 1. Upload image, crop image from wordpress 2. Wordpress generate a new image for eg image-6876876876.jpg and return the id of this image 3. Now When I call get_the_post_thumbnail( $postID, $type ) I get the scaled size of image-6876876876.jpg – June Dec 24 '17 at 6:42
  • Also 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) So for me this scaled image different size is not returned when I call get_the_post_thumbnail – June Dec 24 '17 at 6:58
  • Right - the built in image scaler has limited utility, and also produces an arguably misleading entry in the Media Library, since it shows the scaled image, but leaves the thumbnails unaltered. The next question would be how it handles thumbnail regeneration. So, I'll check. It will be easiest to use a plugin. – CK MacLeod Dec 24 '17 at 7:31
  • If you use the popular Regenerate Thumbnails plugin, it will regenerate a new set of thumbnails based on the scaled image - filename-[random-number]-[dimensions].extension. It uses the function wp_generate_attachment_metadata if you wish to write a custom function rather than rely on the plugin or others like it. – CK MacLeod Dec 24 '17 at 7:53
  • (answer amended) – CK MacLeod Dec 24 '17 at 8:09
2

Used img tag and display image

<img src="<?= $img_url=get_the_post_thumbnail_url($post->ID,'full'); ?>" alt="image" />
  • I know how to display an image , I am pointing a bug in wordpress image retrieve function – June Dec 14 '17 at 7:20
2

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

  • Thumbnail was just for reference I have registered a custom size , now I am calling that custom size , there is no way to detect if the image was scaled , so I can toggle between post-thumbnail and my-custom-size I have custom fields (more than 1) – June Dec 20 '17 at 11:43
  • I don't think so that wordpress will generate the images of exact size i.e. 150x150. Please, pass the dimensions in array form. like get_the_post_thumbnail($post, array(150, 150)); – BlueSuiter Dec 20 '17 at 11:52
  • How would I know when to call the image-size and when to call this because all the images that will be uploaded will not needed to be cropped. For eg I uploaded an image with model , I will need to just show his leg wearing the jeans so I will crop the image , now when I call the wp_get_attachment_image( $image_id , 'custom-size' ) wordpress is returning actual image and not cropped one whereas in another scenario I uploaded an image with jeans only and I do not need that cropped I get correct image – June Dec 20 '17 at 12:00
  • May be for the particular uploaded image thumbnail was never generated of custom-size. I suggest to regenerate thumbnail files once. You can use regenerate-thumbnails plugin for regenerating thumbnail images. wordpress.org/plugins/regenerate-thumbnails – BlueSuiter Dec 20 '17 at 12:05
  • I have over 50,000 images and doing this everytime will not be a good idea, so I upload at the very least 80 new images every day some I scale using wordpress image editor and for others no scaling/cropping is required – June Dec 20 '17 at 12:07
2

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 :)

  • Imagine image have been cropped and not resized ,and I am looking to fetch thumbnail from the Cropped image , is it possible ? – June Dec 22 '17 at 7:52
  • Yeah, in that case it should be helpful... Let me know how it goes after adding IMAGE_EDIT_OVERWRITE in your WP conf file ;) – shramee Dec 23 '17 at 20:13
  • wen u define( 'IMAGE_EDIT_OVERWRITE', true ); to your wp-config.php the behaviour changes. When you edit an image, it ]creates a new image and leaves the original image alone. But when you edit again, it overwrites the first set of images rather than create a new set read more here My issue is wordpress is not returning the cropped image for eg photo-e1430240013837-1024x1024.jpg photo-e1430240013837-150x150.jpg photo-e1430240013837-300x300.jpg photo-e1430240013837.jpg when I need to call 1024*1024 image edited – June Dec 24 '17 at 6:37
2

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

  • 1
    I already understand how to add an image size, my question is regarding cropping image using wordpress image editor tool. Please re-read my question – June Dec 24 '17 at 6:32
  • Sorry, I did misread. Hope you get it worked out. – Ted Dec 28 '17 at 23:32

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.