Posts relacionados con miniaturas usando Json

Hay varias entradas bastante viejas (el reloj de la web es particularmente cruel y todo es viejo en cinco minutos) donde se explican diferentes métodos para mostrar entradas relacionadas en Blogger [1] [2] [3]

Muchos otros emplean LinkWithin que es un sistema externo que permite agregar un gadget para diferentes plataformas y es un método muy usado porque se ha puesto de moda y también porque muestra un imagen junto con el título y el enlace: Ver detalles en El escaparate de Rosa [1] [2]

Como no me gustan las modas ni los servicios externos, vamos a ver una forma de transformar el método original que mostraba una lista con los títulos y los enlaces de las entradas relacionadas para que sea similar al otro y se le añadan las miniaturas de las entradas.

Para eso, basta seguir con la idea de lo explicado en las entradas que hablaban de JSON y de la forma en que podemos acceder a los diferentes datos de los feeds de nuestro blog. Uno de ellos es justamente ese, la miniatura (si es que existe una imagen en el post) así que bastaría modificar aquellos scripts originales para leer más datos y luego, cambiar la forma en que son mostradas.

Repaso el tema de los posts relacionados.

Tiene tres partes; la primera es el script en si mismo y que agregamos a la plantilla antes de </head>:

<script type='text/javascript'>
//<![CDATA[
  ... acá pegamos el contenido del archivo de texto ...
//]]>
</script>

Allì sólo es necesario establecer los datos personales:

var relmaxamostrar = 4; // cantidad de entradas a ser mostradas
var relmaxlen = 100; // la cantidad de caracteres de los resumenes
var relimagenpodefecto = "URL_imagen"; // la imagen por defecto

Las otras dos partes requieren desplegar los artilugios de la plantilla. Buscamos el código donde se muestran las etiquetas en el footer de cada entrada y allí agregamos lo indicado en color:

<b:loop values='data:post.labels' var='label'>
  <a expr:href='data:label.url' rel='tag'><data:label.name/></a>
  <b:if cond='data:label.isLast != "true"'>,</b:if>
  <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=leerpostetiquetas&amp;max-results=50&quot;' type='text/javascript'/>
  </b:if>
</b:loop>

Eso, condicionará el llamado a JSON para que sólo funcione en las entradas individuales y leerá los feeds de las etiquetas de nuestro blog.

callback=leerpostetiquetas es la función de JavaScript que se ejecutará e interpretará esos datos
max-results=50 es la cantidad de datos a leer y puede ser cualquier número pero, siempre debe tenerse en cuenta que si el número es muy alto, el proceso será más largo y por lo tanto, la carga del blog será más lenta

El tercer paso es decidir donde vamos a mostrarlo. Normalmente, debajo de las entradas así que deberemos buscarlo y eso no es fácil de explicar porque depende de cada plantilla pero, por ejemplo, podemos intentar encontrar alguno de los DIVs donde se muestran el autor, la fecha, los botones para compartir, etc que suelen estar en algo así:

<div class='post-footer-line post-footer-line-X'>
  .......
</div>

Agregamos entonces otro DIV que también condicionamos:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
  <div class='post-footer-line post-footer-line-4'>
    <div id='postsrelacionados'>
      <script type='text/javascript'>mostrarrelacionados();</script>
    </div>
    <div style='clear:both;'/>
  </div>
</b:if>

Eso es todo, faltará claro, el CSS que es personal y agregamos junto con el resto, entre <b:skin> y </b:skin> o bien, tambien lo podemos condicionar y poner antes de </head>. Ver/Ocultar [+]

Lo elemental, sería algo así:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style>
.relsposts {
  float: left;
  margin: 0 5px;
  overflow: hidden;
  padding: 5px;
  text-align: center;
  /* el tamaño dependerá de como diseñemos el contenido */
  width: 130px;
  height: 180px;
}
.relsposts:hover { /* si queremos algún efecto */ }
.relsposts a {
  /* las propiedades de los textos, color, fuente, etc */
  color: #EEE;
  display: inline;
  font-size: 11px;
  line-height: 1;
}
.relsposts img {
  /* las propiedades de las miniaturas */
  height: 72px;
  padding: 5px;
  width: 72px;
}
.relsposts h6 {
  /* las propiedades del título */
  display: table-cell;
  height: 5em;
  margin: 5px 0 0;
  overflow: hidden;
  padding-bottom: 2px;
  vertical-align: middle;
  width: 130px;
}
.relsposts p {
  /* las propiedades de los resúmenes */
  color: #AAA;
  font-size: 10px;
  height: 4em;
  line-height: 1;
  margin: 5px 0 0;
  overflow: hidden;
  padding: 5px 0;
  text-align: left;
}
</style>
</b:if>

Para quien quiera personalizar un poco las cosas, veamos si es posible explicar el funcionamiento de los scripts y las posibles variantes. Ver/Ocultar [+]

// empieza definiendo una serie de datos
var reltitulos = new Array();
var relurls = new Array();
var relresumen = new Array();
var relimagen = new Array();
var reltituloscantidad = 0;

// establecemos la cantidad de entradas relacioandas a ser mostradas
var relmaxamostrar = 4;

// establecemos la longitud de los resúmenes
var relmaxlen = 100;

// establecemos la imagen por defecto a utilizar
var relimagenpodefecto = "URL_imagen";

