Aggiunta di più opzioni all'istanza di un'immagine. (Impostazioni di visualizzazione degli allegati)

Sto cercando di creare un semplice plug-in riutilizzabile per la presentazione di immagini in Wordpress 3.9 e sembra che abbia colpito un muro di mattoni.

Vorrei poter aggiungere un paio di opzioni all'istanza dell'immagine. (I dettagli in "Impostazioni di visualizzazione degli allegati"). Come una casella di controllo che dice "Reattivo" che disabilita (visualizza in grigio) il menu a discesa delle dimensioni dell'immagine o le opzioni per le posizioni fisse della pagina, ecc.

In Media Manager durante la selezione / sostituzione di un'immagine, sono stato in grado di aggiungere alcuni campi personalizzati mediante l'uso attachment_fields_to_edite i suoi filtri di pari livello, tuttavia questi campi si collegano all'immagine stessa (o all'oggetto post dell'allegato dell'immagine, se lo desideri), quindi se avessi due istanze della stessa immagine su una pagina, condividerebbero lo stesso valore del mio campo personalizzato.

a) Il campo Testo personalizzato che ho aggiunto, non riesco a collegarlo all'istanza, tutte le istanze della stessa immagine condividono questo valore.

b) Questa è l'area in cui vorrei aggiungere opzioni, poiché tutto qui sembra seguire ogni istanza.

c) Questo mostra le stesse impostazioni di visualizzazione della schermata precedente, tuttavia è presentato in modo diverso quando si fa clic sulla "matita" nella parte superiore di un'immagine in Wordpress 3.9. Notare come le opzioni personalizzate fornite da attachment_fields_to_editnon sono presenti in questa schermata.

Anche se non ho capito bene come funziona la spina dorsale, o quali siano le migliori pratiche per modificare gli oggetti wp.media, sono abbastanza competente con php, js e cerco risposte. Ma questo mi ha lasciato perplesso per alcuni giorni, quindi ogni aiuto è molto apprezzato.

Grazie per aver letto!

Hai perfettamente ragione sull'analisi del problema, anche se i termini che impieghi sono un po 'confusi. Non esiste "un'istanza dell'immagine": una volta inserita un'immagine in un post, modificando il titolo o la didascalia dell'immagine originale (ad esempio tramite il menu Media) non si modifica l'immagine inserita nel post. Per convincerti, fai clic sulla scheda "Testo" e controlla il codice HTML generato.

Ecco cosa succede quando si inserisce un'immagine con il pulsante "Aggiungi media":

1. Quando si fa clic su "Inserisci per pubblicare", i dati vengono presi dal modale multimediale per generare un codice HTML: <img>tag con l'origine corretta in base alla dimensione scelta, titolo come testo alternativo e didascalia, se presente. Questo codice viene inserito nel posto giusto nell'editor TinyMCE (verificalo tramite la scheda "Testo")

2. Nella scheda "Visual" viene creata una "vista" per rappresentare l'immagine all'interno dell'editor visivo. Questa vista mostra l'immagine e due pulsanti: modifica ed elimina. Questa vista è ciò che ti consente di ridimensionare l'immagine e modificare alcuni altri parametri visivamente, senza toccare il codice HTML.

Quindi, se si desidera aggiungere alcuni dati personalizzati (non chiamarlo campo personalizzato in quanto non è allegato a nessun post allegato), sarà necessario inserirlo in questo codice HTML e quindi modificare la vista per consentire di modificare questi dati visivamente . Se capisco bene la tua domanda, vuoi aggiungere dati che posizioneranno l'immagine in un modo specifico sulla pagina. È possibile utilizzare una classe personalizzata per questo.

Ecco il codice HTML che è stato generato:

<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 ti piacerebbe avere una scelta "reattiva" nell'elenco a discesa delle dimensioni che renderebbe il codice simile a:

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

Ecco come raggiungere questo obiettivo: creare un plug-in che accoderà un nuovo script nella pagina di modifica post.

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

Quindi, customView.js dovrebbe apparire così:

(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 questo è il risultato :