Imagenes alternativas en las miniaturas de YARPP

A veces me encuentro que muchas entradas de los blogs que superviso no incluyen imagen destacada como norma general, esto es un problema a la hora de implementar el magnifico plugin de WordPress YARPP (Yet Another Related Posts Plugin) que nos permite mostrar al lector las entradas relacionadas al contenido que acaba de leer, consiguiendo así una mayor estancia de este en nuestra web y logrando por tanto un menor porcentaje en la tasa de rebote o bounce rate.

YARPP con nuestro propio estilo e imágenes dinámicas

YARPP nos permite mostrar las entradas relacionadas como una lista o como una serie de thumbnails o miniaturas que contienen la imagen destacada que hayamos designado a la entrada que se esta proponiendo, por lo tanto si no hay imagen destacada el plugin nos permite definir una imagen por defecto que se mostrara en tal caso. El problema es que como comente anteriormente, hay muchos casos en los que el blogger de turno no acostumbra a insertar imagen destacada en sus entradas y por lo tanto siempre se mostrara la imagen por defecto que hemos definido anteriormente.

Afortunadamente este inconveniente puede ser resuelto fácilmente mediante la posibilidad que nos ofrece YARPP de customizar la plantilla PHP que se encarga de mostrar las miniaturas así como su hoja de estilo CSS correspondiente, por lo tanto necesitamos:

Crear una plantilla para THUMBNAILS (recordad que YARPP permite varias formas de mostrar las entradas relacionadas).
Agregar los estilos CSS correspondientes al HTML generado en nuestra plantilla anterior.
Configurar YARPP para que use nuestra plantilla como formato de salida de las recomendaciones.

Creamos la plantilla

Como hemos visto antes, YARPP nos permite definir plantillas a nuestro gusto para mostrar de una manera mas o menos personalizada las recomendaciones a nuestros lectores, de hecho YARPP viene con varias plantillas de muestra que podemos reutilizar:

YARPP nos permite añadir nuestra propia plantilla

De hecho si es la primera vez y queremos activar la opción «Custom» nos preguntara si queremos copiar las plantillas de muestra en la carpeta de nuestro Theme, esto ultimo es importante, todas las plantillas y estilos se deberán crear en dicha carpeta de nuestro Theme actual, por lo que debemos tener acceso a nuestro servidor mediante FTP.

En nuestro caso no queremos copiar todas las plantillas de muestra ya que solo queremos una basada en la platilla THUMBNAILS que nos ofrece YARPP y que modificaremos para poder mostrar las imágenes que están dentro del contenido de la entrada y no la imagen destacada. Así que vamos al ataque, creando en primer lugar un archivo PHP e insertando el siguiente código:

<?php /*
Miniaturas relacionadas
Author: Lumilued
*/
?>

<?php if ($related_query->have_posts()):?>
    <h4>Quizás te interese alguna de las siguientes entradas:</h4>
    <ol>
        <?php while ($related_query->have_posts()) : $related_query->the_post(); ?>
            <li>
                <?php
                    $img = '';
                    if ( has_post_thumbnail() ) {
                        $img = get_the_post_thumbnail( $post->ID, 'related-thumbnail', array( 'title' => $title, 'alt' => $title ) );
                    }
                    else {
                        $attachments = get_children( array('post_parent' => $post->ID, 'post_status' => 'inherit', 'post_type' => 'attachment', 'post_mime_type' => 'image',  'numberposts' => 1 ) );

                        if ( count( $attachments ) > 0 ) {
                            $img = array_shift( $attachments );
                            $img = wp_get_attachment_image( $img->ID, 'related-thumbnail', true );
                        }
                    }
                    $extra_class = '';
                    if ( $img == '' ) {
                        $img         = wp_html_excerpt( get_the_excerpt(), 40 );
                        $extra_class = ' related-thumb-text';
                    }
                ?>
                <div>
                    <div>
                        <a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title(); ?>" alt="<?php the_title(); ?>">
                            <?php echo $img; ?>
                        </a>
                    </div>
                    <div>
                        <a href="<?php the_permalink() ?>" rel="bookmark">
                            <?php the_title(); ?>
                        </a>
                    </div>
                </div>
            </li>

        <?php endwhile; ?>
    </ol>
    <div style="clear: both"></div>
<?php endif; ?>

El código anterior hace una serie de operaciones por cada entrada recomendada a mostrar, en primer lugar comprueba si la entrada contiene una imagen destacada y en caso positivo la agrega como thumbnail, si no tenemos, entonces comprueba si dentro de la entrada existe contenido gráfico y si es así intenta recuperar la primera imagen encontrada, en caso de no tener ninguna imagen dentro de la entrada entonces procedemos a insertar un pequeño resumen o excerpt de 40 caracteres del texto de la entrada y lo agregamos sustituyendo así a la imagen (aunque con un poco de estilo podemos hacerlo encajar muy bien).

Guardamos el archivo con un nombre como puede ser yarpp-template-thumbs.php y lo subimos a la carpeta de nuestro Theme actual mediante FTP, dicha ruta debería ser algo como esto: /public_html/wp-content/themes/NUESTRO_THEME

Damos estilo a las miniaturas

Una vez hemos conseguido nuestra plantilla, debemos darle estilo ya que al ser una plantilla customizada esta deberá estar acompañada de un estilo definido en la misma carpeta, ya sea en nuestro style.css, custom.css que use el Theme.

Este podría ser un ejemplo de como podría quedar el código CSS, por supuesto vosotros debéis integrar al diseño general de la web en la que trabajéis:

/*---------------------------------------------
RELATED POST THUMBNAILS
-----------------------------------------------*/
.related-posts {
  list-style-type: none;
  margin: 0;
  height: 110px;
}
 
.related-posts li {
  padding: 0; margin: 0;
  float: left;
  margin-right: 5px;
}
 
.related-post {
  position: relative;
  padding: 3px;
  background-color: #C84C45;
  border: 1px solid #C84C45;
  width: 100px;
  height: 100px;
  overflow: hidden;
}
 
.related-post:hover {
  border: 1px solid #B52025;
}
 
.related-title {
  position: absolute;
  bottom: 3px;
  left: 0;
  font-size: 0.7em;
  width: 96px;
  margin-left: 3px;
  opacity: 0.5;
  padding: 1px 2px;
  text-align: center;
  line-height: 1.4;
  height: 30px;
  overflow: hidden;
  background-color: black;
  font-family: helvetica, arial;
}
 
.related-title a {
  text-decoration: none;
  color: white;
}
 
.related-thumb {
    background-color: #C84C45;
    font-size: 2.2em;
    height: 100px;
    line-height: 0.6;
    overflow: hidden;
    width: 100px;
}
 
.related-thumb a {
  text-decoration: none;
  color: #FF9999 !important;
}

.related-thumb img {
    -moz-border-radius: 3px 3px 3px 3px;
    border-radius: 3px 3px 3px 3px;
}

Este fragmento corresponde al estilo de nuestros thumbnails y debemos agregarlo al archivo de estilos vigente en nuestro theme.

Configuramos el plugin YARPP

Como colofón a nuestro trabajo nos queda activar la plantilla que acabamos de crear y ver como se muestra, así que dentro de nuestro panel de control o dashboard de WordPress y nos situamos en AJUSTES → Publicaciones Relacionadas (YARPP) y activamos la opción «Custom» que mostrara un desplegable con las posibles plantillas a elegir (en nuestro caso solo debería haber una llamada yarpp-template-thumbs.php):