向图像实例添加更多选项。（附件显示设置）

我正在尝试在Wordpress 3.9中构建一个简单的可重用插件来进行图像演示，看来我遇到了麻烦。

我希望能够向图像实例添加几个选项。（“附件显示设置”下的详细信息）。就像说“响应式”的复选框会禁用（变灰）图像大小下拉菜单，或固定页面位置的选项等。

在媒体管理器中，选择/替换图像时，我已经能够使用attachment_fields_to_edit和兄弟过滤器添加一些自定义字段，但是这些字段会附加到图像本身（或者，如果需要的话，会附加到图像附件发布对象），所以如果页面上有两个相同图像的实例，则它们将共享我的自定义字段的相同值。

a）我添加的“自定义文本”字段，无法将其附加到实例，同一图像的所有实例都共享此值。

b）这是我要添加选项的区域，因为这里的所有内容似乎都遵循每个实例。

c）显示的显示设置与上一个屏幕相同，但是在Wordpress 3.9中单击图像顶部的“铅笔”时，显示的设置有所不同。请注意attachment_fields_to_edit，此屏幕上根本不显示给出的自定义选项。

即使我对骨干网的工作方式或修改wp.media对象的最佳做法尚不完全了解，但我对php，js和谷歌搜索都相当有能力。但是这一天让我难过了几天，所以任何帮助都将不胜感激。

谢谢阅读！

即使您使用的术语有点令人困惑，但您对问题的分析是完全正确的。没有诸如“图像实例”之类的东西：将图像插入帖子中后，修改原始图像标题或标题（例如通过“媒体”菜单）将不会修改插入帖子中的图像。为了说服您，请单击“文本”选项卡，并签出生成的HTML代码。

使用“添加媒体”按钮插入图像时，会发生以下情况：

1. 当您单击“插入后发布”时，将从媒体模态中获取数据以生成一些HTML代码：<img>标记，该标记具有正确的来源，具体取决于您选择的大小，标题为alt文本和标题（如果有）。这段代码会插入TinyMCE编辑器的正确位置（通过“文本”选项卡签出）

2. 在“视觉”选项卡中，将创建一个“视图”以表示视觉编辑器中的图像。该视图显示图像和两个按钮：编辑和删除。此视图使您可以在不触摸HTML代码的情况下直观地调整图像大小并更改其他一些参数。

因此，如果您想添加一些自定义数据（不要将其称为自定义字段，因为它没有附加到任何附件帖子中），则必须将其插入此HTML代码中，然后修改视图以允许可视地更改此数据。 。如果我很了解您的问题，则希望添加数据以特定的方式在页面上放置图像。您可以为此使用自定义类。

这是生成的HTML代码：

<img class="alignnone size-medium wp-image-10" src="http://myserver.com/wp-content/uploads/2014/08/opensource-300x259.gif" alt="opensource" width="300" height="259" />

并且您希望在大小下拉列表中有一个“响应式”选择，使代码看起来像：

<img class="alignnone size-responsive wp-image-10" src="http://myserver.com/wp-content/uploads/2014/08/opensource-300x259.gif" alt="opensource" />

这是实现此目的的方法：创建一个将在后编辑页面上加入新脚本的插件。

add_action( 'admin_enqueue_scripts', 'wpse16975_custom_image_view');
function wpse16975_custom_image_view($hook){
    if($hook == 'post.php'){
        wp_enqueue_script( 'custom_image_view', plugin_dir_url( __FILE__ ) . '/customView.js', array( 'media-views' ));
    }
}

然后，customView.js应该看起来像这样：

(function($, _){
    var media = wp.media;

    var origImageDetails = media.view.ImageDetails;
    media.view.ImageDetails = origImageDetails.extend({
        initialize: function() {
            origImageDetails.prototype.initialize.apply( this, arguments );
            this.on( 'post-render', this.responsiveSize );
            this.listenTo( this.model, 'change:size', this.setReponsiveSize );
            this.initSize = this.model.get('size');
        },

        responsiveSize: function(){
            // add a "Reponsive" option to the Size dropdown setting
            var $opt = $(document.createElement('option')).attr('value', 'responsive').text('Responsive');
            if(this.initSize == 'responsive') $opt.attr('selected', 'selected');
            this.$('.embed-media-settings select.size').append($opt);
        },

        setReponsiveSize: function(){
            // remove width and height
            if(this.model.get('size') == 'responsive') this.controller.image.set({width:null, height:null}, {silent:true});
        }

    });
}(jQuery, _));

结果如下：