10

I'm working on a WordPress plugin that needs to force the images uploaded by a user to be a very specific proportions and ideally have the dimensions 1024 X 350 for use on the header of a page. The WordPress header image uploader provided by wp.media (https://codex.wordpress.org/Javascript_Reference/wp.media) in the Customizer has a great set of features that work exactly the way that i am looking for:

User clicks on a button to bring up the media modal: Media Modal

User chooses their image and then clicks "select and crop" select and crop

user then crops the image in the media modal to their desired dimensions BUT the media modal always maintains the image proportions relative to the desired crop. enter image description here

Clicking Crop then exits the media modal and creates a copy of the image in the media library and provides the cropped version for use on the page.

The question is: can this code/flow be repurposed to work on any image using the wp_media dialogue box?

Yash
  • 1,020
  • 1
  • 15
dpegasusm
  • 620
  • 2
  • 7
  • 20
  • 1
    If you have not figured this out you might want to ask in the Wordpress stack site instead of stack overflow – JpaytonWPD Dec 04 '16 at 15:09
  • 1
    I've added it here: https://wordpress.stackexchange.com/questions/281760/using-media-uploader-to-select-image-of-specific-size-enforce-cropper – Vivek Athalye Oct 03 '17 at 14:24

1 Answers1

0

WordPress Media Library does not have a built-in image cropping tool when inserting images into posts or pages. However, you can use a plugin or custom code to add this functionality.

One popular plugin that allows you to crop images on insert is the "Header Image Cropper" plugin. This plugin adds a cropping tool to the media library uploader for selecting header images. However, you can modify the plugin code to make it work for all images.

Here are the steps to modify the "Header Image Cropper" plugin:

Install and activate the "Header Image Cropper" plugin. Open the file "header-image-cropper.js" located in the plugin directory (wp-content/plugins/header-image-cropper/js). Replace the following code:

media.view.HeaderImageCropper = media.View.extend({
    // ...
});

with this code:

media.view.HeaderImageCropper = media.View.extend({
    initialize: function() {
        var self = this;
        this.listenTo(this.controller, 'imageDetails', function(){
            if ( 'image' === self.controller.get('selection').first().get('type') ) {
                self.cropper = new Cropper( self.$('.attachment-details .thumbnail'), {
                    aspectRatio: 16 / 9,
                    crop: function(event) {
                        var imageData = self.cropper.getData();
                        self.controller.trigger('updateDetails', {
                            cropDetails: {
                                x: imageData.x,
                                y: imageData.y,
                                width: imageData.width,
                                height: imageData.height
                            }
                        });
                    }
                });
            }
        });
    },
    // ...
});

This code modifies the "Header Image Cropper" plugin to add a cropping tool to all images instead of just header images. It uses the "Cropper.js" library to create the cropping interface and sends the cropping details to the image details form when inserting the image.

Save the file and test the modified plugin by inserting an image into a post or page. By modifying the "Header Image Cropper" plugin, you can add a cropping tool to the WordPress Media Library uploader and make it easier to crop images on insert.

Shubham Vijay
  • 78
  • 6