// esta es la función que lee los feeds y guarda esos datos que luego analizaremos y mostraremos
function leerpostetiquetas(json) {
  var entry, postimg, postcontent, cat;
   for (var i = 0; i < json.feed.entry.length; i++) {

      // los datos de cada entrada se guardan en la variable entry
      entry = json.feed.entry[i];

      // como puede ser que no haya tantas entradas como solicitamos, si ya no hay más, terminamos
      if (i==json.feed.entry.length) { break; }

      // el título de la entrada lo leemos leyendo entry.title.$t
      reltitulos[reltituloscantidad] = entry.title.$t; // lo guardamos
      
      // buscamos el contenido de la entrada que puede estar completa o no
      postcontent = "";
      if ("content" in entry) {
        postcontent = entry.content.$t; // el contenido HTML de la entrada con un feed completo
      } else if ("summary" in entry) {
        postcontent = entry.summary.$t; // el contenido HTML de la entrada con feed corto
      }
      // usamos una función para eliminar el código HTML y crear un resumen con una cantidad de caracteres
      relresumen[reltituloscantidad] = eliminattags(postcontent,relmaxlen);

      // buscamos la miniatura de la imagen de la entrada
      if ("media$thumbnail" in entry) {
        postimg = entry.media$thumbnail.url; // si hay una imagen la guardamos
      } else {
        // si no hay una imagen, usaremos una imagen por defecto
        postimg = relimagenpodefecto;
        // podríamos establecer diferentes imágenes por defecto para cada etiqueta
      }
      relimagen[reltituloscantidad] = postimg;

      // buscamos la dirección URL de la entrada ya que hay varias
      // una contiene la URL del blog, otra la de la entrada, otra la de los archivos adjuntos, etc
      for (var k = 0; k < entry.link.length; k++) {
         if (entry.link[k].rel == 'alternate') {
            relurls[reltituloscantidad] = entry.link[k].href; // esta es la url así que la guardamos
            break;
         }
      }

      reltituloscantidad++; // vamos contando cuantas entradas se encontraron
   }
}

// esta es la función que mostrará las entradas relacionadas
function mostrarrelacionados() {
  // la primera parte es similar a la usada hasta ahora y sólo agregamos los nuevos datos, el resumen y la imagen

  // como una entrada puede tener varias etiquetas, eliminamos los duplicados
  var tmp = new Array(0);
  var tmp2 = new Array(0);
  var tmp3 = new Array(0);
  var tmp4 = new Array(0);
  for(var i = 0; i < relurls.length; i++) {
    if(!contains(tmp, relurls[i])) {
      tmp.length += 1; tmp[tmp.length - 1] = relurls[i];
      tmp2.length += 1; tmp2[tmp2.length - 1] = reltitulos[i];
      tmp3.length += 1; tmp3[tmp3.length - 1] = relresumen[i];
      tmp4.length += 1; tmp4[tmp4.length - 1] = relimagen[i];
    }
  }
  reltitulos = tmp2; relurls = tmp; relresumen = tmp3; relimagen = tmp4;

  // los mezclamos para que no se muestre siempre los mismos
  for(var i = 0; i < reltitulos.length; i++){
    var indice = Math.floor((reltitulos.length - 1) * Math.random());
    var tempTitle = reltitulos[i]; var tempUrls = relurls[i];
    var tempResumen = relresumen[i]; var tempImagen = relimagen[i];
    reltitulos[i] = reltitulos[indice]; relurls[i] = relurls[indice];
    relresumen[i] = relresumen[indice]; relimagen[i] = relimagen[indice];
    reltitulos[indice] = tempTitle; relurls[indice] = tempUrls;
    relresumen[indice] = tempResumen; relimagen[indice] = tempImagen;
  }

  // y ahora vamos a mostrarlos
  var cuantosPosts = 0;
  var r = Math.floor((reltitulos.length - 1) * Math.random()); // elegimos un post al azar
  var rini = r; // este es el primer post relacionado a mostrar
  var salida;
  var dirURL = document.URL;

  // hacemos un bucle hasta que encontramos la cantidad definida en relmaxamostrar
  // y vamos armando el código HTML
  while (cuantosPosts < relmaxamostrar) {
    if (relurls[r] != dirURL) {
      // si el post no es el que estamos viendo, lo mostramos
      salida = "<div class='relsposts'>";
      salida += "<a href='" + relurls[r] + "' rel='nofollow'  target='_blank' title='" + reltitulos[r] + "'><img src='" + relimagen[r] + "' /></a>";
      salida += "<h6><a href='" + relurls[r] + "' target='_blank'>" + reltitulos[r] + "</a></h6>";
      salida += "<p>" + relresumen[r] + " ... </p>";
      salida += "</div>";
      document.write(salida);
      // y vamos contando hasta llegar al total
      cuantosPosts++;
      if (cuantosPosts == relmaxamostrar) { break; }
    }
    if (r < reltitulos.length - 1) {
      // habiamos empezado desde cualquier parte de la lista y este es el siguiente post
      r++;
    } else {
      // si es el último, empezamos desde el primero de la lista
      r = 0;
    }
    // si ya dimos toda la vuelta en al lista y no encontramos la cantidad, significa que no hay suficientes entradas y terminamos
    if(r==rini) { break; }
  }
}

Como se indica, podríamos establecer diferentes imágenes por defecto para cada etiqueta; para eso, deberíamos saber qué etiqueta tiene esa entrada y eso lo hacemos usando:

cat = entry.category[0].term;

así que podemos ampliar las cosas así:

postimg = relimagenpodefecto; // siempre definimos una por las dudas
if(cat=="MIETIQUETA"){postimg = "URL_etiqueta1"}
if(cat=="OTRAETIQUETA"){postimg = "URL_etiqueta2"}
// agregamos todas las que se nos ocurra

¿Será esto mas fácil que agregar un gadget pre-diseñado? No, claro que no pero, algunos nos resistimos a eso de hacer click-click-click y preferimos el estilo "fatto in casa" porque el exceso de clicks genera callos en el dedo índice y también en las neuronas.