Entradas reducidas: Cambiar el tamaño de las thumbnail

Si ya tenemos una plantilla con entradas reducidas: (1), (2) y (3).

Vemos las imágenes en  thumbnail.

Según las tengamos configuradas en el script, las imágenes se muestran con un tamaño menor al que se muestran al abrir la entrada.

img_thumb_height = 125;

img_thumb_width = 125;

Con esa configuración se mostrarán de 125x125 px, aunque la imagen publicada tenga mayor tamaño.

Pero cual es el error, las imágenes aunque las veamos de 125x125 px, pero el tamaño real será el de la imagen subida.

Ejemplo:

Si la imagen subida es de 640x480 px la vamos a ver de 125x125 px.

El problema es que al abrir la página, está va a cargar la imagen grande (640x480 px) y no la imagen thumbnail (125x125 px), aunque la veamos pequeña.

Si tenemos un blog que muestra 10 entradas y cada entrada con una imagen de 640x480 con un peso de 100 KB la suma total del peso de las imágenes es de 1000 KB.

Si tenemos un blog que muestra 10 entradas y cada entrada con una imagen de 125x125 con un peso de 10 KB la suma total del peso de las imágenes es de 100 KB.

¿Notan la diferencia?

La solución es agregar un pequeño código al script, que cambie las imágenes grandes por pequeñas.

Ahorraremos unos cuantos KB de peso, que harán que nuestro blog cargué mas rápido.

Buscamos el código en Edición de HTML y agregamos lo que está en Rojo:

<script type='text/javascript'>
//<![CDATA[
 summary_noimg = 370;
 summary_img = 370;
 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 class="summarythuimg" style="float:left; "><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 class="summarythuimg" style="float:left; "><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEilJIFQky0grzgxlEVQe6a43pn7Guw9MFdo1EK_SjVr7x2UPz5wAZXwSdPB_KLqCdF4sLbC1qA4kiT83Wu2DrhyFAZ-ooPnH9FjlWG54zMK0i3FgGekXYzmMCYtu3_DyUxGahNTQ5GPllLN/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;

var imagenreducida = div.innerHTML;
var imagenreducida = imagenreducida.replace(/\/s200/g,'/s125');
var imagenreducida = imagenreducida.replace(/\/s320/g,'/s125');
var imagenreducida = imagenreducida.replace(/\/s400/g,'/s125');
var imagenreducida = imagenreducida.replace(/\/s640/g,'/s125');
var imagenreducida = imagenreducida.replace(/\/s1600/g,'/s125');
div.innerHTML = imagenreducida;
}
//]]>
</script>

Podemos cambiar o agregar mas líneas, según el tamaño de las imágenes más comunes que utilizamos.

var imagenreducida = imagenreducida.replace(/\/s200/g,'/s125');

Cambiando el tamaño s200 por otro tamaño utilizado.

También pueden cambiar en el código s125 por s125-c para mostrar las imágenes cortadas.

El ejemplo está con imágenes de 125x125 px, ustedes pueden tener en el código JavaScript otra medida, tendrán que cambiar s125 por la que tengan configurada.

Entradas reducidas con thumbnail 3

Siguiendo con el tema de reducir entradas, visto en Parte 1 y Parte 2.

Al igual que la Parte 2, mostraremos la primera entrada, o la de arriba en su totalidad, sin reducir.

La diferencia sera que le agregué un botón el que abrirá y mostrará el total de la entrada en la parte de abajo del resumen.

Este botón al abrir cambiara por otro y una ves que se cierre volverá al mismo.

Para entender mejor ver el resultado.

Ejemplo 1.
Ejemplo 2.

¿Cómo se hace...?

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 = 350;

summary_img = 350;

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:0 10px 0;"><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:0 10px 0;"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEilJIFQky0grzgxlEVQe6a43pn7Guw9MFdo1EK_SjVr7x2UPz5wAZXwSdPB_KLqCdF4sLbC1qA4kiT83Wu2DrhyFAZ-ooPnH9FjlWG54zMK0i3FgGekXYzmMCYtu3_DyUxGahNTQ5GPllLN/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;
}

function togglvku( targetId )
{
var state = 0;
var blockvkuname = "blockvku" + targetId;
var blockvkuimage = "blockvkucollapse" + targetId;
if ( document.getElementById ) {
target = document.getElementById( blockvkuname );
if ( target.style.display == "none" ) {
target.style.display = "";
state = 1;
}
else {
target.style.display = "none";
state = 0;
}
document.getElementById( blockvkuimage ).src = state ? "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFh4NRIf6vBYBxQ3ru2OkzZmDFnwV_cvX7EJkEZEfpfJEMBHV44yN5I9-_d3ikBm6f5UFHrQf8dxz3KLzhT0hswGWb9TzLedsKJPaMEZFc3exs5Kr2xeJBGASYDZGyQS3-BY-7Vq-I2JQ/s1600/cerrar.jpg" : "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhV2FsDPG_DDl81YnGzCc-XmRAgSbGcMaKP72Zf80YizRIgBP3b9nJyEGDP1BHqEI5Y6AFC2Q0yCJRa_K10tpvJv5_v_Tg29sqbMRAV_MAoOdNVqQ22vhxv4w7s0i7P7l6WiszpDwcCrbs/s1600/abrir.jpg";
}
}
//]]>
</script>

