Recursos útiles para el desarrollo de temas

Funciones de WordPress para obtener la ruta de la imagen destacada y otros atributos

En WordPress las imágenes destacadas son fotos de muestra o miniaturas que pueden aparecen en varios lugares de una web, dependiendo del tema y su diseño. Por ejemplo, suelen encontrarse imágenes de este tipo en el lateral (entradas recientes o artículos relacionados), en listados de categorías o etiquetas, en entradas destacadas en la página de inicio, o incluso como fondo de una página.

La función para utilizar estas imágenes (en inglés “featured image” o “post thumbnail”) es una de las más utilizadas en el desarrollo de temas para WordPress. Recuperar la imagen destacada desde las plantillas es sencillo, gracias a todas las funciones “prefabricadas” que están disponibles, pero a menudo necesitamos obtener otros atributos de la imagen, por ejemplo las dimensiones (anchura, altura), o la ruta de la foto en miniatura u otros tamaños.

Cómo obtener la ruta de la imagen destacada a cualquier tamaño

La función más conocida y fácil de utilizar a la hora de trabajar con imágenes destacadas en WordPress es the_post_thumbnail. Al incluirla en nuestras plantillas nos devuelve el código HTML ya formado, que incluye el tamaño, la ruta, las clases y el texto alternativo:

<img width="750" height="500" src="http://www.dominio.com/ruta/imagen/destacada.jpg" class="attachment-post-thumbnail wp-post-image" alt="" />

Pero muchas veces no será este código HTML lo que necesitamos, sinó cada atributo por separado. Por ejemplo, si sólo necesitamos la ruta completa de la imagen destacada a tamaño completo, una manera de obtenerla sería utilizando la función wp_get_attachment_url:

<?php 
// Ruta de la imagen destacada (tamaño completo)
global $post;
$thumbID = get_post_thumbnail_id( $post->ID );
$imgDestacada = wp_get_attachment_url( $thumbID );
echo $imgDestacada;
?>

Otro método un poco más versátil y preciso es recurrir a wp_get_attachment_image_src, que nos permite elegir fácilmente el tamaño de la imagen:

// Ruta de la imagen destacada (miniatura y otros tamaños)
global $post;
$thumbID = get_post_thumbnail_id( $post->ID );
$imgDestacada = wp_get_attachment_image_src( $thumbID, 'TAMAÑO' ); // Sustituir por thumbnail, medium, large o full
echo $imgDestacada[0];

En este caso tenemos que sustituir la palabra “TAMAÑO” por una de estas cuatro posibilidades:

  • thumbnail: si necesitamos la ruta de la miniatura
  • medium: tamaño mediano
  • large: tamaño grande
  • full: tamaño completo, es decir, tal como se ha subido la foto al sistema. En este caso conviene ir con cuidado porque la imagen podría ser muy grande y pesada.

Para no repetir el código anterior cada vez que queremos utilizarlo en una plantilla, lo suyo sería incluirlo en forma de función en el archivo functions.php del tema que esté activado:

/*
 * Función para imprimir la ruta de la imagen destacada.
 * Ejemplo de utilización: echo atrib_imagen_destacada();
 */
function atrib_imagen_destacada() {
	global $post;
	$thumbID = get_post_thumbnail_id( $post->ID );
	$imgDestacada = wp_get_attachment_image_src( $thumbID, 'thumbnail' ); // Sustituir por thumbnail, medium, large o full
	return $imgDestacada[0]; // 0 = ruta, 1 = altura, 2 = anchura, 3 = boolean
}

Después, para obtener la ruta (u otro de los atributos que ahora veremos) bastaría añadir en el punto de la plantilla deseado:

echo atrib_imagen_destacada();

Cómo obtener la altura o anchura de la imagen destacada

La función anterior no sólo devuelve la ruta de la imagen destacada. En realidad se trata de un array (vector, matriz) que ofrece cuatro datos o atributos relacionados con estas fotos de muestra. Podemos acceder a ellos cambiando el cero que aparece al lado de la variable “imgDestacada”:

  • En la posición [0] devuelve la ruta de la imagen al tamaño seleccionado
  • En la posición [1] nos devuelve la altura en pixels
  • En la posición [2] nos devuelve la anchura en pixels
  • En la posición [3] nos devuelve “false” si la imagen no es el tamaño original o si no está disponible

Por tanto, en el ejemplo anterior sólo tendríamos que cambiar la variable $imgDestacada[0] en la linea 9.

Aquí podemos ver las cuatro posibilidades:

// Atributos de la imagen destacada (ruta, altura, anchura, boolean)
global $post;
$thumbID = get_post_thumbnail_id( $post->ID );
$imgDestacada = wp_get_attachment_image_src( $thumbID, 'full' ); // thumbnail, medium, large, full
echo 'Ruta: ' . $imgDestacada[0] . "\n";
echo 'Altura: ' . $imgDestacada[1] . 'px.' . "\n";
echo 'Anchura: ' . $imgDestacada[2] . 'px.' . "\n";
echo 'Boolean: ' . $imgDestacada[3];

Recuerda que en WordPress los tamaños de las imágenes destacadas los define el usuario desde Ajustes > Medios.

Un paso más allá: incluir imágenes destacadas con lenguaje natural

¿Cómo podríamos mejorar esto para poder incluir atributos de las fotos destacadas más fácilmente, de una manera más intuitiva? Combinando las funciones anteriores, podríamos simplificar el código de nuestros temas para poder utilizar un lenguaje un poco más natural.

La idea es obtener información sobre la imagen destacada en una sola linea y que sea fácil de recordar. Por ejemplo: obtener la_imagen_destacada( ‘tamaño’, ‘atributo’ ).

La función en este caso podría ser:

/*
 * Función para obtener atributos de
 * la imagen destacada más fácilmente:
 * Ruta, tamaño, anchura, altura...
 * Utilización: echo la_imagen_destacada( 'thumbnail', 'url' )
 */
function la_imagen_destacada( $size = 'full', $attr = 'url' ) {

	global $post;
	$thumbID = get_post_thumbnail_id( $post->ID );
	$img_attributes = wp_get_attachment_image_src( $thumbID, $size );

	if ( $attr == 'url' ) $p = 0;
	elseif ( $attr == 'width' ) $p = 1;
	elseif ( $attr == 'height' ) $p = 2;
	elseif ( $attr == 'boolean' ) $p = 3;

	return $img_attributes[$p];

}

La función anterior nos permite recuperar cualquiera de los atributos disponibles así:

// Para obtener la ruta de la miniatura:
echo la_imagen_destacada( 'thumbnail', 'url' );

// Para recuperar la ruta de la imagen a tamaño completo:
echo la_imagen_destacada( 'full', 'url' );

// Si necesitamos la anchura de la miniatura:
echo la_imagen_destacada( 'thumbnail', 'width' );

// Si necesitamos la altura del tamaño medio
echo la_imagen_destacada( 'medium', 'height' );

Cómo activar las imágenes destacadas en WordPress

Lógicamente, todo lo anterior no sirve de nada si el tema que hemos creado no está preparado para utilizar imágenes destacadas.

Para que aparezca la caja (metabox) que hace posible gestionar estas imágenes desde las pantallas de edición de páginas y entradas es necesario que los temas declaren que están preparados para utilizarlas en las plantillas. Desde la versión de WordPress 2.9 es posible activarlas añadiendo una solo linea en functions.php o en cualquier archivo de funciones:

// Activar imágenes destacadas en páginas y entradas
add_theme_support( 'post-thumbnails' );

Más información (en inglés): https://codex.wordpress.org/Post_Thumbnails

Cómo obtener sólo las entradas que tienen asignada una imagen destacada

En muchos sitios web vemos frecuentemente que se muestran entradas destacadas o recientes en la página de inicio, con su correspondiente imagen. Cuando una de estas entradas no tiene imagen el diseño a veces queda desequilibrado o incompleto, y puede que no nos interese mostrarla.

Una manera sencilla para recuperar únicamente las entradas que tienen una imagen destacada asignada sería utilizar la función has_post_thumbnail() cuando generamos la consulta, especificando que se imprima la información (título, URL de la imagen, link, etc.) sólo si se da esta condición. Ejemplo:

	global $post;
	$args = array(
		'post_type'  => 'post',
		'posts_per_page' => 4
	);
	$newloop = new WP_Query( $args );
	while ( $newloop->have_posts() ) : $newloop->the_post();

		// Comprueba si la entrada tiene imagen destacada.
		if ( has_post_thumbnail() ) {

			$thumbID = get_post_thumbnail_id( $post->ID );
			$imgDestacada = wp_get_attachment_image_src( $thumbID, 'thumbnail' ); // Thumbnail, medium, large, full
			echo '<div class="entrada">';
			the_title();
			echo $imgDestacada[0]; // 0 = ruta, 1 = altura, 2 = anchura, 3 = boolean
			echo '</div>';

		}

	endwhile; wp_reset_postdata();

De esta manera podemos recuperar la lista de entradas con imagen destacada, dejando el resto fuera de la consulta.

Comentarios

  1. Robi Alfaro

    Excelente, Gracias!

  2. Diego

    Excelente , Muy bueno!!

  3. Bertin

    Es el mejor articulo que he leido, Muchas Gracias

  4. rafael

    Hola, muchas gracias muy claro todo.
    Solo tengo una duda si digamos tengo un X donde quiero colocar mi imagen destacada, pero si el usuario aun no hay una imagen destacada que no coloque nada. Como hago.
    Porque me sale un cuadrado donde debería estar la imagen destacada. como podría hacer?
    gracias.

  5. Daniel

    Hola Rafael.
    Para comprobar si la entrada tiene una imagen destacada asignada puedes utilizar la función has_post_thumbnail(): http://codex.wordpress.org/Function_Reference/has_post_thumbnail

    Con esto puedes mostrar una cosa si hay imagen destacada y otra diferente si no la hay. Por ejemplo:

    if ( has_post_thumbnail() ) {
          echo 'Esta entrada tiene asignada una imagen destacada. Esta:';
          the_post_thumbnail();
    } else {
          echo 'No hay imagen destacada.';
    }
    
  6. Rox

    Mil gracias!!! que buen aporte.

  7. Axel

    Muy bueno el tutorial. Tengo una duda. Si deseamos que la imagen destacada se muestre sólo en los thumbnails de la home por ejemplo, pero que no se vea dentro del post?
    Muchas gracias.

  8. Mayco

    Gracias amigo, me ayudó bastante en ponerle imagen destacada a las entradas con tan solo un código. Saludos.

  9. manuel

    como podria agragar otra caja de featured imagen
    http://puu.sh/lkuCq/a4c27af1a6.png osea una = debajo de esa solo que con otro id y otra imagen gracias de antemano

  10. Diego Muñoz

    Muy buena pagina, gracias por este post.

  11. Chino3100

    Gracias, ya estoy tratando de implementarlo en mi blog. Saludos

  12. Gabriel

    Hola Daniel !!

    Me aburrí de buscar sobre el tema, hasta que te encontré, y creo que debes saber cómo

    Quiero destacar una imagen sin subirla a mi wordpress, así evitar sobrecargar el sitio, ¿se entiende?

    Hay un plugin que dice hacerlo, pero está la versión es 0.1

    https://wordpress.org/plugins/network-shared-media/

    ¿Habría que programar un plugin nuevo para así, si quiero tener otro blog, no tener que subir la misma imagen 2 veces al servidor, se entiende??

    GRACIAS !!

  13. Daniel

    Hola Gabriel.
    El plugin que comentas sirve para compartir imágenes entre diferentes “blogs” dentro de una instalación multisite (WordPress Network). Lo probé hace tiempo y funcionaba, aunque es verdad que parecía un poco anticuado.

    Otra solución podría ser utilizar este otro plugin, que sirve para asignar imágenes destacadas a partir de una URL:

    Nelio External Featured Image
    https://wordpress.org/plugins/external-featured-image/

  14. Isamá

    Y como se podría quitar la “imagen destacada” del post. Me gustaría que solo estuviera como miniatura en la pagina principal, una vez que se abre el post no quiero que vuelva aparecer…

    ¿Como se hace? Gracias!

  15. Daniel

    Hola Isamá.
    Que la imagen destacada aparezca o no en el contenido de la entrada depende de cada tema. Para eliminarla, una solución sería editar directamente la plantilla (normalmente “single.php” o “content-single.php”).

    Otra solución más sencilla podría ser ocultar la imagen con CSS. Algo así (puede que las clases que utiliza tu tema sean diferentes):

    .single-post .attachment-thumbnail { display: none; }
  16. Jonathan

    Buena tarde.
    Apenas estoy adentrándome a WordPress, así que hay varios temas y términos que desconozco.
    Estoy creando/modificando una página para una tienda de discos. Me está dando problemas las imágenes en la sección de entradas. Básicamente las entradas serán noticias. Pero a la hora de agregar “imagen destacada” me sale muy grande la imagen y hasta arriba. Quiero agregarla de esa forma para que también aparezca en la vista preliminal. ¿Hay forma de establecer que la imagen destacada aparezca bajo cierto porcentaje de la original y en otra posición que no sea al inicio de la entrada?
    Gracias.

  17. Daniel

    Hola Jonathan.
    Las imágenes destacadas pueden aparecer en cualquier sitio de la web y con cualquier estilo. Todo depende del tema que estés utilizando. Con CSS puedes controlar el aspecto de las imágenes (tamaño, posición, bordes, etc.) y editando las plantillas y funciones del tema puedes cambiar los lugares donde se muestran.

    Por ejemplo, puedes añadir una regla CSS para que las fotos en las entradas ocupen la mitad del ancho del bloque contenedor (puede que las clases que utiliza tu tema sean diferentes):

    .single-post .attachment-thumbnail { width: 50%; }
  18. isra

    Hola, está genial este post. Me ha sido muy útil. Pero me surge una duda, ¿como conseguiriamos la url de una imagen de un custom post Type?

  19. Adrian

    Hola Daniel ¿habría alguna forma de mostrar en el query solo los post que tengan una imagen destacada?

    Me explico: Para el index necesito llamar a 4 post como “adelanto” pero hay muchos post que necesito que no tengan imagen destacada pero en el index mostrar esto visualmente no queda bien

  20. Daniel

    Hola Adrian.
    Sí, una manera sería crear una consulta añadiendo “has_post_thumbnail” como condicional antes de imprimir la información de la entrada. He incluido un ejemplo más arriba, al final de la entrada.

  21. pablo

    Buenas tardes,
    Acabo de encontrar este post y la verdad que me ha sido de mucha ayuda.

    Quisiera obtener las URLs de todos los videos, las imágenes, las categorías y la de todos los post, espero que me puedas ayudar.
    Un saludo y muchas gracias por este gran post

  22. Mix Jhonsy

    Hola Daniel, buenas tardes.
    Estoy a punto de lanzar mi blog, pero al hacer las pruebas de compartir los post veo que en Facebook solo me sale la dirección de la pagina y sin imagen destacada y sin el extracto del post.
    Ya he ensayado por medio de plugins y nada. Agradezco la orientación. Te adjunto una dirección de un post de la pagina: http://www.laprensafutbolera.com/la-seleccion-colombia-2017-ano-definitivo-para-ir-al-mundial/

Y tú qué opinas?

Las URLs se convertirán en enlaces automáticamente. Tu dirección de email no se publicará ni se utilizará para enviar ningún tipo de información. Los mensajes que no aporten nada al tema que se trata en esta entrada se borrarán. Las imágenes que aparecen al lado de cada autor utilizan el servicio de Gravatar. Recuerda que puedes usar etiquetas HTML como <a href>, <code>, <em> o <strong> en los comentarios.

(necesario)

(opcional)