Resumen Posts 3: Las miniaturas

Para terminar con los posts resumidos sólo faltaría una cosa, ver como colocar una imagen miniatura aunque primero voy a responder a una pregunta.

En el ejemplo anterior se muestra la forma de crear esos resúmenes del mismo modo que lo hace PeekABooPost; el home normal pero las páginas con listas de entradas resumidas. Ese no es el único modo de hacerlo y, en mi caso uso una condición diferente, el primero de cualquier pagina se muestra entero y el resto, resumido. Para eso, no hace falta cambair mucho, basta modificar la condición que antes era esta:

<b:if cond='data:blog.homepageUrl != data:blog.url'>
  <b:if cond='data:blog.pageType != &quot;item&quot;'>
    <b:include data='post' name='ResumenPost'/>
  <b:else/>
    <b:include data='post' name='post'/>
  </b:if>
<b:else/>
  <b:include data='post' name='post'/>
</b:if>

por esta otra:

<b:if cond='data:post.isFirstPost'>
  <b:include data='post' name='post'/>
<b:else/>
  <b:include data='post' name='ResumenPost'/>
</b:if>

Vamos entonces a la imagen. Primero, agregamos una celda más en la tabla que teníamos:

<b:includable id='ResumenPost' var='post'>
  <table cellpadding='0' cellspacing='0' class='post-resumen'><tbody><tr>
    <td class='celdaimg' rowspan='2'><div class='miniresumenpost' expr:id='&quot;thumb-&quot; + data:post.id'/></td>
    .......

Tendrá una clase CSS llamada celdaimg y contendrá un DIV con una clase miniresumenpost y al que identificaremos individualmente con un ID: thumb-xxxxxxxxxx. El CSS para agregar será algo así:

.post-resumen td.celdaimg { /* el ancho de esa celda con la imagen */
  width: 100px;
}

.miniresumenpost { /* la imagen será un fondo, centrado y del tamaño que uno quiera */
  background: transparent url() no-repeat scroll 50% 50%;
  height: 120px;
  overflow: hidden;
  width: 90px;
}

Esta sólo es una alternativa pensada para no redimensionar las imágenes ya que al forzarlas a tener un tamaño fijo se deforman. De este modo, se usa la imagen tal cual pero sólo se muestra una parte de ella; en este caso, la parte central y eso es lo que define la posición de background 50% y 50%.

Por último, el script que es el mismo que se utilizaba antes al que se le agrega el manejo de las miniaturas:

// RESUMEN POSTS
function resumenPost(idPOST) {

  var divAuxiliar = "dummy-" + idPOST;
  var contenido = document.getElementById(divAuxiliar);

  // buscar una imagen y mostrarla
  var listaImagenes = contenido.getElementsByTagName("img"); // leemos la lista de imágenes del post
  var mostrarImagen = "http://img340.imageshack.us/img340/8063/imagennodisponible.png"; // la imagen por defecto
  if(listaImagenes.length>0) { // si hay una imagen, usamos la primera que encontramos en el post
    mostrarImagen = listaImagenes[0].src;
  }
  var spanThumb = "thumb-" + idPOST; // y la colocamos como fondo en el DIV
  document.getElementById(spanThumb).style.backgroundImage =  "url("+ mostrarImagen + ")";

  // crear un extracto de la entrada
  contenido = document.getElementById(divAuxiliar).innerHTML;
  resumen = contenido.replace(/<[^>]+>/g,'');
  longitud = 150;
  var auxiliar = resumen.split(" ");
  var nueva ="";
  for(var i=0; i<auxiliar.length; ++i) {
    nueva = nueva.concat(auxiliar[i]) + " ";
    if(nueva.length > longitud) {break}
  }
  resumen = nueva +"...";
  var spanResumen = "resumen-" + idPOST;
  document.getElementById(spanResumen).innerHTML = resumen;

}

Y allí se acaba el juego. El resultado puede verse online en este blog de pruebas y la plantilla se encuentra en este ZIP