Cambios que podemos hacer:

summary_noimg = 350;: Número de letras que se mostrará en el resumen con imagen única.
summary_img = 350;: 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:0 10px 0;": Estilo de la imagen.

En el ejemplo la imagen tiene padding 10px a la derecha y 0px en los otros lados, y se mostrará a la izquierda.

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

En rojo estan las imágenes del botón de abrir y cerrar.

Paso 2: (Opción 1)

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

Y lo cambiaremos por el siguiente código:

<b:if cond='data:post.isFirstPost'>
<b:else/>
<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:0px;margin:0px'><a class='toggleresumenpost' expr:onclick='&quot;togglvku(\&quot;&quot; + data:post.id + &quot;\&quot;)&quot;' href='javascript:void(0);'><img expr:id='&quot;blockvkucollapse&quot; + data:post.id' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhV2FsDPG_DDl81YnGzCc-XmRAgSbGcMaKP72Zf80YizRIgBP3b9nJyEGDP1BHqEI5Y6AFC2Q0yCJRa_K10tpvJv5_v_Tg29sqbMRAV_MAoOdNVqQ22vhxv4w7s0i7P7l6WiszpDwcCrbs/s1600/abrir.jpg'/></a></div>
</b:if>
</b:if>

<b:if cond='data:post.isFirstPost'><data:post.body/>
<b:else/>
<div expr:id='&quot;blockvku&quot; + data:post.id' style='display: none;'>

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

Cambiar la imagen en rojo de abrir por la misma que pusimos en el código del paso 1.

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

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

Por más detalles de cómo personalizar leer la parte 1:

Si quisieramos ocultar el contenido del footer de las entradas como en el ejemplo 2, en lugar del paso 2 hacer lo siguiente:

[+/-] Seguir leyendo...

Paso 2: (Opción 2)

Buscar <data:post.body/>

Y lo cambiaremos por el siguiente código:

<b:if cond='data:post.isFirstPost'>
<b:else/>
<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:0px;margin:0px'><a class='toggleresumenpost' expr:onclick='&quot;togglvku(\&quot;&quot; + data:post.id + &quot;\&quot;)&quot;' href='javascript:void(0);'><img expr:id='&quot;blockvkucollapse&quot; + data:post.id' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAYxAR9EiWsVzj0wdkiL658IfLhOu0aAp4FbCVV3UWzztlGWfT0GJmZ4T82CoV60XVJF_bDK9YWv6KPCLtsri8E7CnqvMpiPT5rj39kqccfmBBlMe0X_mnLAHFigaTp5j1Mgulmw-yw38/s1600/abrir.png'/></a></div>
</b:if>
</b:if>

<b:if cond='data:post.isFirstPost'><data:post.body/>
<div class='post-footer'>

CONTENIDO DENTRO DEL DIV

</div>
</b:if>

Al igual que en el paso 2 (opción 1) cambiar la imagen del botón de abrir.

Un poco mas abajo encontrarán <div class='post-footer'>

Copiar todo el contenido dentro del div (varia según plantilla)

Y pegarlo en lugar de:

CONTENIDO DENTRO DEL DIV

Ahora la línea <div class='post-footer'> que ya anteriormente encontramos, reemplazarla por la siguiente línea:

<div class='post-footer' expr:id='&quot;blockvku&quot; + data:post.id' style='display: none;'><data:post.body/>

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

Entradas reducidas con thumbnail 2

Ya vimos una forma de reducir las entradas con thumbnail 1.

Esta forma es casi igual, la diferencia es que mostraremos la primera entrada, o la de arriba en su totalidad, sin reducir.

Ver ejemplo:

Al igual que la entrada anterior:

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/AVvXsEilJIFQky0grzgxlEVQe6a43pn7Guw9MFdo1EK_SjVr7x2UPz5wAZXwSdPB_KLqCdF4sLbC1qA4kiT83Wu2DrhyFAZ-ooPnH9FjlWG54zMK0i3FgGekXYzmMCYtu3_DyUxGahNTQ5GPllLN/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:post.isFirstPost'>
<b:else/>
<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:post.isFirstPost'><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.

Por más detalles de cómo personalizar leer la parte 1:

La diferencia en el código con la parte 1, se encuentra en el paso 2, como notarán le modifique los códigos condicionales.

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/AVvXsEilJIFQky0grzgxlEVQe6a43pn7Guw9MFdo1EK_SjVr7x2UPz5wAZXwSdPB_KLqCdF4sLbC1qA4kiT83Wu2DrhyFAZ-ooPnH9FjlWG54zMK0i3FgGekXYzmMCYtu3_DyUxGahNTQ5GPllLN/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/AVvXsEilJIFQky0grzgxlEVQe6a43pn7Guw9MFdo1EK_SjVr7x2UPz5wAZXwSdPB_KLqCdF4sLbC1qA4kiT83Wu2DrhyFAZ-ooPnH9FjlWG54zMK0i3FgGekXYzmMCYtu3_DyUxGahNTQ5GPllLN/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: