Como comenté en Grav: escribe un blog sin base de datos, prosigo con el objetivo de clonar (¿y quizá migrar definitivamente?) este blog desarrollado con WordPress a otro con Grav, un gestor de contenidos (CMS) basado en archivos y sin base de datos.

Según avanzo en esta tarea compruebo que trabajar con Grav hace que escribir sea mucho más sencillo porque facilita centrar la atención en el contenido, en lo importante. Por ejemplo, aunque Grav dispone de un panel de administración para controlar muchos aspectos de la configuración y las extensiones (plugins, temas), y sobre todo para crear nuevo contenido, realmente cuando trabajo con Grav escribo las entradas en un editor de texto simple (pluma con resaltado Markdown), y luego simplemente lo subo al sevidor vía FTP para publicarlo.

En este proceso de clonación, que me lo he tomado como transición y aprendizaje, intento migrar no sólo el contenido del blog original, sino también las funciones que considero importantes para mejorar la experiencia del usuario. Una de estas funciones es la de presentar entradas relacionadas.

Para ello, el directorio de plugins de Grav nos ofrece el plugin Related Pages, que me ha parecido correcto aunque insuficiente, especialmente si lo comparamos con el plugin que utilizo en WordPress para esta tarea, el fantástico Yuzo – Related Posts.

Por eso me he puesto manos a la obra y, como una pequeña aportación personal, a partir del plugin original de Grav, he modificado la plantilla para que junto al título de las entradas relacionadas muestre su correspondiente imagen (thumbnail). También es posible que muestre el extracto o sumario del post relacionado, pero en mi caso no me ha parecido interesante.

Lógicamente, lo primero que tenemos que hacer es instalar el plugin Related Page. Una vez instalado, recuerda que es importante copiar estos archivos y no trabajar con los originales:

• Configuración: user/plugins/relatedpages/relatedpages.yaml copiarlo a user/config/plugins/relatedpages.yaml.
• Plantilla: user/plugins/relatedpages/templates/partials/relatedpages.html.twig copiarlo a user/themes/antimatter/templates/partials/relatedpages.html.twig.

A partir de estas copias, podemos configurarlo y personalizar la plantilla a nuestro gusto.

Para añadir las imágenes de los posts, he dejado mi relatedpages.html.twig de esta manera:

Después personalizamos el estilo que se aplica a esta plantilla añadiento el siguiente código al archivo user/themes/antimatter/css/custom.css:

/* Posts relacionados */
.contenedor {  
  overflow: hidden;
  width: 100%;
}
.relacionados { 
    display: inline-block;        
    padding: 0;
    position: relative;
    width: 45%;
}
.relacionados:nth-child(odd) {   
    float: left;
}
.relacionados:nth-child(even) {   
    float: right;
}
.bannerrelacionados{
    display: block;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}
.bannerrelacionados img {    
    border: 0;
    max-width: 100%;
    display: block;
    margin-left: auto;
    margin-right: auto;
    -webkit-transition: all 0.8s ease;
    -moz-transition: all 0.8s ease;
    -o-transition: all 0.8s ease;
    -ms-transition: all 0.8s ease;
    transition: all 0.8s ease;
}
.bannerrelacionados img:hover{  
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    transform: rotate(360deg);
}
.titulorelacionados{
    text-align: center;
    width:100%;    
    overflow:hidden;
    white-space:nowrap;
    text-overflow: ellipsis;
    margin-top: 0px;
}

Este estilo está adaptado a mi configuración del plugin, que lo he ajustado para que muestre un máximo de 4 entradas relacionadas. Este diseño se adapta bastante bien a distintos tamaños de pantalla, presentando los posts relacionados en dos columnas de ancho variable.

El efecto final lo podemos comprobar en cualquier entrada del clon de este blog siempre que, por supuesto, tenga contenido relacionado.