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

时间：2014-04-18 作者：isNaN

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

我想能够添加几个选项的形象实例。（“附件显示设置”下的详细信息）。比如一个复选框，上面写着“Responsive”，它禁用（灰显）图像大小下拉列表，或者固定页面位置的选项等。

在媒体管理器中选择/替换图像时，我可以使用添加一些自定义字段attachment_fields_to_edit 它是同级过滤器，但是这些字段附加到图像本身（或者图像附件post对象，如果你愿意的话），因此如果我在一个页面上有两个相同图像的实例，它们将共享我的自定义字段的相同值。

The wordpress replace image screen, annotated.

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

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

The Wordpress image details screen, annotated.

c）这显示了与前一屏幕相同的显示设置，但在Wordpress 3.9中单击图像顶部的“铅笔”时显示的不同。请注意attachment_fields_to_edit 此屏幕上根本不存在。

尽管我还没有完全了解主干网是如何工作的，或者修改wp的最佳实践是什么。媒体对象是，我对php、js和谷歌搜索答案都很在行。但这件事让我困惑了好几天，所以非常感谢您的帮助。

感谢阅读！

1 个回复

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

你对这个问题的分析完全正确，即使你使用的术语有点混乱。没有“图像实例”这样的东西：一旦将图像插入帖子，修改原始图像标题或标题（例如通过媒体菜单）将不会修改插入帖子的图像。要说服您，请单击“文本”选项卡并查看生成的HTML代码。

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

单击“插入到帖子”时，会从媒体模式获取数据以生成一些HTML代码：<img> 根据您选择的大小使用正确的源标记，标题为alt text，标题为caption（如果有）。此代码插入到TinyMCE编辑器的正确位置（通过“文本”选项卡查看）

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

TinyMCE view of the image

因此，如果要添加一些自定义数据（不要将其称为自定义字段，因为它未附加到任何附件帖子），则必须将其插入此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, _));

结果如下：

Responsive option in select sizes dropdown list

结束

小码农CODE

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

相关推荐