在媒体管理器中将所选图像显示在顶部

时间：2013-08-26 作者：Ogier Schelvis

我已经搜索了许多StackOverflow和Wordpress Awners的问题，但我找不到任何与我的情况相匹配的解决方案，甚至无法为我指明正确的方向。

我的插件中有一个自定义媒体框，我从大约3000幅图像的媒体库中预先选择了某些图像。但是，默认情况下，这些预先选择的图像不会在列表顶部排序，这会导致您在浏览列表数小时后才能找到所选图像。简言之，我希望这些是最重要的。我有他们的身份证。

我在媒体模型中发现了这一点。js代码所在：

Query = media.model.Query = Attachments.extend({ ...

它处理介质管理器中显示的附件的查询/排序。

我试着在我的主插件javascript文件中这样扩展它

wp.media.model.Query = wp.media.model.Attachments.extend({ ...

这并没有给我任何结果，还有许多其他与我的情况相似的建议。现在我已经不知道该如何解决这个问题了。有人能给我指出正确的方向吗？

<小时>EDIT: 嗯，我已经能够影响我的媒体框架提出的问题。

在我看来。js在我的插件中我现在这样做：

file_frame = wp.media.frames.file_frame = wp.media({
    id: \'multi_image\',
    title: \'Select images\',
    button: {
        text: \'Use selected images\'
    },
    library: {
        type: \'image\', post__in:[3322,3323,3324,3325,3326,3327,3328]
    },
    multiple: true,
});

这样，我可以只显示具有特定id的图像附件来显示媒体框。但是，我还想显示其余的附件，只显示顶部的选定图像。因此，我需要通过使用post\\u not\\u in而不是post\\u in进行新查询来组合此查询的结果，或者通过对附件进行自定义排序来赋予这些id优先级的附件。我不知道怎么做。我能传递给图书馆的论点似乎仅限于我自己。

2 个回复

最合适的回答,由SO网友:Ogier Schelvis 整理而成

在读了主干之后。js文档我发现，通过ID手动将附件添加到媒体框库中非常容易。

您只需在打开事件上为库指定一个引用即可。然后创建一个wp实例。媒体附件把它拿来。然后对库引用调用add函数并传递附件。我把我的附件id放在一个数组中，然后像这样循环：

file_frame.on(\'open\',function(){

        var lib = file_frame.state().get(\'library\');
        for (var i=0;i<ids.length;i++){
            var attachment = wp.media.attachment(ids[i]);
            attachment.fetch();
            lib.add(attachment);
        }
});

EDIT: 此外，我遇到了一个问题，排序有时会出错，我的一些附件没有放在列表的顶部。所以，为了确保他们做到了，我像这样重写了库的comparator函数，以强制在ID上进行比较。它以前是get（key），但我把它变成了get（\'id\'）：

lib.comparator = function ( a, b, options ) {
                var key   = this.props.get(\'orderby\'),
                order = this.props.get(\'order\') || \'DESC\',
                ac    = a.cid,
                bc    = b.cid;

            a = a.get( \'id\' );
            b = b.get( \'id\' );

            if ( \'date\' === key || \'modified\' === key ) {
                a = a || new Date();
                b = b || new Date();
            }

            // If `options.ties` is set, don\'t enforce the `cid` tiebreaker.
            if ( options && options.ties )
                ac = bc = null;

            return ( \'DESC\' === order ) ? compare( a, b, ac, bc ) : compare( b, a, bc, ac );
        }

然而，它会抱怨比较函数没有定义。因此，我只是宣布它自己是一样的，因为它是在可湿性粉剂。媒体：

compare = function( a, b, ac, bc ) {
        if ( _.isEqual( a, b ) )
            return ac === bc ? 0 : (ac > bc ? -1 : 1);
        else
            return a > b ? -1 : 1;
    };

在向库中添加新附件之前，需要设置此比较器。因为否则问题会持续存在。

SO网友:Peter Rigby

我需要为我正在开发的插件做到这一点，并根据Ogier所做的发现了一个稍微不同的解决方案（这为我指明了正确的方向，谢谢！）

使用Ogier提供的代码，我发现即使使用额外的比较器代码，所选图像也不会显示在顶部，因此在对核心进行了一点挖掘之后，特别是对特征图像的代码，我找到了他们用于此的比较器，它似乎工作得很好。

您可以在wp-includes/js/media视图中找到FeaturedImage控制器。js，我从那里获取了比较器代码，最终得到（代码片段）：

$(\'.quote-items\').on(\'click\', \'.quote-edit-image\', function (e) {
    e.preventDefault();

    var id = $(this).attr(\'id\');
    var index = $(this).attr(\'data-index\');

    var images = quote.get_product_gallery(index);

    file_frame = wp.media.frames.file_frame = wp.media({
        title: \'Title\',
        button: {
            text: \'Select\',
        },
        multiple: false,  // Set to true to allow multiple files to be selected
    });

    file_frame.on(\'open\', function () {
        var lib = file_frame.state().get(\'library\');

        lib.comparator = function( a, b ) {
            var aInQuery = !! this.mirroring.get( a.cid ),
                bInQuery = !! this.mirroring.get( b.cid );

            if ( ! aInQuery && bInQuery ) {
                return -1;
            } else if ( aInQuery && ! bInQuery ) {
                return 1;
            } else {
                return 0;
            }
        };

        images.forEach(function(id){
            attachment = wp.media.attachment(id);
            attachment.fetch();
            lib.add( attachment ? [ attachment ] : [] );
        });
    });

    file_frame.on( \'select\', function() {
      // We set multiple to false so only get one image from the uploader
      attachment = file_frame.state().get(\'selection\').first().toJSON();

      $(\'#\' + id +\' img\').attr(\'src\', attachment.sizes.thumbnail.url);
    });

    file_frame.open();
});

请注意，我对比较器进行了轻微的编辑，以避免使用未定义的比较函数，如果需要，可以随时定义该函数。

结束

小码农CODE

在媒体管理器中将所选图像显示在顶部

相关推荐

Why is this Ajax not working?