in

Imágenes receptivas de RICG para WordPress

Recientemente, me asocié con Mat Marquis del Responsive Images Community Group para ayudar a integrar imágenes responsivas en la plataforma de WordPress. Decidimos refactorizar un complemento que había creado hace varios meses, con la esperanza de que condujera a una solución más utilizable y eficaz.

Recientemente, me asocié con Mat Marquis del Responsive Images Community Group para ayudar a integrar imágenes responsivas en la plataforma de WordPress. Decidimos refactorizar un complemento que había creado hace varios meses, con la esperanza de que condujera a una solución más utilizable y eficaz. Después de meses de solicitudes de extracción, conversaciones sobre Slack y la ayuda del equipo central de WordPress, finalmente estamos listos para compartir en qué hemos estado trabajando. Puedes descargar e instalar RICG Responsive Images desde el directorio de complementos de WordPress, mientras realizas un seguimiento de nuestro progreso de desarrollo en GitHub.

¿

¿Qué hace el complemento? #

WordPress no ha cambiado la forma en que genera la etiqueta img en bastante tiempo. Y aunque hay muchas formas de conectarse con las funciones nativas de WordPress y alterar el fragmento img, hacerlo puede ser abrumador tanto para los principiantes como para los desarrolladores que no son de tema. Compuesto eso con la complejidad de Picturefill y de la especificación srcset, y los usuarios de WordPress han tenido pocas opciones para implementar una solución de imágenes receptiva limpia y que funcione correctamente. Para resolver este problema, nos propusimos crear un complemento que brinde a los usuarios imágenes receptivas tan pronto como se instale el complemento, sin necesidad de ningún esfuerzo adicional. No se requiere configuración de administrador, configuración de carga de medios o codificación. El complemento viene con una dependencia, un polyfill para navegadores que aún no admiten imágenes de respuesta nativa. La eliminación de este archivo es completamente opcional y no afectará la funcionalidad del complemento, siempre que el usuario tenga un navegador moderno. Tan pronto como se carga una imagen a través de la interfaz de medios, WordPress crea automáticamente tres variaciones de la imagen en diferentes tamaños. Cuando se activa el complemento, agregar imágenes de contenido y «Destacados» a una publicación devolverá el marcado de imagen estándar de WordPress, con un atributo agregado srcset. Estamos usando el atributo srcset porque es el atributo más fácil de agregar tanto para los desarrolladores como para los usuarios. Si bien el elemento picture proporciona al usuario un conjunto más rico de opciones, sentimos que el atributo srcset tiene más sentido como una solución lista para usar. También es mejor usarlo cuando se está enfocando en el cambio de resolución más que en la dirección de arte (más sobre eso más adelante en el artículo).

<a href="https://ricg.dev/wp-content/uploads/2015/01/image.jpg"><img loading="lazy" decoding="async" class="6" src="https://ricg.dev/wp-content/uploads/2015/01/image.jpg" srcset="https://ricg.dev/wp-content/uploads/2015/01/image-150x150.jpg 150w, https://ricg.dev/wp-content/uploads/2015/01/image-300x300.jpg 300w, https://ricg.dev/wp-content/uploads/2015/01/image-1024x1024.jpg 1024w, https://ricg.dev/wp-content/uploads/2015/01/image.jpg 1800w" alt="a cool responsive image" width="1800" height="1800"></a>

El complemento está diseñado para ser compatible con versiones anteriores, lo que significa que las imágenes agregadas antes de que se instalara el complemento responderán cuando se agreguen a una publicación o sección «Imagen destacada». Esto se debe a que utiliza los tamaños de imagen previamente definidos por WordPress y el archivo functions.php del tema activo. La relación de la imagen se mantendrá en toda la matriz srcset, lo que significa que las imágenes que difieran de la relación de aspecto de la imagen cargada inicialmente se omitirán. Los desarrolladores de temas pueden usar el complemento para colocar imágenes receptivas donde quieran usando la función tevkori_get_srcset_string(), que toma el ID y el tamaño de una imagen como parámetros.


<img src="myimg.png" <?php echo tevkori_get_srcset_string( 11, 'medium' ); ?> />

También hay una función tevkori_get_srcset_array() que toma los mismos parámetros y devuelve una matriz de valores srcset para la imagen especificada.

¿Cómo funciona el complemento? #

La mayor parte de la funcionalidad ocurre cuando una imagen se coloca en el editor WYSIWYG de WordPress. Debido a que todas las imágenes redimensionadas se habrán creado durante el proceso de carga, lo único que queda por hacer es crear una matriz que contenga las URL de las imágenes disponibles en varios tamaños, así como sus dimensiones. Luego, esta matriz se filtra para eliminar los tamaños de imagen con proporciones que no coinciden con la proporción de la imagen de tamaño completo. La matriz se crea llamando a la función wp_get_attachment_image_src() y almacenando los resultados. Al mismo tiempo, utilizamos wp_get_attachment_metadata() para recuperar los mismos resultados pero para cada posible variación de la imagen. A continuación, la proporción se calcula multiplicando el ancho de cada imagen por el resultado de la altura de la imagen inicial dividida por el ancho de la imagen inicial. Si ese resultado coincide con la altura de la imagen inicial, la imagen se insertará en la matriz final y la función tevkori_get_srcset_array() la devolverá. La función tevkori_get_srcset_string() llama tevkori_get_srcset_array() y coloca el resultado dentro del atributo srcset. Se aplica un filtro a la función image_send_to_editor, donde se usa una expresión regular para colocar el resultado de la función tevkori_get_srcset_string() directamente después del atributo src en la imagen. El mismo proceso ocurre para las imágenes destacadas, con un filtro que se aplica a la función post_thumbnail_html. Si se cambia el tamaño de la imagen en el editor de la publicación, el complemento detectará el cambio y actualizará el valor srcset en consecuencia. Esto asegura que siempre se mantenga la relación de imagen correcta. Para habilitar esta funcionalidad, usamos JavaScript para conectar el objeto wp.media y recalcular el atributo srcset ejecutando los mismos cálculos de proporción de imagen definidos en tevkori_get_srcset_array(). Antes de comenzar con este proyecto, desconocía el objeto wp.media y su funcionalidad útil. Debido a que no existe mucha documentación al respecto, explicar en detalle cómo lo estamos usando podría ser útil. Resulta que puedes escuchar un evento image-update en el editor de la publicación agregando un detector de eventos al objeto wp.media.

