Resumen de post con thumbnail para estilo revista

Vamos a empezar con los post que nos ayudarán a convertir nuestro blog a un theme (plantilla) con estilo revista...Y con lo primero que iniciaremos, será agregar un script que ayudará a que los post se muestren resumidos, de forma uniforme, y que, además, incluya thumbails. Para que te hagas una idea, puedes ver la DEMO en uno de mis blogs de pruebas.

Según Wikipedia: Los thumbnails son versiones reducidas de imágenes, usadas para ayudar a su organización y reconocimiento. En la era de las imágenes digitales, los motores de búsqueda visuales y los programas para organizar imágenes normalmente hacen uso de los thumbnails, así como los sistemas operativos y entornos de escritorio recientes: Microsoft Windows, Mac OS X, KDE y GNOME.

Con este script, lograremos insertar en nuestro blog post resumidos y también las imágenes (siempre el post tenga imágenes) se verán como thumbails, es decir, se mostrará una imagen de un tamaño más pequeño que la original, pero cuando habramos el post completo, la imagen se verá de un tamaño completo.

1.§ Para empezar, vamos a Diseño - Edición de HTML y damos click a Expandir plantillas de artilugios.

2.§ Con ayuda de CTRL+F buscaremos </head> y antes de éste pegaremos el siguiente script:

<script type='text/javascript'>
summary_noimg = 430;
summary_img = 360;
img_thumb_height = 100;
img_thumb_width = 120;
</script>
<script type='text/javascript'>
//<![CDATA[
function removeHtmlTag(strx,chop){
if(strx.indexOf("<")!=-1)
{
var s = strx.split("<");
for(var i=0;i<s.length;i++){
if(s[i].indexOf(">")!=-1){
s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
}
}
strx = s.join("");
}
chop = (chop < strx.length-1) ? chop : strx.length-2;
while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
strx = strx.substring(0,chop-1);
return strx+'...';
}

function createSummaryAndThumb(pID){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = summary_noimg;
if(img.length>=1) {
imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
summ = summary_img;
}

var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}
//]]>
</script>

Explicación:
» summary_noimg es el número de letras que se mostrarás si es que el post no tiene imágenes .
» summary_img es el número de letras que se mostrarás si el post tiene imágenes .
» img_thumb_height es el alto de la imagen reducida (thumbnail).
» img_thumb_width es el ancho de la imagen reducida (thumbnail).

3.§ Ahora, buscaremos <data:post.body/>. He visto que en algunas plantillas el código está asi: <p><data:post.body/></p>, en cualquiera de los dos casos, borraremos el código y en su lugar pegaremos el siguiente:

<p><b:if cond='data:blog.pageType != &quot;item&quot;'>

<div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);</script>
<span class='rmlink' style='float:right'><a expr:href='data:post.url'>Leer la entrada completa »</a></span>

</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if></p>

4.§ Podremos cambiar "Leer la entrada completa »" por otro texto o por alguna imagen. Damos click a guardar y listo.

Una nota adicional: el script funciona muy bien en Opera, Safari, Firefox e Internet Explorer 8.

► Ver DEMO

En el siguiente post, veremos cómo hacer dos columnas de post para seguir perfeccionando nuestra plantilla estilo revista (magazine).

► Referencia: vietwebguide.com