Gestiona el uso de imágenes en WordPress

18 de mayo de 2021

En relación al tema sobre la manera mejor de cargar las imágenes en la web, hoy voy a enfocar el tema en la aplicación práctica cuando trabajamos en WordPress.

WordPress dispone de varias funciones para trabajar con las imágenes. Esto nos va a permitir usar un código HTML homogéneo, mejor estructurado y con menos trabajo por nuestra parte, si lo comparamos con el trabajo que nos daría hacerlo a mano. Por otro lado, también nos va a proporcionar los distintos tamaños de imagen disponibles e incluso generar, con ellos, el atributo srcset, evitando la descarga de imágenes grandes en pantallas pequeñas y con el consiguiente beneficio para el usuario y la red.

Cargando imágenes en WordPress

La primera función que voy a traer es wp_get_attachment_image()

<?php echo wp_get_attachment_image( $image_id, $image_size, $icon, $attributes ); ?>
Lenguaje del código: PHP (php)

Esta función va a generar un html como este:

<img src="/ruta/de/mi/imagen.jpg" alt="descripcion alternativa de la imagen o su función" loading="lazy" width="" height="" srcset="/ruta/de/mi/imagen_pequeña.jpg (),/ruta/de/mi/imagen_mediana.jpg ()">
Lenguaje del código: HTML, XML (xml)

Ya ves, ¡este html, lo tiene todo! Un src, un alt, el ancho y alto de la imagen para el tamaño seleccionado, las rutas para otros tamaños de imagen, y el atributo para que el navegador gestione la carga diferida. Y si necesitas aplicarle algún atributo más, puedes añadirlos como un array asociativo cuya clave será el atributo y el valor… pues el valor del atributo.

<?php echo wp_get_attachment_image( 5000, 'large, false, array( 'class' => 'mi-clase-1 mi-clase-2 [...]', 'otroatrubuto' => 'otro valor', ), ); ?>
Lenguaje del código: PHP (php)
<img src="/ruta/de/mi/imagen-5000-1024x1024.jpg" alt="descripcion alternativa de la imagen o su función" loading="lazy" width="1024" height="1024" srcset="/ruta/de/mi/imagen_pequeña.jpg (),/ruta/de/mi/imagen_mediana.jpg ()" class="mi-clase-1 mi-clase-2 [...]" otroatributo="otro valor">
Lenguaje del código: HTML, XML (xml)

Imágenes como fondo en WordPress

Si necesitas datos de las imágenes, pero no quieres todo el chorro de html, puedes usar:

wp_get_attachment_image_source( $image_id, $image_size );
Lenguaje del código: PHP (php)

Esta función proporciona un array de 4 elementos, donde:

  • [0] Es la URL de la imagen,
  • [1] es el ancho en píxeles,
  • [2] es el alto en píxeles,
  • [3] indica si la imagen es la original o una miniatura

Esto va a ser útil cuando, por ejemplo quieras usar una imagen como fondo de un bloque usando estilos en línea. Ejemplo:

<?php // Usamos la imagen destacada de un post como fondo de un div. $bg_image_id = ( has_post_thumbnail( $post_id ) ) ? get_post_thumbnail_id( $post_id ) : $default_image_id; $image = wp_get_attachment_image_src( $bg_image_id ); ?> <div class="mi-clase" style="background-image: url(<?php echo esc_url( $image[0] ) ); ?>"> </div>
Lenguaje del código: PHP (php)
if ( has_post_thumbnail( $post_id ) ) : get_post_thumbnail( $post_id ); post_thumbnail( $post_id ); endif;
Lenguaje del código: PHP (php)

CSS background responsive en WordPress

Últimamente me estoy yendo a generar pequeños bloques de media-queries en algunas plantillas. Tal que así:

<style> @media screen and (min-width: 1200px) { .responsive_background { background-image: url('<?php echo esc_url( wp_get_attachment_image_url( $image_id, 'full' ) ); ?>'); } } @media screen and (min-width: 768px) and (max-width: 1199.98px) { .responsive_background { background-image: url( '<?php echo esc_url( wp_get_attachment_image_url( $image_id, 'large' ) ); ?>'); } } @media screen and (max-width: 767.98px) { .responsive_background { background-image: url('<?php echo esc_url( wp_get_attachment_image_url( $image_id, 'medium' ) ); ?>'); } } </style> <div class="responsive_background"> ... </div>
Lenguaje del código: HTML, XML (xml)

Bueno, sí que es cierto que se suele decir que es buena práctica extraer el CSS a un fichero, pero, poniéndolo en una balanza, ¿no es más ventajoso poder usar una imagen acorde en tamaño con el uso que se le va a dar?

Deja una respuesta

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

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.