wp.media.events.on( 'editor:image-update', function( args ) {
  var image = args.image;
  //more function logic
});

Con esta función, un desarrollador de temas puede acceder a cada imagen tan pronto como se haya actualizado en el editor de la publicación. También puede aprovechar el subrayado, que el cargador de medios utiliza como una dependencia para editar datos de imágenes sobre la marcha. En el caso de nuestro complemento, estamos usando una utilidad de subrayado útil para obtener nuestras proporciones de tamaño de imagen una vez editor:image-update que se ha activado el evento.

// Grab all of the sizes that match our target ratio and add them to our srcset array. _.each(sizes, function(size){ var softHeight = Math.round( size.width * metadata.height / metadata.width ); // If the height is within 1 integer of the expected height, let it pass. if ( size.height >= softHeight – 1 && size.height <= softHeight + 1 ) { srcsetGroup.push(size.url + ' ' + size.width + 'w'); } });

Para obtener más información sobre cómo nos conectamos al objeto wp.media, asegúrate de mirar el código en formato wp-tevko-responsive-images.js.

Los tamaños Atributo  #

Actualmente, este complemento no agrega un atributo sizes para complementar el atributo srcset. La razón es que inicialmente reconocimos que nunca podríamos predecir cuáles deberían ser esos tamaños, porque dependen del estilo del tema del usuario. Mientras trabajamos en una solución a este problema, animamos a todos los usuarios a que incluyan un atributo sizes por sí mismos, ya sea manualmente o mediante otro complemento de WordPress, como wp-lazysizes. Una cosa a tener en cuenta es que la especificación de imágenes receptivas ha cambiado recientemente, y el uso del descriptor w ahora debe ir seguido de un atributo sizes. Omitir el atributo sizes hará que el marcado sea técnicamente inválido, sin dejar de volver a un tamaño predeterminado de 100vh.

¿Qué pasa con las características X, Y y Z? #

Si bien se puede hacer mucho más con imágenes receptivas, probablemente hayas notado algunos casos de uso que este complemento no cubre. Lo primero que nos suelen preguntar es una función para la dirección de arte. La dirección de arte se refiere a cargar imágenes con estilos diferentes en diferentes puntos de interrupción, ya sea que eso signifique imágenes completamente nuevas o la misma imagen recortada o enfocada de manera diferente. Esta característica requeriría el uso del elemento picture, lo que a su vez significaría mucho más marcado para generar la imagen final. Agregar esta función a WordPress sería imposible sin la adición de una interfaz bastante complicada en el cargador de medios de WordPress, porque el usuario necesitaría poder definir todos los puntos de interrupción y luego seleccionar las imágenes que se cargarán cuando se alcancen esos puntos de interrupción. Nuestro objetivo para este complemento es permitir una implementación básica de imágenes receptivas, sin absolutamente ninguna configuración necesaria por parte del usuario. Entonces, hemos decidido omitir esta función. Sin embargo, haremos todo lo posible para permitir que la dirección de arte trabaje junto con nuestro complemento a medida que expandimos la API para los desarrolladores de temas. La carga diferida y la compresión de imágenes son otras dos características que no tenemos planes de implementar, simplemente porque quedan fuera del alcance de una solución más o menos «predeterminada» para imágenes receptivas. Una vez más, nuestro objetivo es hacer posible la adición de estas funciones para los desarrolladores de temas que utilizan nuestro complemento a través de una API rica en funciones.

¿Que sigue? #

Si bien el complemento está disponible para que todos lo descarguen e instalen, estamos trabajando activamente para mejorarlo. Por lo tanto, los usuarios pueden esperar actualizaciones frecuentes, problemas resueltos y un complemento que funcione mejor a medida que pasa el tiempo. Estamos planeando agregar más funciones, como el atributo sizes y los ganchos que permiten a los desarrolladores de temas personalizar aún más el complemento. Otra característica que todavía tenemos que considerar son los descriptores de proporción como 2x y 3x para los casos de uso de “Retina”. Próximamente también habrá mejor documentación y soporte. Eventualmente, nos gustaría que este complemento se convierta en parte del núcleo de WordPress, lo que significa que seguirá siendo minimalista, sin administradores y fácil de usar.

¿Qué opinas?

Escrito por Wombat

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Cómo corregir el error «El enlace que has seleccionado ha caducado» en WordPress

Cómo deshabilitar los comentarios en WordPress: una guía completa