Vamos a hablar sobre el thumbnail en wordpress, también conocido como imagen destacada y que dentro del desarrollo de la plantilla es otro de esos aspectos a tener en cuenta.

Introduciendo thumbnails dentro de nuestra plantilla

Por defecto el thumbnail no funciona en las plantillas de wordpress que creemos, pero no debemos de preocuparnos, el uso es muy sencillo , tan solo tenemos que añadir la siguiente línea dentro de nuestro archivos functions.php

add_theme_support( 'post-thumbnails' );

De esta forma tan simple ya podemos usar las funciones del thumnbail y además aparecerá la opción de añadir imagen destacada en el gestor de wordpress.

Al añadir esta función podremos usarla con ciertos tamaños específicos como vemos a continuación:

the_post_thumbnail('thumbnail');    // Tamaño miniatura 150x150 píxeles 
the_post_thumbnail('medium');       // Tamaño mediano 300x300 píxeles
the_post_thumbnail('large');        // Tamaño grande 640x640 píxeles
the_post_thumbnail('full');         // La resolución original

Los tamaños que vienen definidos por defecto se pueden modificar de forma sencilla utilizando la pestaña de ajustes -> medios dentro del gestor de contenidos

Añadiendo nuevos tamaños de thumbnail en wordpress

No solo eso, también podemos introducir imágenes con un tamaño especial por medio de la función add_image_size que puede recibir cuatro parámetros:

1. el nombre de la imagen destacada
2. ancho
3. alto
4. true o false si queremos que la imagen se recorte o no para adaptarse al tamaño

De esta manera nos quedaría la función en la siguiente forma:

add_image_size( 'nombre-imagen', 450, 450, true );

Y para usarla deberíamos de utilizar la función the_post_thumbnail() con el nombre de la imagen como parámetro

the_post_thumbnail( 'nombre-imagen');

Controlando la existencia del thumbnail

Puede ocurrir también que por nuestras especificaciones o diseño, siempre queramos que haya una imagen destacada aunque la entrada no la tenga. En ese caso, lo que debemos hacer es controlar que exista y si no lo hay pues introducir otra imagén, en el siguiente código vemos como funciona.

<?php if ( has_post_thumbnail() ) { the_post_thumbnail(); } else { ?>
    <img src="ruta de la imagen por defecto" alt="<?php the_title(); ?>" />
<?php } ?>

Donde la ruta de la imagen por defecto yo recomiendo que utilices alguna imagen que ya esté controlada dentro de la propia plantilla dejando la imagen algo así como:

<img src="<?php echo get_template_directory_uri();?>/img/logo.jpg" alt="<?php the_title(); ?>" />

Incluyendo como imagen destacada la primera imagen de un post

Ahora imaginemos que lo que pretendemos es tomar una imagen desde el contenido, sin necesidad de introducir una imagen destacada, con el siguiente código se logrará tal efecto, ya que primero controla que no haya imagen destacada propiamente dicha y si no la hay toma la primera que encuentra en el texto.

function imagen_destacada_automatica() {
    global $post;
    $ya_tiene_imagen_destacada = has_post_thumbnail($post->ID);
    if (!$ya_tiene_imagen_destacada)  {
    $attached_image = get_children( "post_parent=$post->ID&post_type=attachment&post_mime_type=image&numberposts=1" );
        if ($attached_image) {
            foreach ($attached_image as $attachment_id => $attachment) {
                set_post_thumbnail($post->ID, $attachment_id);
            }
           }
     }
}
add_action('the_post', 'imagen_destacada_automatica');
add_action('save_post', 'imagen_destacada_automatica');
add_action('draft_to_publish', 'imagen_destacada_automatica');
add_action('new_to_publish', 'imagen_destacada_automatica');
add_action('pending_to_publish', 'imagen_destacada_automatica');
add_action('future_to_publish', 'imagen_destacada_automatica');

Añadiendo los thumbnails dentro del listado de entradas de WordPress

Una opción muy interesante para algunos proyectos puede ser el que se muestren los thumbnails en la parrilla donde están todas las entradas, de esa forma se puede saber cuáles de ellas tienen o no tienen.

En mi opinión esto es algo que puede servir para sitios con muchas entradas en diferentes idiomas por ejemplo donde tener controladas los thumbnails con un simple golpe de vista. De todas formas yo siempre consideraría crear un tamaño específico de imagen destacada para esta presentación con un tamaño por ejemplo de 60×60 para que no se viera la imágnes demasiado grandes y que destruyan así la funcionalidad que buscamos.

El código es el siguiente:

add_filter('manage_posts_columns', 'posts_columns', 5);
add_action('manage_posts_custom_column', 'posts_custom_columns', 5, 2);
function posts_columns($defaults){
    $defaults['riv_post_thumbs'] = __('Thumbs');
    return $defaults;
}
function posts_custom_columns($column_name, $id){
        if($column_name === 'riv_post_thumbs'){
        echo the_post_thumbnail( 'enana' );
    }
}

Controlando el thumbnail por css

Ya hemos visto diversas formas de controlar tamaños, añadir en lugares y jugar con el thumbnail, pero está claro que con el CSS podemos hacer muchas más cosas, como ponerle bordes, crearle efectos… Por esta razón lo normal es querer tocar los estilos de las mismas y para ello tan solo tenemos que editar los siguientes estilos en nuestro archivo style.css o bien crearlos en algún plugin como simple custom css

• img.wp-post-image
• img.attachment-thumbnail
• img.attachment-medium
• img.attachment-large
• img.attachment-full
• img.nombre-imagen-que-hayas-creado

¿os ha parecido interesante el artículo? ¿conocéis más usos que puedan incluirse sobre el uso del thumbnail en wordpress? Deja tu comentario…