Cómo utilizar la función wp_get_attachment_image en WordPress + Ejemplos útiles

wp_get_attachment_image es una función de WordPress que permite recuperar y mostrar fácilmente imágenes adjuntas basándose en sus IDs.

Tanto si estás creando un tema personalizado como un plugin, esta función proporciona una forma flexible de mostrar imágenes con tamaños y atributos personalizados. 

En este tutorial, repasaremos la función wp_get_attachment_image() y explicaremos sus parámetros. También proporcionaremos algunos casos de uso populares que puedes probar en tu sitio web con alojamiento WordPress.

Descarga la hoja de trucos de WordPress definitiva

Parámetros de la función wp_get_attachment_image

La función wp_get_attachment_image() permite a los usuarios recuperar un elemento HTML img para una imagen adjunta. 

wp_get_attachment_image( int $attachment_id, string|int[] $size = 'medium', bool $icon = false, string|array $attr = '' ); 

Por defecto, la función wp_get_attachment_image() requiere al menos un parámetro, el ID del adjunto, que es el identificador único de la imagen. La función muestra la imagen a tamaño completo sin atributos HTML adicionales o personalización. 

Además, puedes añadir varios parámetros adicionales para personalizar la salida de la imagen, como el tamaño de la imagen, la clase CSS o el texto alt:

$attachment_id

Esto es necesario para especificar el ID de la imagen adjunta que se mostrará. Si el parámetro está vacío o se establece en false, la función no devolverá ninguna imagen.

$size

Un parámetro opcional que define el tamaño de la imagen en WordPress a mostrar. Puedes especificar cualquier nombre de tamaño de imagen registrado, por ejemplo, miniatura, mediano, grande o un tamaño personalizado en píxeles.

$icon

Otro parámetro opcional que determina si la imagen debe tratarse como un icono. Si se establece en true, la función mostrará el icono del adjunto en lugar de la imagen real. 

$attr

Este parámetro te permite añadir más atributos a la etiqueta de imagen, como una clase o un estilo. Puedes pasar una matriz de pares clave-valor para añadir los siguientes atributos:

• class: maneja la clase CSS de la etiqueta de la imagen. Puedes añadir varias clases creando una lista separada por espacios. 
• alt: establece el texto alternativo de la imagen. Un valor de atributo alt es importante para la accesibilidad y propósitos SEO en WordPress.  
• srcset: especifica múltiples fuentes de imagen con diferentes resoluciones, tamaños o relaciones de aspecto. El navegador elegirá automáticamente la mejor fuente en función de la resolución de pantalla del dispositivo.
• sizes: funciona junto con el atributo srcset. Especifica el tamaño de la imagen que se muestra en una página en función del espacio disponible.
• loading: determina cómo se carga la imagen. Por ejemplo, el valor por defecto es lazy para lazy load. 
• decoding: permite especificar cómo debe interpretar la imagen el navegador. Los valores válidos son async para decodificar la imagen de forma asíncrona, sync para decodificar la imagen de forma síncrona, o auto.

Cómo utilizar wp_get_attachment_image

En esta sección, explicaremos cómo utilizar la función wp_get_attachment_image() de forma eficaz. Consulta el código que aparece a continuación para obtener más información:

<?php
if ( has_post_thumbnail() ) { // check if the post has a featured image
    $thumbnail_id = get_post_thumbnail_id(); // get the ID of the post thumbnail image
    $image = wp_get_attachment_image( $thumbnail_id, 'large' ); // get the HTML code for the post default thumbnail image
    echo $image; // display the image
}
?>

Esto es lo que hicimos:

1. Utilizar la función has_post_thumbnail() para comprobar si la entrada tiene una imagen destacada.
2. Aplicar get_post_thumbnail_id() para obtener el ID de la imagen destacada.
3. Usar la función wp_get_attachment_image() para obtener el código HTML de la imagen.
4. Pasar la variable $thumbnail_id como ID de la imagen y large como tamaño especificado.  
5. Emplear echo para mostrar el código HTML de la imagen en la página.

