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

10

Estou tentando criar um plugin simples e reutilizável para a apresentação de imagens no Wordpress 3.9, e parece que acertei um muro de tijolos.

Gostaria de poder adicionar algumas opções à instância da imagem. (Os detalhes em "Configurações de exibição do anexo"). Como uma caixa de seleção que diz "Responsivo", que desabilita (deixa cinza) o menu suspenso do tamanho da imagem, ou opções para posições de página fixas, etc.

No Gerenciador de mídia, ao selecionar / substituir uma imagem, posso adicionar alguns campos personalizados usando attachment_fields_to_edit e seus filtros irmãos, mas esses campos são anexados à própria imagem (ou ao objeto de postagem de anexo de imagem se você quiser), então se eu tivesse duas instâncias da mesma imagem em uma página, elas compartilhariam o mesmo valor do meu campo personalizado.

a)OcampoTextopersonalizadoqueadicionei,nãoconsigoanexarissoàinstância,todasasinstânciasdamesmaimagemcompartilhamessevalor.

b)Estaéaáreaondeeugostariadeadicionaropções,jáquetudoaquipareceseguircadainstância.

c) Isso mostra as mesmas configurações de exibição da tela anterior, no entanto, é 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_edit não estão presentes nesta tela.

Embora eu não tenha conseguido entender como o backbone funciona, ou quais são as melhores práticas para modificar os objetos wp.media, eu sou bastante competente tanto em php, js quanto em googling por respostas. Mas este me deixou perplexo por alguns dias agora, então qualquer ajuda é muito apreciada.

Obrigado pela leitura!

    
por isNaN 18.04.2014 / 18:08

1 resposta

6

Você está perfeitamente certo sobre a análise do problema, mesmo que os termos utilizados sejam um pouco confusos. Não existe algo como "uma instância da imagem": depois de inserir uma imagem em uma postagem, modificar o título ou legenda da imagem original (por meio do menu Mídia, por exemplo) não modificará a imagem inserida na postagem. Para convencê-lo, clique na guia "Texto" e confira 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 postar", os dados são extraídos do modal de mídia para gerar algum código HTML: <img> tag com a fonte correta, dependendo do tamanho escolhido, título como texto alternativo e legenda se houver um. Este código é inserido no lugar certo no editor TinyMCE (confira através da aba "Texto")

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

Portanto,sevocêquiseradicionaralgunsdadospersonalizados(nãochamá-lodecampopersonalizado,poisnãoestáanexadoanenhumapostagemdeanexo),seránecessárioinseri-lonestecódigoHTMLemodificaravisualizaçãoparapermitiraalteração.essesdadosvisualmente.Seeuentendibemsuapergunta,vocêdesejaadicionardadosqueposicionarãoaimagemdemaneiraespecíficanapágina.Vocêpoderiausarumaclassepersonalizadaparaisso.

AquiestáocódigoHTMLquefoigerado:

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

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

Veja como conseguir isso: crie um plug-in que enfileire um novo script na página de edição de postagem.

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, 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:

    
por Fabien Quatravaux 18.08.2014 / 18:17