Comprensión de cómo funcionan las imágenes de WordPress (para un diseño mejor sensible)

Lo que vas a crear

Uno de los mayores desafíos a los que se enfrentan los desarrolladores web hoy en día es el manejo adecuado de las imágenes para lograr un diseño receptivo. Nos enfrentamos a problemas como el tamaño adecuado de la imagen para la pantalla en la que se está viendo, teniendo en cuenta las velocidades de descarga del usuario, si el dispositivo es retina (o en general una pantalla de resolución súper alta) y más. 

Afortunadamente, el El elemento recientemente se convirtió en una especificación aceptada que se implementará en los principales navegadores, pero aún queda trabajo por hacer. Afortunadamente, la forma en que WordPress maneja las imágenes hace las cosas mucho más fáciles.. 

Cómo funciona el cargador de medios

Primero, veamos un curso acelerado rápido sobre el uso de Media Uploader. Se puede acceder al administrador de WordPress desde varias áreas, incluidas las publicaciones, las páginas, los tipos de publicaciones personalizadas que lo admiten (en general, el editor) y el menú Multimedia.. 

Las únicas diferencias entre el menú de Medios y el resto es que una imagen se asociará directamente con una publicación o página si se carga desde el editor. 

Una vez que se carga una imagen, WordPress creará de manera predeterminada hasta 4 tamaños: 

• miniatura (150x150)
• medio (300 max x 300 max)
• grande (640 max x 640 max)
• completo (el tamaño original de la imagen). 

También puede agregar sus propios tamaños de imagen usando la función add_image_size (). Por ejemplo, si quisiéramos agregar una imagen para un producto que tiene 700px de ancho por 450px de alto, haríamos: 

add_image_size ('product-img', 700, 450, false);

Esto le dice a WordPress que cree una nueva imagen con el nombre 'product-img' con nuestras dimensiones especificadas. El último argumento es si la imagen debe ser recortada o no. 

Cuando se establece en falso, la imagen se redimensionará proporcionalmente sin recortarla; cuando se establece en verdadero, la imagen se recortará desde los lados o desde la parte superior / inferior. Sin embargo, tenga cuidado con esto, ya que los resultados variarán de una imagen a otra.. 

Insertando una imagen

Hay dos formas de insertar una imagen en una publicación o página: la primera es a través del cargador de medios, como se muestra aquí: 

La segunda forma es mediante el uso de una imagen destacada. Puede habilitar imágenes destacadas agregando este código a su tema funciones.php archivo, o en algún lugar cerca del comienzo de sus complementos: 

if (function_exists ('add_theme_support')) add_theme_support ('post-thumbnails'); 

Esto agregará un cuadro de 'imagen destacada' a todas las publicaciones, páginas y tipos de publicaciones personalizados que lo admitan. También puede enviar un segundo argumento, que es una matriz de lo que debería tener una imagen destacada.. 

Por ejemplo, si solo desea que las publicaciones admitan imágenes destacadas: 

