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

Question

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

#1 de Fabien Quatravaux (6 votos)

10

Estoy tratando de crear un complemento reutilizable simple para la presentación de imágenes en Wordpress 3.9, y parece que me he topado con un muro 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 "Responsivo" que desactiva (atenúa) el menú desplegable de tamaño de la 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 de attachment_fields_to_edit y sus filtros de hermanos, sin embargo, estos campos se adjuntan a la imagen en sí (o al objeto posterior de la imagen adjunta) 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)Elcampodetextopersonalizadoqueheagregado,nopuedoadjuntarestoalainstancia,todaslasinstanciasdelamismaimagencompartenestevalor.

b)Estaeseláreadondemegustaríaagregaropciones,yaquetodoaquípareceseguircadainstancia.

c) Esto muestra la misma configuración de pantalla que en la pantalla anterior, sin embargo, se presenta de manera 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_edit no están presentes en esta pantalla en absoluto.

A pesar de que no me he centrado completamente en cómo funciona el backbone, o en cuáles son las mejores prácticas para modificar los objetos de wp.media, soy bastante competente con php, js y google para las respuestas. Pero este me ha dejado perplejo por unos días, por lo que cualquier ayuda es muy apreciada.

¡Gracias por leer!

plugin-development media-library media-settings

pregunta isNaN 18.04.2014 - 18:08

1 respuesta

Lea otras preguntas en las etiquetas plugin-development media-library media-settings

¿Es posible tener más "niveles" de estados de borrador / publicados? Permalinks bonitos para resultados de búsqueda con var extra de consulta

score 6 · Accepted Answer

Usted 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, modificar el título de la imagen original o el título (por ejemplo, a través del menú Medios) no modificará la imagen insertada en la publicación. Para convencerlo, haga clic en la pestaña "Texto" y revise el código HTML generado.

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

Al hacer clic en "Insertar para publicar", los datos se toman del modo de medios para generar un código HTML: etiqueta <img> con la fuente correcta según el tamaño que elija, título como texto alternativo y título. si hay uno. Este código se inserta en el lugar correcto en el editor TinyMCE (verifíquelo en la pestaña "Texto")
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,sideseaagregaralgunosdatospersonalizados(nolollamecampopersonalizado,yaquenoestáadjuntoaningunapublicaciónadjunta),tendráqueinsertarloenestecódigoHTMLyluegomodificarlavistaparapermitirelcambio.estosdatosvisualmente.Sientiendobiensupregunta,deseaagregardatosqueposicionaránlaimagendeunamaneraespecíficaenlapágina.Podríasusarunaclasepersonalizadaparaesto.

AquíestáelcódigoHTMLquesegeneró:

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

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

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

A continuación le indicamos cómo lograrlo: cree un complemento que encolará 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 aquí está el resultado: