Cómo integrar Picturefill 2.0 en WordPress y hacer que sus imágenes respondan

Una breve historia de las imágenes receptivas

Las imágenes receptivas son imágenes que se adaptan al tamaño y la densidad de visualización de la pantalla en la que existen. Los teléfonos móviles, por ejemplo, no deberían descargar imágenes de 1920 px de ancho, seis veces más anchas que la propia pantalla. Necesitamos una forma de servir tamaños de imagen adecuados para todos los dispositivos sin dejar de ser responsables del ancho de banda y la calidad.

Las discusiones sobre imágenes receptivas tenían poca relevancia antes de la proliferación de dispositivos móviles, tabletas de todos los tamaños y televisores inteligentes gigantes. Sin embargo, después del libro de referencia de Ethan Marcotte, Responsive Web Design, los desarrolladores comenzaron a considerar seriamente cómo podemos garantizar que los dispositivos solo descarguen los bytes que necesitan. Y dado que las imágenes son, en promedio, la mayor parte de su página que llega al cable, eran un buen lugar para comenzar.

Se sucedieron conversaciones. Se formaron grupos de trabajo. Los desarrolladores parecían estar a favor de la imagen, un elemento creado recientemente, basado en el elemento de video , que usaba consultas de medios para especificar qué imagen se debía descargar. Los desarrolladores de navegadores, por otro lado, preferían una extensión de la etiqueta img existente en forma de srcset, una sintaxis que hacía que los desarrolladores enumeraran las imágenes disponibles, dejando la decisión a los navegadores sobre cuál descargar.

Esto continuó durante bastante tiempo. Mientras tanto, los desarrolladores de Filament Group comenzaron a armar un polyfill llamado «Picturefill», que adopta la sintaxis anterior.

Pero he aquí que se ha llegado a una solución. O más bien, un compromiso. La especificación HTML ahora tiene versiones ligeramente modificadas de ambas sintaxis, y ya se están implementando en los navegadores. Y recientemente, se lanzó Picturefill 2.0 para reflejar los cambios en las especificaciones.

En este artículo, repasaremos cómo implementar ambas versiones de imágenes receptivas de acuerdo con la especificación HTML, utilizando Picturefill 2.0 para garantizar la compatibilidad total del navegador y las funciones multimedia integradas de WordPress. También revisaremos un complemento que puede ayudarlo a realizar esta tarea por usted.

Hay mucho código que sigue. Lo he compilado todo en una esencia para futuras referencias .

Empezando

Lo primero es lo primero, las imágenes receptivas solo funcionarán si está utilizando un tema receptivo . La mayoría de los temas de Elegant Themes responden de forma predeterminada. Usaré el tema Divi a lo largo de este tutorial, pero este código funcionará, con algunas modificaciones, para cualquier tema que responda.

Lo primero que desea hacer es averiguar dónde existen actualmente sus puntos de interrupción de respuesta. Estos son los tamaños de pantalla en los que cambiará un diseño y se especifican en la hoja de estilo CSS de su tema. Para Divi, estos importantes puntos de interrupción existen en:

1405 píxeles, 981 píxeles, 768 píxeles, 479 píxeles

Si no conoce los puntos de interrupción de su tema, intente buscar @media en el archivo «style.css» . Los puntos de interrupción anteriores deberían funcionar bien en Elegant Themes.

El siguiente paso es asegurarse de que las imágenes se creen en estos diversos tamaños. Cuando subes una imagen a WordPress, se crearán automáticamente varios tamaños. Podemos aprovechar esta funcionalidad para crear imágenes listas para Picturefill.

La forma más fácil de cambiar estos tamaños de medios es ir a Configuración -> Medios . Aquí verá tres tamaños de imagen: miniatura, mediano y grande. La miniatura se usa a menudo en varios contextos, así que manténgala como está. Pero se pueden usar Mediano y Grande para comenzar.

En el cuadro Tamaño grande, vamos a especificar nuestro punto de interrupción más grande en el campo de texto de ancho máximo: 1405. Para el alto máximo, ingrese «9999». Esto le permite a WordPress saber que desea que la altura sea proporcional al ancho, en lugar de recortarlo. Podemos usar el tamaño mediano para nuestro próximo punto de interrupción, 981 px, configurando nuevamente la altura máxima en «9999».

Nos hemos encontrado con nuestro primer problema. No hay suficientes tamaños predeterminados en WordPress para acomodar todos nuestros puntos de interrupción. Tendremos que crear algunos propios.

Creación de tamaños de imagen

Es hora de entrar en algún código real. Este código debe agregarse al final del archivo functions.php de su tema . Por supuesto, todo el siguiente código también se puede especificar en un complemento personalizado y funcionará de la misma manera.

Vamos a utilizar la función de WordPress add_image_size para crear tamaños de imagen para los puntos de interrupción restantes. Estos tamaños se crearán automáticamente cada vez que se cargue una nueva imagen en WordPress.

Aquí, creé tres nuevos tamaños de imagen para reflejar los puntos de interrupción más pequeños restantes. Para cada uno, especifiqué un nombre, seguido de un ancho y un alto (que dejé en 9999 para automático). Notará que especifiqué un tamaño «más grande» que no corresponde a ningún punto de interrupción. Esta es una especie de captura de todos los tamaños para imágenes de más de 1405 píxeles.

Este también podría ser un buen momento para instalar el complemento Regenerar miniaturas , que recreará las miniaturas de las imágenes existentes en función de los tamaños agregados.

Picturefill en cola

Picturefill es un polyfill que garantiza que las imágenes receptivas funcionen en todas partes, incluso en navegadores más antiguos donde no se implementan nuevos estándares. Utiliza Javascript para hacer su magia, por lo que tendremos que asegurarnos de poner en cola el archivo de script en nuestro tema. Primero, vaya a la página de descarga de Picturefill y descargue la versión comprimida y minimizada de la biblioteca. Luego, agregue ese archivo a la carpeta «js» de su tema.

Después de eso, vaya al archivo functions.php de su tema y ponga en cola el script. En los temas de Elegant Themes, simplemente agregue esta línea de código a la función de carga de scripts y estilos existentes. En el tema Divi, agregue esto en la línea 153 de functions.php.

Si está utilizando un tema diferente, querrá crear una nueva función y agregar la acción wp_enqueue_scripts para registrarla.

Esto simplemente agrega la biblioteca Picturefill al pie de página de su página para que pueda comenzar a usarla.

Obtener una etiqueta alternativa de imagen

Al modificar nuestra salida de medios, queremos asegurarnos de que estamos recuperando el texto alternativo asignado a la imagen y colocándolo dentro de nuestro código. Haremos esto configurando una función que recupera el texto alternativo y nos lo devuelve.

Todo lo que estamos haciendo aquí es usar la función get_post_meta de WordPress para obtener el texto alternativo de una imagen y formatearla. En cualquier momento podemos simplemente usar get_image_alt($image_ID) y mostrar el texto alternativo de la imagen especificada. Estaremos usando esto en poco tiempo.

Uso del elemento de imagen

Ok, es hora de comenzar a usar Picturefill. Comenzaremos con el uso de la sintaxis del elemento de imagen . Más adelante, veremos cómo usar la sintaxis img .

Al usar el elemento de imagen con Picturefill, el HTML debería verse así.

Básicamente, para cada imagen introducimos un elemento fuente  , donde especificamos la imagen y una consulta de medios correspondiente. Cuando el tamaño de una pantalla coincida con la consulta de medios que especifique, esa imagen se extraerá y se usará. En este ejemplo, «large.jpg» se mostrará en pantallas de más de 800 píxeles y «medium.jpg» se mostrará en pantallas de entre 400 y 799 píxeles. La etiqueta img se usa para todos los demás casos, generalmente la imagen más pequeña.

Si se pregunta por qué hay una etiqueta de video extraña dentro del marcado, esa es una solución para un error en Internet Explorer 9. No afectará a ningún otro navegador, pero garantiza que el código funcione allí.

Construyendo nuestra matriz de fuentes

Comenzaremos a implementar el elemento de imagen creando una matriz de etiquetas srcset de origen basadas en los tamaños de imagen creados por WordPress. Vamos a crear una función, que cuando se le pasa una ID de imagen, genera una cadena que incluye todos los tamaños de imagen y consultas de medios.

Para cada tamaño de imagen, recuperamos la URL de origen de la imagen mediante wp_get_attachment_image_src, una función integrada de WordPress, y la almacenamos en una variable. Luego, estamos creando una nueva cadena, $srcset, que incluye cada URL de imagen de wp_get_attachment_image_src y una consulta de medios correspondiente. Notarás que no obtuve la URL para el tamaño de imagen «más pequeño». Eso es por diseño. Más sobre esto en un momento.

Para las consultas de medios sobre cada tamaño de imagen, estoy usando el tamaño debajo como ancho mínimo. Como recordará, el tamaño de imagen «pequeño» crea una imagen de 768 píxeles. Para la consulta de medios asociada con $img_small, estoy usando «min-width: 468px». Tan pronto como el tamaño de la pantalla alcance los 468 píxeles, se cargará la imagen de 768 píxeles, y así sucesivamente. Esto asegura que siempre se cargue el tamaño siguiente.

Siéntase libre de modificar estos valores para que coincidan con su sitio según sea necesario, o elimine los tamaños de imagen de la cadena que no necesita.

Creación de un código abreviado de imagen sensible

El siguiente paso es usar las funciones que creamos para implementar el elemento de imagen. La forma más eficiente de hacer esto es crear un código abreviado que, dado un ID de imagen y un título, genere el código adecuado para el elemento de la imagen . La razón por la que usamos un código abreviado es para asegurarnos de que WordPress no modifique automáticamente la salida HTML, y es relativamente a prueba de futuro.

En última instancia, queremos que nuestro shortcode se vea así:

Para hacer esto, creamos una función que pasa los atributos del shortcode a una función, luego construye el HTML requerido y crea un shortcode para él. En conjunto, se ve así:

La acción add_shortcode aquí acepta una variable de atributos. Con esa variable, extraemos los atributos del shortcode, proporcionamos los valores predeterminados para ambos y luego convertimos el atributo id en la variable $id y el título en $título.

Luego pasamos este ID a add_picture_sources, la función que creamos en el último paso y generamos la cadena dentro de la sintaxis misma. Luego, agregamos una etiqueta img , usando wp_get_attachment_image_src nuevamente para recuperar la imagen más pequeña, de modo que se use en todos los casos extraños. Después de eso, mostramos el título en una etiqueta y usamos nuestra función get_img_alt de eariler para generar texto alternativo.

Estamos listos. Dado el código abreviado [resp_image], con una identificación y un título opcional, podremos generar una implementación de imagen funcional y completamente estructurada.

Modificación de la salida del editor de publicaciones

El último paso es usar este código abreviado cada vez que se inserta una nueva imagen en el editor de publicaciones. Usaremos el filtro image_send_to_editor para modificar la salida de Media Uploader.

Esta función solo hace una cosa. Toma el $id y el $caption de la imagen cargada y completa el código abreviado que creamos en el último paso.

Después de guardar este código, puede crear una nueva publicación y usar el cargador de medios para cargar una imagen como lo haría con cualquier otra. En lugar de la salida de imagen normal, verá insertado su shortcode. Cuando publique o obtenga una vista previa de la publicación, verá imágenes receptivas en su sitio en acción. Escale su página a diferentes tamaños para ver cómo las consultas de medios afectan qué imagen se carga.

Usando la sintaxis img

Por supuesto, la imagen no es la única forma de incluir imágenes receptivas en su página. También hay una implementación que usa la etiqueta img srcset para proporcionar un rango de imágenes y sus tamaños correspondientes. Esto permite que el navegador elija qué imagen descargar. El HTML de salida para Picturefill se ve así.

Esto puede parecer un poco extraño, pero en realidad es relativamente sencillo. El primer atributo es «tallas». Aquí le estamos diciendo al navegador cuánto espacio ocupa nuestra imagen. La unidad «vw» describe el porcentaje de una ventana gráfica. En el ejemplo anterior, estoy diciendo que cuando el tamaño de la pantalla es superior a 1405 píxeles, las imágenes ocupan aproximadamente el 50 % de la ventana gráfica en nuestro diseño (porque la barra lateral y el relleno ocupan el otro 50 %). En pantallas un poco más pequeñas, entre 981 px y 1405 px, las imágenes ocupan el 75 % de la pantalla y, finalmente, en los tamaños de pantalla más bajos, ocupan el 90 %.

En el srcset, simplemente proporcionamos una lista de imágenes con sus anchos al lado. Dada esta información, el navegador decide qué imagen usar según el tamaño y la densidad de píxeles de la pantalla. Entonces, en lugar de que usted, como desarrollador, especifique qué imagen usar, simplemente le proporciona al navegador la mayor cantidad de información posible sobre las imágenes y deja que él decida.

Esta sintaxis en realidad encaja un poco mejor con WordPress y, a menos que necesite un control detallado, probablemente sea el camino a seguir. Permite que el navegador tome decisiones inteligentes con respecto a pantallas retina, situaciones de bajo ancho de banda y contextos inusuales.

