Trabajando con imágenes receptivas en WordPress

Hasta hace poco, trabajar con imágenes responsivas en WordPress era un verdadero desafío. A menos que los usuarios estuvieran dispuestos a escribir la funcionalidad ellos mismos, no tenían suerte. La otra opción era comprar un complemento o encontrar alguna otra solución, pero no había una funcionalidad central disponible que los desarrolladores pudieran aprovechar. Los temas creados sin soporte para imágenes receptivas a menudo tenían un rendimiento lento y la usabilidad a veces era inestable en diferentes tamaños de pantalla. Esos no son exactamente atributos que los clientes y usuarios asocian con una buena funcionalidad.

Afortunadamente, todo esto cambió con el lanzamiento de WordPress 4.4. Ahora la funcionalidad para imágenes receptivas se incluye directamente en WordPress, lo que permite a los desarrolladores trabajar con ellas también en temas. Esto se logró tomando un complemento de imágenes receptivas y haciéndolo parte del núcleo de WordPress.

como funciona todo

Obviamente, a menos que ya lo haya hecho, su primer paso es actualizar a WordPress 4.4. Una vez que haya completado la actualización, si ve el código fuente de su sitio, notará que las imágenes en su sitio ahora tienen dos nuevos atributos: sizes y srcset . Estos atributos están filtrados, lo que significa que todos los tamaños de imagen disponibles están presentes, pero las dimensiones siguen siendo consistentes con la imagen original. El atributo srcset no permitirá el recorte personalizado en los casos en que la relación de aspecto no sea la misma que la de la versión original de la imagen. Esto es para garantizar que la calidad de la imagen no se vea comprometida cuando se muestra en la pantalla de un usuario.

Meterse debajo del capó y hacer cambios

WordPress ha agregado imágenes receptivas como función de fondo, lo que significa que el proceso ocurre automáticamente. Cuando carga una imagen con el cargador de medios, los atributos se aplican a esas imágenes sin ninguna intervención de su parte. Esto también es útil para la optimización de imágenes.

Debido a que es una función de fondo, las imágenes receptivas no vienen con una interfaz de usuario, simplemente suceden. Como desarrollador, puede modificar el archivo functions.php en cada uno de sus temas para asegurarse de que sus imágenes reciban un atributo de sizes que sea preciso. Recuerde: cuando quiera hacer referencia a imágenes receptivas, eso significa los atributos de etiqueta de imagen de sizes y srcset .

Atributos predeterminados

A medida que comience a trabajar con esta función, notará que WordPress es bastante bueno para encontrar todos los tamaños posibles y agregarlos al atributo srcset . Desafortunadamente, pueden surgir problemas cuando se trata de la previsibilidad del atributo de sizes . Este es el atributo que se usa para comunicar el ancho de la imagen a los navegadores para que las imágenes estén disponibles y se puedan ver en cualquier pantalla.

Configurar este atributo como predeterminado funciona de varias maneras. La primera es que obliga a aplicar el atributo de sizes a cada imagen. Esto es útil teniendo en cuenta que ahora es un requisito obligatorio. La segunda es que no permite que los navegadores utilicen una fuente de imagen más ancha que el tamaño original de la imagen. Desafortunadamente, el código CSS que se utiliza para ajustar el tamaño de la imagen según el ancho de la pantalla (como las consultas de medios) puede hacer que este valor predeterminado sea mucho menos útil.

Filtrar ganchos para desarrolladores de temas

Debido a que este atributo predeterminado solo funciona con imágenes que no han sido modificadas por el código CSS, WordPress ha creado ganchos de filtro para que los utilicen los desarrolladores de temas. Simplemente ajusta el atributo de sizes para todas las imágenes usando este gancho. Como resultado, puede estar seguro de que el atributo de sizes que se ofrece será ideal en cada situación.

una advertencia

Antes de continuar, tomemos un minuto para afirmar que la opción de atributos predeterminados no es la mejor manera de proporcionar una buena funcionalidad de imagen receptiva. De hecho, debe trabajar para evitar crear temas que dependan de este valor predeterminado. La razón de esto es que el atributo predeterminado evita que los navegadores modifiquen la fuente de la imagen cuando el área de visualización no es tan grande como el tamaño de la imagen original. Los navegadores tampoco pueden modificar la fuente si ha sido modificada por CSS y se necesita una imagen más grande.

Filtrado de imágenes

Como desarrollador de temas, puede usar el filtrado en sus imágenes para obtener un atributo de sizes que sea preciso. Esto se puede lograr usando un gancho para la función de WordPress, wp_calculate_image_sizes . Puede usar esta función para que funcione con su tema actual. Puede realizar cambios que apliquen un atributo de diferentes sizes a diferentes tipos de imágenes.

Las nuevas funciones que vienen con esta versión ahora hacen posible que los atributos de sizes y srcset se apliquen a todas las imágenes que haya agregado usando el cargador de medios de WordPress. También le permite agregar los atributos a las imágenes en sus publicaciones. Echa un vistazo a wp_get_attachment_image_sizes . Esto devuelve un atributo de sizes que puede capturar y cambiar a través de un filtro en el archivo functions.php para su tema. Del mismo modo, wp_get_attachment_image_srcset hace lo mismo, solo para el atributo srcset .

Imágenes receptivas y su tema personalizado

Las nuevas funciones que vienen con esta última versión vienen acompañadas de muchos ganchos que puede usar para proporcionar un soporte efectivo para las imágenes receptivas dentro de su tema. Estos ganchos incluyen lo siguiente:

Wp_calculate_image_sizes : un enlace que los desarrolladores de temas pueden usar para ajustar el atributo de sizes para trabajar con los puntos de interrupción que están presentes en su tema.

Max_srcset_image_width : un gancho que un desarrollador de temas podrá usar para filtrar según el ancho máximo de las imágenes que se encuentran en el atributo srcset .

W_calculate_image_srcset : un gancho que brinda a los desarrolladores la capacidad de filtrar según los atributos de srcset .

Más información sobre la compatibilidad con imágenes adaptables

El manual para desarrolladores de WordPress puede proporcionar más orientación cuando se trata de usar estos ganchos de manera efectiva. La investigación que debe realizar variará según su nivel de comodidad al realizar este tipo de ajustes entre bastidores. Si usted es un desarrollador de temas que persigue esto estrictamente como un pasatiempo, puede optar por experimentar un poco. Por otro lado, si es un desarrollador de temas profesionales, es posible que desee invertir en el tiempo y los recursos necesarios para dominar verdaderamente esta actualización.

Beneficios de actualizar

Si aún no ha actualizado WordPress (o si su host administrado de WordPress aún no se ha actualizado por usted), sus usuarios se beneficiarán de grandes ventajas cuando lo haga. El soporte de imágenes sensibles puede mejorar el rendimiento de la página, ya que sus páginas no perderán el tiempo bajando imágenes que son demasiado grandes. Los usuarios también notarán una mejora muy impresionante en la calidad de las imágenes. No verán la 'elaboración de salchichas' que se incluye en todo. En cambio, solo verán que funciona bien.

Como desarrollador, deberá ajustar el atributo de sizes en cada uno de los archivos functions.php para todos sus temas. Sin embargo, una vez que haya hecho este esfuerzo inicial, las cosas se vuelven mucho más fáciles. Una vez que haya abordado la curva de aprendizaje, encontrará que trabajar con esta nueva funcionalidad es bastante natural.

Es posible que necesite algo de investigación y práctica para familiarizarse con esta nueva funcionalidad y obtener compatibilidad con imágenes receptivas para trabajar con sus temas personalizados. Sin embargo, si está dispuesto a buscar en el manual del desarrollador y resolver las cosas, sus clientes realmente apreciarán la mejora en el rendimiento y la funcionalidad. Esto ha tardado mucho en llegar, y los desarrolladores de temas experimentados y aquellos encargados de mantener temas personalizados están entusiasmados con esta actualización.