php WordPress媒体库在插入时裁剪图像,如标题图像裁剪器

bz4sfanl  于 2023-04-19  发布在  PHP
关注(0)|答案(1)|浏览(103)

我正在开发一个WordPress插件,它需要强制用户上传的图像是一个非常特定的比例,理想情况下具有尺寸1024 X 350用于页面标题。由wp.media(https://codex.wordpress.org/Javascript_Reference/wp.media)在定制器中提供的WordPress标题图像上传器具有一组很棒的功能,这些功能完全符合我的要求:
用户单击按钮以调出媒体模式:

用户选择他们的图像,然后单击“选择并裁剪”

然后用户将媒体模式中的图像裁剪到他们所需的尺寸,但媒体模式始终保持相对于所需裁剪的图像比例。
然后单击“裁剪”退出媒体模式,在媒体库中创建图像的副本,并提供裁剪后的版本以供在页面上使用。
问题是:* 此代码/流程是否可以使用wp_media对话框重新用于任何图像?*

nlejzf6q

nlejzf6q1#

WordPress媒体库在将图像插入到帖子或页面时没有内置的图像裁剪工具。但是,您可以使用插件或自定义代码来添加此功能。
一个流行的插件,允许您在插入时裁剪图像是“标题图像裁剪器”插件。该插件添加了一个裁剪工具到媒体库上传选择标题图像。但是,您可以修改插件代码,使其适用于所有图像。
以下是修改“Header Image Cropper”插件的步骤:
安装并激活“Header Image Cropper”插件。打开插件目录(wp-content/plugins/header-image-cropper/js)中的文件“header-image-cropper.js”。替换以下代码:

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

用这个代码:

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
                            }
                        });
                    }
                });
            }
        });
    },
    // ...
});

这段代码修改了“Header Image Cropper”插件,为所有图片添加裁剪工具,而不仅仅是头部图片。它使用“Cropper.js”库创建裁剪界面,并在插入图片时将裁剪细节发送到图片细节表单。
保存文件并通过将图像插入到帖子或页面中来测试修改后的插件。通过修改“标题图像裁剪器”插件,您可以向WordPress媒体库上传器添加裁剪工具,并使插入时更容易裁剪图像。

相关问题