if (function_exists ('add_theme_support')) add_theme_support ('post-thumbnails', array ('post');

El último paso es colocar este código dentro del bucle de su plantilla, donde quiera que desee que aparezca la imagen: 

if (has_post_thumbnail ()) the_post_thumbnail ('large');  

El argumento aceptado es el nombre del tamaño de imagen que desea utilizar. Por defecto, es post-miniatura. Una vez que tengas eso, agregarás tu imagen destacada a través de este cuadro: 

Finalmente, si carga un conjunto de imágenes en la misma publicación o página, puede insertarlas como una galería usando la [galería] código corto, que puedes leer más aquí. 

Mejoras en 3.9

Con el lanzamiento de WordPress 3.9, y con él, algunas mejoras realmente agradables a las imágenes y la galería. Aparte de las mejoras al editor visual, como la capacidad de arrastrar y soltar imágenes, add_image_size () está obteniendo un nuevo argumento para especificar si se debe recortar en los lados o en la parte superior / inferior. 

Entonces, ¿qué tiene todo esto que ver con Responsive? Me alegra que hayas preguntado! 

Aprovechando el cargador de medios

La base de la El elemento es que nosotros, como desarrolladores web, suministramos múltiples copias de una imagen para mostrar en puntos de interrupción particulares, es decir,. image-images_14 / comprensión-cómo-wordpress-images-work-for-better-responsive-design_2.jpg para smartphones y image-full.jpg para pantallas más grandes. 

En este momento, este elemento es aceptado, pero aún quedan algunos meses para integrarse en los navegadores. Hay otra opción, sin embargo. 

picturefill.js

Hay un archivo JavaScript creado por el Grupo de filamentos llamado picturefill.js, que emula la misma función que la elemento. 

La sintaxis se ve así: 

Note que hay una src de datos entrada para cada imagen que queremos usar, así como un punto de interrupción mínimo asociado para mostrar esa imagen. Vale la pena señalar que no hay límite en el número de imágenes / puntos de interrupción que puede tener. 

Esta es actualmente una forma ampliamente aceptada de lograr el mismo efecto que el elemento. Me imagino que a medida que se extienda a los navegadores, la forma correcta de codificar imágenes sensibles será: -> picturefill.js ->

Esto nos permitirá usar el último y mejor HTML en los navegadores modernos con los recursos adecuados en su lugar (¡mejoramiento progresivo de yay!). 

Con picturefill.js y las múltiples imágenes que crea el Media Uploader, podemos crear un proceso automatizado para imágenes sensibles en nuestros sitios con tecnología de WordPress. 

Poniendolo todo junto

En este momento, no hay forma de que WordPress lo haga de forma nativa; Me imagino que eso cambiará cuando el el elemento se despliega (dibs al enviarlo al Core :). Eso no significa que podamos hacer un par de cosas para automatizar el proceso. En esta sección, vamos a tocar algunas posibilidades.. 

Nota: Notarás que estoy usando el prefijo jlc_ en mis funciones. Te recomiendo que te uses para evitar conflictos con otros temas y complementos. 

Reemplazo de imágenes destacadas

La primera pieza de este rompecabezas, y la más directa, es reemplazar las imágenes presentadas con el picturefill.js margen. 

Esto se puede lograr con el filtro. post_thumbnail_html, que cambiará el marcado predeterminado por el nuestro. Lo primero que tenemos que hacer es poner en cola. picturefill.js (que se puede hacer en funciones.php o en tu plugin): 

function jlc_script () wp_register_script ('picturefill', get_stylesheet_directory_uri (). '/js/picturefill.js'); wp_enqueue_script ('picturefill');  add_action ('wp_enqueue_scripts', 'jlc_script');

Asegúrese de modificar la ruta aquí para que la ubicación de su picturefill.js expediente. Una vez que esté en su lugar, es hora de agregar nuestra función de reemplazo:

function jlc_get_featured_image ($ html, $ aid = false) $ tamaños = matriz ('miniatura', 'mediano', 'grande', 'completo'); $ img = ''; $ ct = 0; $ ayuda = (! $ ayuda)? get_post_thumbnail_id (): $ aid; foreach ($ tamaños como $ tamaño) $ url = wp_get_attachment_image_src ($ ayuda, $ tamaño); $ ancho = ($ ct < sizeof( $sizes ) - 1 ) ? ( $url[1] * 0.66 ) : ( $width / 0.66 ) + 25; $img .= ' 0)? 'data-media = ”(min-width:'. $ width .'px)”>':'>'; $ ct ++;  $ url = wp_get_attachment_image_src ($ aid, $ tamaños [1]); $ img. = ' '; devuelve $ img; 

Hay varias tareas que se realizan aquí: 

1. Tenemos una matriz de cada tamaño de imagen que queremos incluir (por nombre). Puede agregar o eliminar aquí como desee
2. Establecimos el picturefill.js margen
3. Recorremos la matriz, obtenemos la URL para cada tamaño y la agregamos como una entrada a nuestro elemento picturefill.js
4. Incluimos algunos cálculos matemáticos para averiguar dónde deben ocurrir los puntos de ruptura en función del tamaño de la imagen
5. Para usuarios sin javascript, recurrimos a la imagen de tamaño medio.

El siguiente paso es agregar nuestro filtro, que puede agregar justo debajo de la función: 

add_filter ('post_thumbnail_html', 'jlc_get_featured_image');

Ahora nuestra funcion jlc_get_featured_image () se utilizará para la salida post_thumbnail en lugar de la marca predeterminada.

He envuelto todo esto en un simple complemento llamado Imagen destacada receptiva. Puedes descargarlo desde Github..

Otros metodos

Como puede imaginar, el manejo de imágenes es un asunto bastante complicado cuando se trata de un diseño receptivo. La función sobre solo funcionará con imágenes destacadas, no todas las imágenes en la publicación. Si bien hay métodos para hacer esto, incluido este complemento, mis pruebas han demostrado problemas de rendimiento y de escala.. 

También puede usar un shortcode, pasando una URL o una ID de imagen para generar el código, de esta manera: [jlc_picturefill_image aid = x]. Desafortunadamente, sin una codificación extensa, esto deshabilitará el uso del cargador de medios para insertar imágenes en la publicación. Con la funcionalidad de arrastrar y soltar en 3.9, podría causar aún más conflicto. 

Si estás interesado en este método, en mi libro., Diseño responsivo con WordPress, Profundizo mucho más en esto y en las imágenes de WordPress en general..

Conclusión

En este artículo, analizamos de manera bastante extensa cómo WordPress maneja las imágenes y exploramos una forma de integrar picturefill.js En una casa fácil de usar y, lo que es más importante, eficiente. 

Es importante saber que esta es un área de interés en constante evolución. A medida que se desarrollan mejores métodos, estoy emocionado de ver lo que depara el futuro (con suerte cerca) tanto para las imágenes sensibles como para WordPress.