Entradas reducidas con thumbnail 1

Lo que vamos a hacer es reducir las entradas mostrando un resumen con una pequeña imagen.

El texto se mostrará resumido cuando navegamos por las páginas principales o por etiquetas, una ves que entremos a la entrada esta se vera completa.

La imagen se mostrará de un tamaño más pequeño que la original, y al entrar a la entrada, la imagen se verá con el tamaño original.

La imagen reducida se mostrará siempre que la entrada tenga una imagen.

Si la entrada no tiene ninguna imagen, se mostrará otra imagen que sera única, asignada en el código JavaScript.

Ver Blog de ejemplo:

Ir a Diseño, Edición de HTML, Expandir plantillas de artilugios.

Paso 1:

Justo arriba de </head> poner el siguiente código:

<script type='text/javascript'>
//<![CDATA[

summary_noimg = 400;

summary_img = 400;

img_thumb_height = 125;

img_thumb_width = 125;

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:10px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
summ = summary_img;
}

if(img.length<1) {

imgtag = '<span style="float:left; padding:10px;"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfCZmIjRQGWdKJ6ljuFMFhjqY7QvVN2qy6-lff4W7mTV0NItGKjSavdkaQFV56xy6xeP5z8JdqY0TO7WeUUpHa_pNZeNbqJ90-wUpaoqn4hLFuAIhxDuqFvbp9kgm5rZ_6Rb6iLtxftGZF/s1600/125x125-logo.png" 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>

Cambios que podemos hacer:

summary_noimg = 400;: Número de letras que se mostrará en el resumen con imagen única.
summary_img = 400;: Número de letras que se mostrará en el resumen con imagen reducida.
img_thumb_height = 125;: Altura de la imagen reducida.
img_thumb_width = 125;: Ancho de la imagen reducida.
.../125x125-logo.png: Imagen única que se mostrará al no tener la entrada una propia.
style="float:left; padding:10px;": Estilo de la imagen.

En el ejemplo la imagen tiene padding 10px, y se mostrará a la izquierda.

Se puede personalizar o mostrar a la derecha cambiando left por right.

Paso 2:

Ahora tendremos que buscar <data:post.body/>

Y cambiaremos por el siguiente código:

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

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<div class='summarythumb' expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);</script>
<div align='right' class='rmlink' style='clear:both;padding:5px 10px 0 0'><a expr:href='data:post.url'>Leer la publicación:</a></div>
</b:if></b:if>

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

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

Cambiamos el texto "Leer la publicación:" por otro, o por una imagen.

Podemos personalizar el estilo del resumen con las clases summarythumb y/o rmlink.

Veremos los cambios y si todo esta bien guardamos la plantilla.

Agregado adicional:

Si queremos personalizar aun mas el post resumido podemos poner las clases dentro de condicionales.

Ejemplo:

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<style type='text/css'>
.post h1 { ............}
.post-title a:link , .post-title a:visited{ ...............}
.post-title a:hover {..........}
.post-body {...............}
.post-footer-line-1 {..............}
.post {.............................}
#main { .........................}
</style>
</b:if></b:if>

Si ya estamos utilizando este código y no tienen la opción de la imagen única, que muestra al no tener una imagen en la entrada.

Simplemente agregar al código JavaScript, el siguiente código:

if(img.length<1) {

imgtag = '<span style="float:left; padding:10px;"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfCZmIjRQGWdKJ6ljuFMFhjqY7QvVN2qy6-lff4W7mTV0NItGKjSavdkaQFV56xy6xeP5z8JdqY0TO7WeUUpHa_pNZeNbqJ90-wUpaoqn4hLFuAIhxDuqFvbp9kgm5rZ_6Rb6iLtxftGZF/s1600/125x125-logo.png" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';

summ = summary_img;

}

Para las siguientes entradas mostraré otras formas de reducción.

Parte 2: La primera entrada se muestra con tamaño original sin resumen.
Parte 3: Agregaré un botón en lugar de "Leer la publicación:", el cual abrira la entrada original por dejajo del resumen.

Ejemplo Parte 2:

Ejemplo Parte 3: