I'm working on my theme and I was able to override the default thumbnail options using this code:

update_option( 'thumbnail_size_w', 320 );
update_option( 'thumbnail_size_h', 180 );

While the thumbnails are now properly sized, sometimes they don't look very nice as they simply crop from the middle.

As such, I would like to be able to make custom crops when this happens. To do so, I go in Media > Library > Click "Edit" below an image > Edit Image

There, I have a panel which allows me to crop the image as I want by clicking the Apply changes to thumbnail option.

However, there are a few issues...

First, it creates a new image instead of overwriting the old one, this pretty much wastes disk space needlessly. Not only that, since the file is entirely new, it seems like the image doesn't get updated on the page (it points to the same filename as before).

This is the code that I use to display the image:

the_post_thumbnail('thumbnail', ['class' => 'featured-post-image']);

Secondly, sometimes I simply can't get a good crop from the image because it's too big. So I scale it down to apply the crop afterward. However, as soon as I scale it down it seems to create a new file again and the library now points to this new image. The old image is still in the folder though and I would rather not create a new image from this scale down and keep the default image as it is.

So I would like to know if this can be done and if this isn't too complex to do through coding, I would really prefer doing so than adding plugins.


The answer is to not generate more image dimensions (and your theme overriding user settings is a big no no), but to select the best fitting image bt size and apply css based stretching and cropping by wrapping the img element with a span.

The to the img you use whatever is the best fit, and then by using a combination of relative positioning in the span and changing the image size you can get whatever effect you want.

This is really just a "view port" technique that is as old as CSS, the only wordpress specific part is to pass to the sizes that you want to the_post_thumbnail as the first parameter.

The gotcha with this is that obviously if wordpress gives you a cropped image you can't "uncrop" it, and you will have to add your own image size setting for that.

  • Well each image is quite different and the "good" part of the image can be at multiple different places... For example, I can have images that are 640x640 by default, others 1280x1920 whereas I want to show only a part of that image. Having a different position for each of the image depending on what I would like to show is a rather huge no? – Dacramash Aug 26 '16 at 15:42
  • If the part you want to show is random, then the only way to do it is to have a user manually crop the images @Dacramash – Mark Kaplun Aug 26 '16 at 15:48
  • Yes, this is what I want to do. However, as I've explained, my problem lies in how WordPress keeps creating new files instead of overwriting the old files, how I can't seem to scale an image only to crop it, without creating a new image of this scaled down size & the thumbnail code generated after my crop. – Dacramash Aug 26 '16 at 15:52
  • OK, not sure how exactly my answer do nor answer your question @Dacramash. This is exactly how you avoid generating more images – Mark Kaplun Aug 26 '16 at 15:54
  • I have found this stackoverflow.com/questions/25384046/… which is very similar to my case... Except that the solution given doesn't work and it doesn't cover the part about the scaling before cropping without overriding the default file – Dacramash Aug 26 '16 at 15:57

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.