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":
-
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") -
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:
