En esta entrada, vamos a explorar juntos la API de imágenes responsivas de WordPress. Mencionaremos qué son las imágenes responsivas, por qué deberías usarlas, cómo hace WordPress que funcionen estas imágenes y qué hacer si quieres personalizarlas.

¿Qué son las imágenes responsive?

Imágenes con capacidad de respuestaes una imagen que puede adaptarse al tamaño de la pantalla del dispositivo en el que se está viendo. Esto es importante porque significa que la imagen siempre se verá bien independientemente del dispositivo en el que se vea.

Veamos.Un ejemplo.

La mayoría de los navegadores modernos tienen un modo especial para ver los diseños de las páginas web en dispositivos móviles. En los navegadores basados en Chrome, se llama modo de dispositivo, y en Firefox y Safari, modo de diseño adaptable. Normalmente puedes acceder a él desde las herramientas para desarrolladores de tu navegador. Cuando este modo está activado, puedes ver cómo se verá una página web en diferentes dispositivos.

Si observa la imagen de la cabecera en este ejemplo, verá que está recortada cuando la ve en su dispositivo móvil. Sin embargo, la imagen del área de contenido no lo está; solo muestra la imagen en un tamaño más pequeño.

Por lo tanto, es posible que desee mostrar una versión recortada de esa imagen en un dispositivo móvil y la imagen completa en un dispositivo de escritorio. Aquí es donde resultan útiles las imágenes con capacidad de respuesta.

Como puede ver en este ejemplo de imagen responsivaComo puede ver en , al cambiar a un dispositivo móvil, tanto la imagen de cabecera como la de contenido principal aparecen recortadas.

Aunque el conocimiento de cómo funcionan las imágenes responsivas está fuera del alcance de este tutorial, puede encontrar más información en la documentación web de MDN enMás información sobre cómo implementar imágenes responsivas en.

API de imágenes adaptables de WordPress

srcsetA partir de WordPress 4.4, la inclusión y atribución delfunción (matem.)tallasMarcaje de imágenes generadas, WordPress soporta de forma nativa imágenes responsive. Esto significa que está activado por defecto y que cualquier imagen generada por WordPress es automáticamente responsive.wp_get_attachment_image()

Para entender cómo funciona, veamos un ejemplo sencillo.

En primer lugar, añada la imagen a la biblioteca multimedia de su sitio de WordPress.

Si a continuación navega hasta el directorio de subida y ve dónde está almacenada la imagen, verá que hay varias versiones de la misma.

Esto se debe a que WordPress genera automáticamente varias versiones de una imagen en distintos tamaños, que pueden utilizarse en diferentes contextos.

Antes de que existieran las imágenes con capacidad de respuesta, los desarrolladores intentaban servir dinámicamente imágenes diferentes al navegador en función del tipo de dispositivo. El servidor comprobaba el tamaño del dispositivo y servía la imagen adecuada.

Esto puede hacerse utilizando la funciónagente de usuarioLa cadena se implementa como una cadena enviada desde el navegador al servidor que contiene información sobre el navegador y el dispositivo utilizados.

// comprueba la variable $_SERVER["HTTP_USER_AGENT"] para ver si se trata de una petición de dispositivo móvil
$isMob = is_numeric(strpos(strtolower($_SERVER["HTTP_USER_AGENT"]), "mobile"));

if($isMob){
    echo 'Usando dispositivo móvil...' ;
}else{
    echo 'Usando Desktop...' ; }else{ ;
}

Sin embargo, esto dificulta la realización de pruebas, ya que es necesario realizarlas en un dispositivo físico mediante la aplicaciónBrowserStacky otros servicios, o configurar una cadena de agentes de usuario en un entorno de prueba.

El diseño responsivo utiliza elementos como las consultas de medios para generar una única página que responderá en el navegador en función de aspectos como la anchura de la ventana gráfica y la densidad de visualización. Las imágenes con capacidad de respuesta siguen esta estrategia y envían toda la información al navegador por adelantado, dejando que este se encargue de cargar la imagen adecuada en lugar de tomar estas decisiones en el servidor antes de que se cargue la página.

Veámoslo en acción añadiendo la imagen a la entrada y ajustando su tamaño a tamaño completo en el editor.

Cuando previsualice la imagen, observará que la etiqueta de imagen contiene algo más que la URL de la imagen: también contiene una etiquetasrcsety un atributotallasAtributos.

<img decoding="async" fetchpriority="high" width="799" height="533" src="https://learnpress.test/wp-content/uploads/2023/09/water-4.jpeg" alt="" class="wp-image-9" 
     srcset="     https://learnpress.test/wp-content/uploads/2023/09/water-4.jpeg 799w,      https://learnpress.test/wp-content/uploads/2023/09/water-4-300x200.jpeg 300w,      https://learnpress.test/wp-content/uploads/2023/09/water-4-768x512.jpeg 768w" 
     sizes="(max-width: 799px) 100vw, 799px">

Echemos un vistazo más de cerca a esta etiqueta de imagen para entender lo que hacen estos atributos.

deberíasrcsetcontiene una lista de todas las versiones diferentes de la imagen generada por WordPress, y el ancho de esa imagen en píxeles.

En este ejemplo, hay 3 versiones diferentes de la imagen con anchos de799y769responder cantando300.

deberíatallasespecifica la anchura del diseño de la imagen para cada lista de condiciones de medios. En este ejemplo, las condiciones de medios son(max-width: 799px)y tiene dos anchos de diseño100vwresponder cantando799px.100vwIndica que la imagen se mostrará a 100% de la anchura de la ventana gráfica.799pxIndica que la imagen se mostrará a 799px.

Por lo tanto, en este ejemplo, si la anchura de la ventana gráfica es inferior a 799px, la imagen se mostrará a 100% de la anchura de la ventana gráfica; de lo contrario, la imagen se mostrará a una anchura de 799px.

El navegador puede entonces utilizar esta información para determinar qué imagen cargar en función del dispositivo (determinado por la anchura de la ventana gráfica) que está viendo la imagen. Ya no es necesaria la lógica del servidor, lo que acelera la solicitud de la página. Como las imágenes se sirven estáticamente, el navegador puede almacenarlas en caché, lo que acelera aún más los tiempos de carga de la página.

Nuevas funciones y ganchos

WordPress 4.4 introduce muchas funciones y ganchos nuevos que facilitan mucho el trabajo con imágenes responsivas.

• wp_get_attachment_image_srcset () - recupera el valor del atributo de adjunto de la imagensrcset.
• wp_calculate_image_srcset () - función de ayuda para calcular la fuente de la imagen que se incluirá en la propiedadsrcset.
• wp_get_attachment_image_sizes () - Crea el valor del atributo tamaño de la imagen.
• wp_calculate_image_sizes () - función de ayuda utilizada para crear el atributo de tamaño de la imagen.
• wp_image_add_srcset_and_sizes () -srcsetAlimgpara añadir atributos y cambiar su tamaño.

Para evitar la transferencia de datos asrcsetañade imágenes muy grandes, añade unmax_srcset_image_width (máquina) filtroPermite al tema establecer el ancho máximo de imagen para las imágenes contenidas en la lista.srcsetEl valor por defecto es de 2048 píxeles. El valor por defecto es de 2048 píxeles.

Marcado de imagen adaptable personalizado

Si es necesario, también se puede personalizar el marcado de las imágenes.

Puede utilizar filtrosresponder cantando(máquina) filtropara cambiar el valor por defectosrcsetresponder cantandotallaso utilizando el filtro wp_get_attachment_image_attributessobrescribirSe modifican los atributos o de las imágenes que no están incrustadas en el contenido de la entrada (por ejemplo, miniaturas de entradas, galerías, etc.), de forma similar a otros atributos de imagen.wp_calculate_image_srcset wp_calculate_image_sizes srcsettallas

Si está desarrollando un tema, también puede crear su propio marcado personalizado utilizando la funciónwp_get_attachment_image_srcset paradigma.

Veamos un ejemplo.

Supongamos que desea generar una salidaimgpara la etiqueta de esa imagen, pero sólo desea renderizar imágenes de tamaño medio y establecer una función personalizadatallasAtributos.

Por defecto, la imagen se muestra con una anchura de ventana de 100% para ventanas de menos de 799 píxeles, y con una anchura de 799 píxeles en ventanas más anchas en las que desee configurar la propiedad Tamaño para utilizar una anchura de imagen media de 768 píxeles.

Esto significa que debe establecer la propiedad size en(max-width: 768px) 100vw, 768px.

function get_custom_responsive_image( $attachment_id ) {
$img_src = wp_get_attachment_image_url( $attachment_id, 'medium' );
$img_srcset = wp_get_attachment_image_srcset( $attachment_id, 'medium' );
echo '<img src="' . $img_src . '" srcset="' . $img_srcset . '" sizes="(max-width: 768w) 100vw, 768px" alt="Nuestra imagen personalizada">';
}

A continuación, puede llamar a esta función en cualquier archivo de tema que admita PHP, como plantillas y secciones de plantillas en el tema Clásico, o patrones de bloques en el tema Bloque.

En este ejemplo, se añade al esquema predeterminado para el pie de página del tema TwentyTwelveThirteen, que se encuentra en el bloque de la parte superior del esquema. El ID de la imagen es 9, que puede pasar a la función:

	<!-- wp:group {"align":"wide"} -->
	<div class="wp-block-group alignwide" style="padding-top:var(--wp--preset--spacing--40)">
		<?php get_custom_responsive_image( 9 ); ?>
	</div>
	<!-- /wp:group -->

Si ve esto en el front-end, puede ver que la propiedad Tamaño personalizado se ha utilizado para esa imagen en particular.

Si pruebas esto en modo dispositivo, verás que en tamaños de dispositivo inferiores a 768 píxeles, la imagen se muestra a 100% del ancho de la ventana gráfica, y en tamaños superiores a 768 píxeles, la imagen se muestra a 768 píxeles de ancho.