Recuerda que puedes sustituir el parámetro large por cualquier tamaño de imagen registrado.

Ejemplos de la función wp_get_attachment_image de WordPress

Echa un vistazo a algunos casos de uso populares de la función wp_get_attachment_image() para entender cómo puede ayudarte en tus proyectos de WordPress.

Generar una imagen HTML lista para usar

La forma más sencilla de probar la función wp_get_attachment_image() es pasarle un ID de adjunto de imagen.

<?php echo wp_get_attachment_image( 37);?>

Recuerda que en este ejemplo no proporcionamos ningún tamaño de imagen específico. Por lo tanto, la función recupera la imagen a tamaño completo con el ID de adjunto 37.

En HTML, la salida tendrá este aspecto. El texto alternativo existirá si ya está añadido:

<img width="500" height="500" src="http://example.com/wp-content/uploads/2024/03/image.jpg" class="attachment-full size-full" alt="Alt Attribute">

Por defecto, HTML establece las imágenes a tamaño completo en 500 píxeles de ancho y 500 píxeles de alto. Sin embargo, los valores reales de anchura y altura en píxeles pueden variar en función de sus dimensiones originales. 

Utilizar un tamaño personalizado

Las imágenes de tamaño personalizado pueden mejorar el rendimiento del sitio web al reducir los tiempos de carga de la página y mejorar el aspecto general. Además, garantizan la coherencia entre distintos dispositivos y pantallas:

<?php echo wp_get_attachment_image( 37, [ 100,100 ], true); ?>

En HTML, la salida tendrá este aspecto:

<img width="40" height="40" src="http://example.com/wp-content/uploads/2024/03/image.jpg" class="attachment-thumbnail size-thumbnail" alt="Description for the alt text">

En este caso, el segundo parámetro de la función wp_get_attachment_image() es una matriz que contiene la anchura y la altura en píxeles del tamaño de imagen solicitado. El tercer parámetro se establece en true, lo que significa que la función recortará la imagen a las dimensiones exactas especificadas en la matriz. 

Así es como se ve en un sitio web en vivo:

Mostrar todas las imágenes asociadas a la entrada

Puedes mostrar todas las imágenes asociadas a un ID de entrada específico. De este modo, podrás ver todas las imágenes relevantes sin tener que navegar por toda la entrada. 

<?php
$attachments = get_attached_media('image', get_the_ID());
if (!empty($attachments)) {
    foreach ($attachments as $image) {
        echo wp_get_attachment_image($image->ID, 'full');
    }
} 
?>

En este ejemplo, el código recupera todas las imágenes adjuntas de la entrada actual mediante la función get_attached_media() y las recorre mediante un bucle foreach.

Para cada imagen, llama a la función wp_get_attachment_image() para recuperar la versión a tamaño completo de la imagen con el ID del adjunto.

Especificar atributos de clase, Alt y título de una imagen

También es posible especificar atributos personalizados de clase, texto alt y título para una imagen. Todo lo que necesitas hacer es establecerlos en una variable. En nuestro caso, es $custom:

<?php
$custom = [ 'class' => 'my-class', 'alt' => 'alt text', 'title' => 'my title' ];
echo wp_get_attachment_image( 37, 'medium', false, $custom );
?>

En este ejemplo, el cuarto parámetro es una matriz que contiene los atributos adicionales para la etiqueta <img>.

Conclusión

wp_get_attachment_image() es una función versátil de WordPress que permite mostrar fácilmente imágenes adjuntas a entradas o páginas.

En este tutorial, hemos cubierto la función wp_get_attachment_image() y sus parámetros. También hemos proporcionado algunos casos de uso que puedes probar en tu sitio web de WordPress.

Esperamos que este tutorial te haya resultado útil. En caso de que tengas alguna pregunta, deja un comentario a continuación.