Restrict user to crop image on selecting featured image using wordpress media editor

Question

I am trying to restrict user to select featured images only in an aspect-ratio like 2:1 or 6:9 and for that I tried to find any Wordpress hook which runs after selecting featured image but couldn't find anything, is there any hook or script so I can call "Crop image" function of wp.media after selecting post feature image.

Just like favicon, when we select any image as favicon it forces the user to crop the image in 1:1 ratio on the time of selecting image in customize area

I tried with custom code but it couldn't work

If you want an answer showing you how to do this we need to see your code. However, assuming users are selecting the images in `input type="file"` controls, then you can easily [read the file data and load it in to an `` tag](https://stackoverflow.com/q/4459379/519413) to [ascertain its dimensions](https://stackoverflow.com/q/623172/519413) before [cropping it](https://stackoverflow.com/q/12728188/519413) — Rory McCrossan, Sep 23 '19 at 15:34
@RoryMcCrossan, I mentioned the tags, I am working on wordpress admin panel and I am looking for any wordpress hook for that. — Pattrick, Sep 23 '19 at 15:41

score 0 · Answer 1 · answered Sep 23 '19 at 15:52

What you want is add_image_size - this will allow you to add your own image size (like "widescreen" or "2x1") and set your own dimensions and aspect ratio (including cropping). Then, when you want the image to appear, you call your image size.

Here's a whole bunch of info/examples on how to use it.

Pattrick · Accepted Answer · 2019-10-01T07:37:49.223

I tried to find any hook to restrict the user to upload the featured image only in the expected aspect ratio but I couldn't but it's done by jQuery and wp.media library, first I checked the image ratio with jquery and then use below code to open image editor popup to edit the image, here is my code snippet:-

$(document).on('click','#edit-thumb-ratio',function(e){
        e.preventDefault();

        feature_uploader = wp.media.featuredImage.frame();

        feature_uploader.on('open', function() {
            var selection = feature_uploader.state().get('selection');
            $('.media-frame-content').append('<div class="imgedit-wait" id=""></div>')
                      //   //remove all the selection first
            selection.each(function(image) {
                var attachment = wp.media.attachment( image.attributes.id );
                attachment.fetch();
                selection.remove( attachment ? [ attachment ] : [] );
            });

                      //   //add back current selection, in here let us assume you attach all the [id] to <div id="my_file_group_field">...<input type="hidden" id="file_1" .../>...<input type="hidden" id="file_2" .../>
            $("#postimagediv").find('input[type="hidden"]').each(function(){
                 var input_id = $(this);
                if( input_id.val() ){
                    attachment = wp.media.attachment( input_id.val() );
                    attachment.fetch();
                    selection.add( attachment ? [ attachment ] : [] );
                }
            });
            $('.imgedit-wait').show();
                setTimeout(function(){
                        $('.attachment-info .edit-attachment').trigger('click');
                },1000);                    
        });
        feature_uploader.on('select', function() {
            delete feature_uploader;
        });
        feature_uploader.open();
    });

Restrict user to crop image on selecting featured image using wordpress media editor

2 Answers2