vollyimnetz / crop-thumbnails Goto Github PK
View Code? Open in Web Editor NEW"Crop Thumbnails" made it easy to get exacly that specific image-detail you want to show. Crop your images the simple way.
License: GNU General Public License v3.0
"Crop Thumbnails" made it easy to get exacly that specific image-detail you want to show. Crop your images the simple way.
License: GNU General Public License v3.0
Not yet cropped by wordpress
should be
Not yet cropped by WordPress
crop-thumbnails/functions/editor.php
Line 79 in c4a41b9
Hello,
I'm using the Elementor plugin and when I open the media window from an Elementor block, the "Crop featured image" button doesn't work.
There seems to be a conflict between elementor and this plugin: the plugin's JS is not loaded in the DOM.
I've managed to fix this by combining the 'init' and 'wp_footer' hooks and using 'wp_enqueue_script':
wp_enqueue_script( 'crop-thumbnails', WP_PLUGIN_URL . /crop-thumbnails/app/main.js', array('jquery'), '1.0', true );
At this point, app/main.js returns an error: ajaxurl is not defined
Is there a clean way of making Elementor work (elementor works as an iframe) with this plugin (WP media modal is inserted at the root of the DOM)?
Thanks
Store the crop details in post meta and then hook into the thumbnail generation code to keep that crop position.
Hi @vollyimnetz,
Thanks for the great plugin, works great.
The only issue is that the cache busting technique being used is not reliable as query strings are easily ignored by a CDN (e.g. Cloudfront).
The best solution for this is to change the filename.
So instead of https://distro-id.cloudfront.net/path/to/file-600x600.jpg?cacheBreak=1560349238553
you would have https://distro-id.cloudfront.net/path/to/file-600x600_1560349238553.jpg
.
A more time-consuming solution would be to investigate support for plugins like WP Offload Media.
Is this something we can look into? Happy to help in any way.
Thanks!
CC: @tangrufus, @BufferOverNo, @JackAlexander1
WordPress's wp_calculate_image_srcset picks alternative resolutions by aspect ratio only, it doesn't check if an image size is "cropped" or not (unlike this plugin!). Thus, it might pick up a cropped version if it has the same ratio as the source image. This is usually unnoticeable as WordPress's default "automatically maximized" crop yields the original image. If you use this plugin to crop a thumbnail, the cropped version might might end up in the image's srcset (which should obviously not contain it, images in srcset should only differ in resolution/size).
To reproduce:
add_image_size('crop', 400, 300, true);
wp_get_attachment_image($id, 'crop');
-400x300
version shows up in the srcset
Possible workarounds:
wp_calculate_image_srcset_meta
; I tried this, but gave up due to complexity :|wp_get_attachment_image_src
explicitly :(Who's bug is this?
I have enabled a hard crop for my medium
and large
image sizes via a custom theme. This plugin currently only shows the thumbnail and custom images, would it be possible to add the default image sizes if crop is enabled?
Thanks!
Hello
Thanks for the great plugin !
I use https://fr.wordpress.org/plugins/force-regenerate-thumbnails/ and when images are regenerate, the croped images are reset to defaut wordpress crop (center).
Is it possible to keep the croped images intact ?
Thank you.
Hi, it is possible change original image path before cropping?
I like https://wordpress.org/plugins/squeeze/
It is plugin, which works 100% on local server. It compress image with sizes nad backup original file to NAME.bak.EXT
If you can add some filter for image path, I can add function, which will detect
Thank you.
When cropping a featured image (in the gallery it works, the problem occur in an article, for the featured image), the preview picture on the right side doesn't show.
So it is not possible to select the image making crop not possible.
This problem is new, but I cannot tell what version made the problem happen. No modifications of my website has been done, only updates.
Version : 0.10.15
Wordpress : 4.8.1
Thanks
I have been using the crop thumbnails plugin in my WordPress website for more than 4 years now and it has been working fine. I noticed that the plugin has stopped working for more than 1 month now.
We are using the WP Offload Media plugin to offload our media files to an external AWS S3 bucket.
When I click the Crop Featured Image button, the popup shows the thumbnail versions in 3 different sizes but for some reason when I select one of the image sizes for cropping, it keeps on loading the preview on the right side of the screen and it never loads.
We are using the 1.7.2 version of the plugin.
Please note we are using the Regenerate thumbnails plugin too.
Please note that my site is hosted in a PHP 8.1 version, Elastic Beanstalk load-balanced environment in AWS.
Hoping for a quick resolution from your end.
Thanks in advance,
Tony George Sam
Might be cool to check for the capability "edit_others_attachments" in order to check for providing the crop feature or not.
We have a scenario where authors might choose images from the media library but are not allowed to edit them further (strange, but hey). Now, they are still able to crop the images nonetheless.
Thanks for the plugin!
I need to get the attachment ID after an image is cropped. The crop_thumbnails_after_save_new_thumb
action looks like the best hook, but I don't see a way to get the attachment ID. I quickly modified the code in save.php to add an additional parameter to the updateMetadata
function called $imageId and included that parameter in the crop_thumbnails_after_save_new_thumb
action.
Is there a better way to accomplish this? I'd prefer to keep the plugin as-is if possible. Thanks again for the plugin!
There are various plugins that allow you to regenerate all of your WordPress thumbnails in bulk if you modify the sizes, quality, etc. It would be very helpful if the crop thumbnails plugin could save the crop information, and then use that same crop from regenerating a thumbnail.
Hi Volkmar
I'm never tired to flatter your plugin. Just great!
Not sure if you are open to suggestions, but here they go..
1.
For performance optimization, I think it would be helpful if we could lock the option "Group together" for the user, in the "Images with same ratio", when we want to. This way we would be sure that the client cropps all the images for the different src sizes we need.
As a solution, maybe adding image sizes with the same name but with an -2, -4, ... added to it? i.e:
add_image_size( 'Clipping', 0, 200, true );
add_image_size( 'Clipping-2', 0, 400, true );
add_image_size( 'Clipping-4', 0, 800, true );
and the behaviour in the crop would change.
2.
It would be nice to have a switcher in the Options to, instead of "Choose the image sizes you do not want to show", it would do the opposite: "Choose the image sizes you want to show".
It seems easier to organize and to maintain as we don't have to update all of them if we create a new image size.
And each user could chose how it would prefer.
Once again, thanks for the great plugin!
Problem:
Possible solution
style="overflow-y: scroll; -webkit-overflow-scrolling: touch;"
as attributes of <html>
element in html/template.php
to override the default iOS Safari behavior.Hi.
I think I've found an issue.
On one of the website I developped, an editor published a post with a featured image yesterday (May 31st).
Today (June 1st) when I crop the image, the plugin doesn't replace the original image.
I think that's because the original image was posted in May and the crops take place in JUne, so the folder is not the correct one.
Because I tried to upload the image again today and the crops worked without issue.
What do you think?
Hey,
first of all: Your plugin really makes a difference as it's really a much more userfriendly solution than other plugins out there, thanks!
I wonder what would be a good strategy to handle retina sizes image versions.
When adding image sizes with @2x suffixes, the plugin will list them for cropping.
so far, so good.
but when using more image sizes, the UI might get crowded with a lot of image sizes to handle.
sure, it will automatically select image sizes with the same aspect ratio but still, this doesn't tidy up the screen.
i tried to hide those image sizes by using
`add_filter( 'crop_thumbnails_image_sizes', function($sizes) {
$sizes = array_filter($sizes, function($size) {
return (strpos($size['id'], '@2x') === false);
});
return $sizes;
});`
but then, the related retina image sizes are no longer cropped automatically which will yield to unwanted results when displaying the retina images.
what do you think of having the possibility to automatically crop those retina sizes even though they are hidden (by a different filter maybe).
but even if this would work, what happens if those retina sizes are hidden and won't still get cropped if the size of the original uploaded image is not big enough to create the retina version. Maybe this is not a problem your plugin needs to handle but rather a general WP issue...
In Media Library when I hover on a media, the link “Crop Feature Image” shows 3 times.
the solution is to edit the functions/backendpreparer.php file on line 239-240.
This:
var last_span = $(this).find('.column-title .row-actions span:last-child');
must be changed like this:
var last_span = $(this).find('.column-title .row-actions > span:last-child');
The plugin is very useful and it's still working, if you update it with this little change it would be perfect, thanks!
We use this plugin for our crops, but after the update to v1.0 cropping started to fail, I've done some debugging and found that:
When you change the image size name via the image_size_names_choose
filter, the new cropper sends this customized image size title, instead of the image size name(slug) as the name
param to the wp-ajax action crop_thumbnails
. This causes a mismatch which fails to crop the selected image.
Example Ajax json-value:
{"selection":{"x":124.72647702407001,"y":0,"x2":457.33041575492337,"y2":333,"w":332.6039387308534,"h":333},"sourceImageId":91710,"activeImageSizes":[{"name":"thumbnail","width":150,"height":150,"ratio":1,"crop":true},{"name":"Square (1:1)","width":500,"height":500,"ratio":1,"crop":true},{"name":"Logo Thumb (1:1)","width":75,"height":75,"ratio":1,"crop":true}]}
Notice the Square (1:1)
and Logo Thumb
values, which should have been img-square
& img-thumb
The GetCropData()
method in the CropPostThumbnailsEditor
class (editor:#108) uses a non-existing variable $current_parent_post_type
:
$result['hiddenOnPostType'] = self::shouldBeHiddenOnPostType($options,$current_parent_post_type);
crop-thumbnails 1.4.0 and wordpress 5.8.3
When cropping WEBP images the crop is not saved like for JPEG or PNG.
Hi there,
first thanks for this great plugin,
I just need to activate crop thumbnail button on a option page,
I can see the button but the button is'nt active.
I tried the filter from documentation
add_filter('crop_thumbnails_activat_on_adminpages', function($oldValue) {
global $pagenow;
return $oldValue || $pagenow==='admin.php?page=theme-general-settings';
//for adding taxonomy edit-page to the list of pages where crop-thumbnails work
});
but no result,
can you help me on this ?
thanks
Regards
Hi, I like AVIF format with plugin https://wordpress.org/plugins/webp-uploads/
Plugin can convert jpg files to webp or avif on local server and serve picture html element with source tag with jpg fallback.
Plugin is minimal ( only some settings in Settings -> Media ) and in maintained by WP performance team.
But with your plugin not working. If I crop image, cropping jpg is ok, but AVIF image is same.
Thank you.
Fantastic plugin!
But on my server I use ImageMagick and use this plugin to force WordPress to use it:
https://wordpress.org/plugins/imagemagick-engine/
However, when I re-crop the images with your plugin, the images lose quality.
Is there a way to make your plugin use ImageMagick? This way the images look better for the same file size.
I'm using this plugin mostly for post thumbnails, but now i want the article image to refresh after beeing cropped. If i save the post, the thumbnail is saved correctly and the page displays the correct size.
But if I reopen the edit page, the original thumbnail is shown in the meta-box and the user has to assume that he has to re-crop the image.
In the readme.txt
you wrote something like
$('body').on('cropThumbnailModalClosed',function() {
CROP_THUMBNAILS_DO_CACHE_BREAK( $('.your-image-selector') );
});
But this won't help me as I won't touch the wordpress core code. Is there any other possibility?
This would be such a great feature. wp media regenerate is a core command so that it would be logical to support it.
It would allow to freely regenerate thumbnails without worrying about losing crop placement data.
I know this is similar to #39 but I would like to hear if this is something that would be possible?
Thanks for a great plugin!
I'm guessing the necessary javascript is only executed on the backend while the Bricks builder is executed on the front end. I'd appreciate if you could execute the necessary code on the front end as well when Bricks builder is running. This can be done using the bricks_is_builder() function.
The crop functionality doesn't seem to be working on taxonomy edit pages.
WooCommerce has thumbnails that use could this functionality and in my use case, i have ACF image fields on taxonomies.
I managed to resolve this by adding 'term.php'
to the $result
filter in the shouldCropThumbnailsBeActive()
function of backendpreparer.php
.
I'm not sure if this is the extent of the fix but it seems to work...
To bust CDN caches, I generate a new file name after each thumbnail cropping using the crop_thumbnails_filename
filter:
add_filter('crop_thumbnails_filename', function (string $fileName, $file, $width, $height, bool $crop): string {
if (! $crop) {
return $fileName;
}
$extension = pathinfo($fileName, PATHINFO_EXTENSION);
$date = new DateTimeImmutable();
return sprintf(
'%s-%s.%s',
rtrim($fileName, '.' . $extension),
$date->getTimestamp(),
$extension
);
}, -10, 5);
However, when I repeatedly crop the thumbnails, the latest thumbnails work but old thumbnails are not being removed from the server.
Looks like
crop-thumbnails/functions/save.php
Lines 57 to 58 in d4151d8
Am I using crop_thumbnails_filename
incorrectly?
WordPress v5.5.1
Crop-Thumbnails v1.2.6
I'm finding that the settings to hide crop sizes by post type is not being honored. It seems that the shouldSizeBeHidden method of the CropPostThumbnailsEditor class uses the image size IDs in the options parameter, but checks against image size name. So it's using:
if(!empty($options['hide_size'][$post_type][ $img_size['name'] ]))
when I think it should be:
if(!empty($options['hide_size'][$post_type][ $img_size['id'] ]))
Thanks.
Hello,
Someone in the Support page of WebpExpress proposed to add these line to /save.php, to make it compatible with WebP.
if(file_exists($currentFilePath . “.webp”)){ unlink($currentFilePath . “.webp”); }
after line 73 of the save.php
I wanted to know what you think and if you had maybe a better idea to make your plugin compatible with WebP-Express.
Thank you :)
I found that I was having the same issue that was reported here https://wordpress.org/support/topic/saved-the-wrong-cropped-area/ where the actual crop does not match the editor. Upon further experimentation I discovered that it only happens when super large images with dimensions above 2650 are uploaded. I guess it's related to WordPress scaling them down starting in 5.3 although I think that feature may have changed since then. I did not find anything in releases after 5.3 talking about that feature, but I did not see any "-scaled" image being created for new images I am testing with.
Either way, it is only a problem for images larger than 2560. I came across this when registering additional image sizes so that I can upload one big image and only output different crop sizes on the frontend where needed. Here is a test image much larger than 2560 to demonstrate. The full image dimensions are listed in the inspector, and in the crop editor they are listed as 2560x1707:
It would be really cool if you could zoom (perhaps using mouse wheel) before cropping.
Hi, we use this plugin on a WordPress that is behind a few caching layers (CloudFlare CDN is the big offender here), and when a user re-crops an image, the image doesn't update on the site unless we manually go in and flush the cache.
I would like to suggest that you add a random number or string to the cropped image's filename, so that it basically busts itself.
For example, a current file name looks like:
/uploads/2017/07/BannerImage-768x642-1-1024x605.png
I would like to see it like this:
/uploads/2017/07/BannerImage-768x642-1-1024x605-1510786859.png
This would also eliminate the need for having the JavaScript cache-busting code
Since WordPress 5.8 the image_editor_output_format hook makes it possible for generated thumbnails (sub-sizes) to be of a different image format than the original image. This is part of WordPress adding support for WebP, and eventually will also include other formats such as AVIF and JPEGXL.
This plugin currently fails silently and will not generate images if the MIME-type of the original image doesn't match that which is overridden by the image_editor_output_format
hook.
I can't seem to get the plugin to work. Or, rather, the cropping process works fine on featured images...but the results don't display on my home page, where the posts are listed.
I have done ctrl-F5 to refresh the cache. I'm using Avatar as a theme with Elementor for layout control.
Thoughts?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.