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.