强制文档显示在特色图像对话框中

时间:2020-06-03 作者:Tony Djukic

有一个令人困惑的问题。。。对于一个名为“资源”的自定义帖子类型,我在WordPress中使用了“特色图片”或“缩略图”功能,允许用户将文档附加到“资源”中。该过程本身的工作完全符合预期和预期。

然而,在设置网站时,有人犯了一个错误,上传了两个文档,并将它们分配给了错误的“资源”。所以Resource A -> Document BResource B -> Document A.

当尝试切换它们并单击“编辑特色图像”时,您将无法看到任何文档。他们单击“删除特色图像”,然后单击“设置特色图像”,当对话框打开时,仍然没有文档。

在Wordpress媒体库中,所有上传和附加的文档都在那里。如预期的那样,可见,具有预览等。这是媒体库的前两行。您可以看到大量已成功上传的PDF。Media Library

这个问题出现的唯一地方是,在实际的“特色图片”媒体对话框中,WordPress不会显示任何PDF。

以下是CPT支持部分:

$rsc_supports = array(
     \'title\',
     \'editor\',
     \'thumbnail\',
     \'page-attributes\'
);
就像我说的,一切都很完美——甚至上传和附加PDF作为“缩略图”,作为CPT的附件。附加PDF后,您“单击编辑”对话框打开,您可以在列表中看到附加的PDF。唯一的缺点是加载的“特色图像”模式/弹出窗口/对话框旨在过滤除图像以外的所有内容。这就是“资源”上没有任何附件的对话框的外观。Featured Image Dialogue

但是,如果您查看另一个已附加PDF的资源,则会得到以下结果:With PDF Attached

我尝试过过滤和日期下拉列表,但他们没有解决这个问题。

我相信这是故意的。所以我的问题是,"How do I modify that dialogue box to display all files rather than just images?"

2 个回复
最合适的回答,由SO网友:Sally CJ 整理而成

所以这可能有点骇人

我的意思是,与overriding the default Featured Image panel/component in the Gutenberg block editor, 这并不是很难,但这个要简单得多,基本上只需要几行自定义编码。(读到最后才明白我的意思)

我也尝试过&;在WordPress 5.4.2(写作时的最新版本)和WordPress 5.4.1上测试了它的工作能力(使用旧/经典编辑器和Gutenberg块编辑器)。

因此,对于您尝试执行的操作,您可以覆盖wp.media.model.Query.prototype.sync() (定义见wp-includes/js/media-models.js) 这是默认特征图像模式用于通过AJAX查询附件的功能(admin-ajax.php?action=query-attachments).

完整(JS)代码

wp.media.model.Query.prototype.sync = function( method, model, options ) {
    var args, fallback;

    // Overload the read method so Attachment.fetch() functions correctly.
    if ( \'read\' === method ) {
        options = options || {};
        options.context = this;
        options.data = _.extend( options.data || {}, {
            action:  \'query-attachments\',
            post_id: wp.media.model.settings.post.id
        });

        // Clone the args so manipulation is non-destructive.
        args = _.clone( this.args );

        // Determine which page to query.
        if ( -1 !== args.posts_per_page ) {
            args.paged = Math.round( this.length / args.posts_per_page ) + 1;
        }

        if ( wp.media.frame && \'featured-image\' === wp.media.frame.options.state ) {
            // Here I\'m allowing image and PDF files only.
            args.post_mime_type = \'image, application/pdf\';
        }

        options.data.query = args;
        return wp.media.ajax( options );

    // Otherwise, fall back to `Backbone.sync()`.
    } else {
        /**
         * Call wp.media.model.Attachments.sync or Backbone.sync
         */
        fallback = Attachments.prototype.sync ? Attachments.prototype : Backbone;
        return fallback.sync.apply( this, arguments );
    }
};
但我在那里添加的唯一一件事是这个条件块:

if ( wp.media.frame && \'featured-image\' === wp.media.frame.options.state ) {
    // Here I\'m allowing image and PDF files only.
    args.post_mime_type = \'image, application/pdf\';
}
检查当前打开的模式是否为特征图像模式,如果是,则修改post_mime_type argument 定义要查询的附件的MIME类型。

这就是如何使用这种方法来强制特色图像模式包括图像以外的文件。

PHP代码示例(向其他读者)于6月13日更新media-models 脚本,这是因为我们正在重写该脚本中的某些内容,因此如果当前页面上没有加载该脚本,则无需对自定义脚本进行回显/排队。:)

以下是我用来在后期编辑屏幕上响应页脚脚本的PHP代码postpage 职位类型:

add_action( \'admin_print_footer_scripts\', function () {
    $screen_ids = [ \'post\', \'page\' ];
    if ( in_array( get_current_screen()->id, $screen_ids ) &&
        wp_script_is( \'media-models\' ) // check if media-models.js was enqueued
    ) :
        ?>
            <script>
                // See/copy the FULL code above and place it here..
            </script>
        <?php
    endif;
} );
如果将脚本放在外部JS文件中,还应确保media-models 脚本已排队:

add_action( \'admin_enqueue_scripts\', function () {
    $screen_ids = [ \'post\', \'page\' ];
    if ( in_array( get_current_screen()->id, $screen_ids ) &&
        wp_script_is( \'media-models\' ) // check if media-models.js was enqueued
    ) {
        wp_enqueue_script( \'my-script\', \'/path/to/my-script.js\', [], \'\', true );
    }
} );

SO网友:Ahmad Wael

你试过这个插件吗PDF Thumbnails ?

此插件从上载文档的第一页生成缩略图,并将其命名为PDFNAME缩略图,然后您可以将此图像用作特色图像。这个插件大约4年前就过时了,所以请确保测试和兼容性。

相关推荐

从媒体上传器(wp.media)模式使用POST元过滤媒体

我想有一个媒体上传模式,只显示具有特定post meta的图像媒体,比如“my\\u image\\u meta”。我怎样才能做到这一点?这是我的实际代码,它只是过滤图像: var mediaUploader; var $inputVal = $(\'input[name=\"geoposts_overlay_ids\"]\'); var $inputBt = $(\'#geoposts_overlays_select\'); $inputBt.cli