Krypton Solid

Imágenes receptivas de RICG para WordPress

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. Puede descargar e instalar Imágenes receptivas de RICG desde el directorio de complementos de WordPress, mientras realiza un seguimiento de nuestro progreso del desarrollo en GitHub.

¿Qué hace el complemento?

WordPress no ha cambiado la forma en que genera el img etiqueta en bastante tiempo. Y aunque hay muchas formas de conectarse a las funciones nativas de WordPress y alterar la img fragmento, 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 del srcset especificación, y los usuarios de WordPress han tenido pocas opciones para implementar una solución de imágenes receptiva limpia y que funcione correctamente.

Otras lecturas en SmashingMag:

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 nativas de respuesta. 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 el complemento está activado, agregar «Destacados» e imágenes de contenido a una publicación devolverá el marcado de imagen estándar de WordPress, con un agregado srcset atributo. Estamos usando el srcset atributo porque es el atributo más fácil de agregar tanto para los desarrolladores como para los usuarios. Mientras que la picture El elemento proporciona al usuario un conjunto de opciones más rico, sentimos que el srcset atributo tiene más sentido como una solución lista para usar. También es mejor usarlo cuando se está enfocando en cambio de resolución más que dirección de arte (más sobre eso más adelante en el artículo).


<a href="http://ricg.dev/wp-content/uploads/2015/01/image.jpg"><img loading="lazy" decoding="async" class="6" src="http://ricg.dev/wp-content/uploads/2015/01/image.jpg"  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 la instalación del 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 tema activo. functions.php expediente. La relación de imagen se mantendrá durante todo el srcset matriz, 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 el tevkori_get_srcset_string() función, que toma el ID y el tamaño de una imagen como parámetros.


<img src="https://www.smashingmagazine.com/2015/02/ricg-responsive-images-for-wordpress/myimg.png" <?php echo tevkori_get_srcset_string( 11, 'medium' ); ?> />

También hay un tevkori_get_srcset_array() función que toma los mismos parámetros y devuelve una matriz de srcset valores 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 al wp_get_attachment_image_src() función y almacenamiento de los resultados. Al mismo tiempo, usamos wp_get_attachment_metadata() para obtener 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, entonces la imagen se insertará en la matriz final, para ser devuelta por el tevkori_get_srcset_array() función.

La tevkori_get_srcset_string() llamadas a funciones tevkori_get_srcset_array() y coloca el resultado dentro del srcset atributo. Se aplica un filtro al image_send_to_editor función, donde se usa una expresión regular para colocar el resultado de la tevkori_get_srcset_string() funcionar directamente después de la src atributo en la imagen. El mismo proceso ocurre para las imágenes destacadas, con un filtro que se aplica a la post_thumbnail_html función.

Si se cambia el tamaño de la imagen en el editor de la publicación, el complemento detectará el cambio y actualizará el srcset valor en consecuencia. Esto asegura que siempre se mantenga la relación de imagen correcta. Para habilitar esta funcionalidad, usamos JavaScript para conectarnos al wp.media objeto y recalculando el srcset atributo ejecutando los mismos cálculos de relación de imagen definidos en tevkori_get_srcset_array(). Antes de comenzar con este proyecto, desconocía la wp.media objeto 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 image-update evento en el editor de la publicación agregando un detector de eventos al wp.media objeto.


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 puedes aprovechar Guion bajo, 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 útil utilidad de subrayado para obtener nuestras proporciones de tamaño de imagen una vez que editor:image-update evento ha sido despedido.


// 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 wp.media objeto, asegúrese de mirar el código en wp-tevko-responsive-images.js.

El atributo de tamaños

Actualmente, este complemento no agrega un sizes atributo para complementar el srcset atributo. 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 sizes atributo 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 de la w El descriptor ahora debe ir seguido de un sizes atributo. Omitiendo el sizes El atributo hará que el marcado sea técnicamente inválido, mientras que aún 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 haya 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 de la picture elemento, 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 sizes atributo y 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 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.

Deja un comentario