Adicionando mais opções à instância de uma imagem. (Configurações de exibição de anexos)

Estou tentando criar um plugin reutilizável simples para apresentação de imagens no Wordpress 3.9, e parece que bati em uma parede de tijolos.

Gostaria de poder adicionar algumas opções à instância da imagem. (Os detalhes em "Configurações de exibição de anexos"). Como uma caixa de seleção que diz "Responsivo" que desativa (esmaece) a lista suspensa de tamanho da imagem ou opções para posições fixas da página etc.

No Media Manager, ao selecionar / substituir uma imagem, pude adicionar alguns campos personalizados usando attachment_fields_to_edite seus filtros irmãos, no entanto, esses campos são anexados à própria imagem (ou ao objeto de postagem do anexo da imagem, se você desejar), portanto se eu tivesse duas instâncias da mesma imagem em uma página, elas compartilhariam o mesmo valor do meu campo personalizado.

a) No campo Texto personalizado que adicionei, não consigo anexar isso à instância, todas as instâncias da mesma imagem compartilham esse valor.

b) Essa é a área em que gostaria de adicionar opções, pois tudo aqui parece seguir cada instância.

c) Isso mostra as mesmas configurações de exibição da tela anterior, porém é apresentado de forma diferente ao clicar no "lápis" na parte superior de uma imagem no Wordpress 3.9. Observe como as opções personalizadas fornecidas por attachment_fields_to_editnão estão presentes nesta tela.

Mesmo que eu não tenha entendido completamente como funciona o backbone, ou quais são as melhores práticas para modificar os objetos wp.media, sou bastante competente com respostas em php, js e no Google. Mas este me deixou perplexo por alguns dias, então qualquer ajuda é muito apreciada.

Obrigado pela leitura!

Você está perfeitamente certo sobre a análise do problema, mesmo que os termos que empregar sejam um pouco confusos. Não existe uma "instância da imagem": depois de inserir uma imagem em uma postagem, a modificação do título ou da legenda da imagem original (através do menu Mídia, por exemplo) não modificará a imagem inserida na postagem. Para convencê-lo, clique na guia "Texto" e verifique o código HTML gerado.

Aqui está o que acontece quando você insere uma imagem com o botão "Adicionar mídia":

1. Quando você clica em "Inserir para postagem", os dados são retirados do modal Mídia para gerar algum código HTML: <img>identifique a fonte correta, dependendo do tamanho que você escolher, título como texto alternativo e legenda, se houver. Este código é inserido no lugar certo no editor TinyMCE (confira na guia "Texto")

2. Na guia "Visual", uma "visualização" é criada para representar a imagem no editor visual. Esta visualização exibe a imagem e dois botões: editar e excluir. Essa visualização é o que permite redimensionar a imagem e alterar alguns outros parâmetros visualmente, sem tocar no código HTML.

Portanto, se você deseja adicionar alguns dados personalizados (não o chame de campo personalizado, pois não está anexado a nenhuma postagem de anexo), será necessário inseri-lo nesse código HTML e modificar a visualização para permitir a alteração visual desses dados. . Se eu entendi bem sua pergunta, você deseja adicionar dados que posicionem a imagem de uma maneira específica na página. Você pode usar uma classe personalizada para isso.

Aqui está o código HTML que foi gerado:

<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" />

E você gostaria de ter uma opção "responsiva" na lista suspensa de tamanho que faria o código parecer:

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

Aqui está como conseguir isso: crie um plug-in que enfileirará um novo script na página pós-edição.

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' ));
    }
}

Em seguida, o customView.js deve ficar assim:

(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, _));

E aqui está o resultado :