Agregar más opciones a la instancia de una imagen. (Configuración de visualización de archivos adjuntos)

Estoy tratando de construir un complemento reutilizable simple para la presentación de imágenes en Wordpress 3.9, y parece que he golpeado una pared de ladrillos.

Me gustaría poder agregar un par de opciones a la instancia de la imagen. (Los detalles en "Configuración de visualización de archivos adjuntos"). Como una casilla de verificación que dice "Receptivo" que deshabilita (atenúa) el menú desplegable de tamaño de imagen u opciones para posiciones de página fijas, etc.

En el Administrador de medios al seleccionar / reemplazar una imagen, he podido agregar algunos campos personalizados mediante el uso attachment_fields_to_edity sus filtros hermanos, sin embargo, estos campos se adjuntan a la imagen en sí (o al objeto de publicación de adjuntos de imagen si lo desea), por lo que Si tuviera dos instancias de la misma imagen en una página, compartirían el mismo valor de mi campo personalizado.

a) El campo Texto personalizado que he agregado, no puedo adjuntar esto a la instancia, todas las instancias de la misma imagen comparten este valor.

b) Esta es el área donde me gustaría agregar opciones, ya que todo aquí parece seguir a cada instancia.

c) Esto muestra la misma configuración de visualización que en la pantalla anterior, sin embargo, se presenta diferente al hacer clic en el "lápiz" en la parte superior de una imagen en Wordpress 3.9. Observe cómo las opciones personalizadas dadas por attachment_fields_to_editno están presentes en esta pantalla en absoluto.

Aunque no he entendido bien cómo funciona la red troncal, o cuáles son las mejores prácticas para modificar los objetos wp.media, soy bastante competente con php, js y googlear las respuestas. Pero este me ha dejado perplejo durante unos días, por lo que cualquier ayuda es muy apreciada.

¡Gracias por leer!

Tiene toda la razón sobre el análisis del problema, incluso si los términos que emplea son un poco confusos. No existe tal cosa como "una instancia de la imagen": una vez que haya insertado una imagen en una publicación, la modificación del título o título de la imagen original (a través del menú Medios, por ejemplo) no modificará la imagen insertada en la publicación. Para convencerte, haz clic en la pestaña "Texto" y mira el código HTML generado.

Esto es lo que sucede cuando inserta una imagen con el botón "Agregar medios":

1. Al hacer clic en "Insertar para publicar", los datos se toman del modo Medios para generar un código HTML: <img>etiqueta con la fuente correcta según el tamaño que elijas, título como texto alternativo y título si hay uno. Este código se inserta en el lugar correcto en el editor de TinyMCE (échale un vistazo a través de la pestaña "Texto")

2. Dentro de la pestaña "Visual" se crea una "vista" para representar la imagen dentro del editor visual. Esta vista muestra la imagen y dos botones: editar y eliminar. Esta vista es lo que le permite cambiar el tamaño de la imagen y cambiar algunos otros parámetros visualmente, sin tocar el código HTML.

Entonces, si desea agregar algunos datos personalizados (no lo llame campo personalizado ya que no está adjunto a ninguna publicación adjunta), deberá insertarlo en este código HTML y luego modificar la vista para permitir cambiar visualmente estos datos . Si entiendo bien su pregunta, desea agregar datos que posicionarán la imagen de una manera específica en la página. Podrías usar una clase personalizada para esto.

Aquí está el código HTML que se generó:

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

Y le gustaría tener una opción "receptiva" en la lista desplegable de tamaño que haría que el código se vea así:

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

Aquí se explica cómo lograr esto: cree un complemento que ponga en cola un nuevo script en la página de edición posterior.

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

Entonces, customView.js debería verse así:

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

Y aqui esta el resultado :