Construyendo nuestra matriz Srcset

Al igual que en el ejemplo anterior, vamos a crear una matriz de imágenes que se pueden usar para el atributo «srcset». Lo que tenemos que hacer es enumerar cada imagen con el ancho de esa imagen junto a ella y mostrar esto como una lista.

Al igual que el elemento de imagen, estamos creando una función y pasándole una ID de imagen. A partir de ahí, las cosas se ponen un poco diferentes. Comenzamos enumerando los tamaños que queremos usar en una matriz simple, comenzando con el más pequeño y luego pasando al más grande. A partir de ahí, usamos wp_get_attachment_metadata para obtener la información de metadatos asociada con la imagen.

Luego, usando un bucle foreach, verificamos la clave para asegurarnos de que existe un tamaño para la imagen dada, luego extraemos la fuente de la imagen (usando wp_get_attachment_image_src) y el ancho de la imagen de wp_get_attachment_metadata. El paso final es simplemente crear una nueva matriz de estas imágenes, una por una, especificando la URL y el ancho de la imagen, y luego devolviendo la matriz, que usaremos en nuestra función de código abreviado.

Al final, nuestra función genera algo como:

Construyendo el código corto

El siguiente paso es crear un código abreviado que generará el HTML adecuado. Vamos a usar la misma sintaxis de shortcode que antes:

También usaremos una función similar para crear nuestro shortcode, pero devolveremos un HTML diferente.

Una vez más, estamos extrayendo los parámetros de shortcode necesarios como variables. Luego, pasamos el ID de la imagen a la función add_srcset_element que creamos en el último paso para obtener nuestra lista de imágenes y anchos asociados.

A partir de ahí, estamos creando el HTML real, comenzando con el atributo de tamaños, que debe modificar en función de sus propios puntos de interrupción y tamaños. Después de generar nuestra lista de imágenes en el atributo srcset y el texto alternativo con nuestra práctica función get_img_alt, agregamos el título en un elemento figcaption . Terminamos creando el propio shortcode usando add_action.

Modificación de la salida del editor de publicaciones

Dado que nuestra sintaxis de shortcode es exactamente la misma que antes, no hay nada que cambiar en nuestra función existente.

Simplemente filtramos la salida del editor de medios para insertar nuestro shortcode creado en su lugar. Ahora puede ir al editor de publicaciones, insertar una nueva imagen y ver la sintaxis de img srcset en acción.

Uso del complemento Picturefill.WP

Las imágenes receptivas aún son bastante nuevas, por lo que no hemos visto un uso generalizado. Pero si está buscando un complemento con una buena implementación de Picturefill, solo hay uno que he visto: Picturefill.WP.

La versión de este complemento en WordPress.org todavía usa la implementación anterior de Picturefill, pero hay una rama maestra experimental en GitHub que usa Picturefill 2.0. Todavía se están resolviendo los errores, pero no me he encontrado con ningún problema importante.

Para usarlo, descargue el archivo de GitHub y luego cárguelo como un nuevo complemento en su sitio. Picturefill.WP usa la sintaxis img srcset del segundo ejemplo anterior. Para que todo funcione correctamente, querrá registrar los atributos de tamaños y conjuntos de src correctamente, utilizando la función picturefill_wp_register_srcset a la que el complemento le da acceso. Simplemente agregue este fragmento de código a su archivo functions.php:

Esto registrará una serie de tamaños de imagen que queremos usar con el complemento, incluidos los tamaños de imagen personalizados que creamos. También modificará el atributo de tamaños del HTML de salida. El último parámetro en cada uno es «completo», lo que indica que estos parámetros deben asignarse a cualquier imagen que se haya adjuntado a una publicación como «completo».

Lo mejor de Picturefill.WP es que funciona en las imágenes existentes dentro de las publicaciones de forma retroactiva y utiliza un almacenamiento en caché inteligente para asegurarse de que las páginas aún se carguen rápidamente.

Si tiene dudas sobre el uso de la versión beta, la versión estable actual del complemento todavía funciona muy bien y lo más probable es que vea una actualización en un futuro próximo.

Mirando hacia el futuro

Ahora que las imágenes receptivas se han estandarizado, comenzaremos a verlas implementadas cada vez más. Un día, incluso podríamos verlos en el núcleo de WordPress. Por ahora, todavía hay mucha experimentación por hacer. ¡Así que adelante, comience e informe lo que encuentre!

Si desea ver el código de este artículo, todo en un solo lugar, lo pongo todo en una sola esencia .