febrero 10, 2019
Leer más con imágenes en miniatura mejorado
Anteriormente vimos cómo tener el Leer más con imágenes en miniatura que hace que todas las entradas tengan un resumen de forma automática, sin tener que estar ingresando códigos extra cada vez que redactamos una entrada.
Si bien ese script funciona muy bien muchos han sido quienes han preguntado si es posible mostrar una imagen aun cuando la entrada no la tenga; y si había alguna forma para que las imágenes en miniatura no quedaran fuera de proporción, pues usualmente no subimos imágenes perfectamente cuadradas sino más bien rectangulares y al mostrarse en miniatura se deformaban.
Bien, después de un par de horas de pelearme con la computadora pude hacerle tres mejoras al script de modo que si una entrada no tiene una imagen podrá mostrar una imagen predeterminada para ilustrar el resumen.
Luego, las imágenes en miniatura ya no perderán su proporción, por lo que una imagen rectangular podrá verse más pequeña pero igualmente rectangular.
Y además, las imágenes en miniatura tendrán un enlace a la entrada, así que podrás acceder al post completo desde el link de Leer más, o desde el título de la entrada, o bien, haciendo click en la imagen en miniatura.
El procedimiento es el mismo, primero entramos en Diseño | Edición de HTML, y busca esta línea:
<data:post.body/>Elimínala y en su lugar agrega esto:
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<div expr:id='"summary" + data:post.id' style='font-size:13px; text-align:justify;'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>","<data:post.url/>");</script>
<span class='rmlink' style='float:right'><a expr:href='data:post.url'>Leer más...</a></span>
</b:if></b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>
<b:if cond='data:blog.pageType == "static_page"'><data:post.body/></b:if>
NOTA: La etiqueta <data:post.body/> en la mayoría de las plantillas aparece 2 o 3 veces, regularmente se debe cambiar la segunda, en caso de que no obtuvieras los resultados esperados aplica los cambios en las demás hasta que des con la indicada.
Ahora antes de </head> pega lo siguiente:
<script type='text/javascript'>
summary_txt = 410;
img_thumb_width = 120;
</script>
<script type='text/javascript'>
//<![CDATA[
// Script original de Anhvo, modificado por ciudadblogger.com
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, pURL){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
if(img.length<=0) {
imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><a href="'+ pURL +'"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_k5BK1LyuFs1B4_MW9OHV4FkbAbZ3pmc1IkrSgCx-ZzwkIZuyS31SzoKISkEwevX8w75Bapm8nI_rXta8bCaUyLnZ1444pJIYgXlHsjou0wIH2i6YIJkZ22DFNcjezJZ67uOEU2rHjmM/" width="'+img_thumb_width+'px" /></a></span>';
summ = summary_txt;
}
if(img.length>=1) {
imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><a href="'+ pURL +'"><img src="'+img[0].src+'" width="'+img_thumb_width+'px"/></a></span>';
summ = summary_txt;
}
var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}
//]]>
</script>Guarda los cambios y listo. Ahora veamos las modificaciones que se le puede hacer para personalizarlo.
En el primer código que hemos agregado, he puesto en negrita los estilos para el resumen, ahí se puede cambiar el tamaño de la letra, la alineación del texto, y se le pueden agregar más estilos como el color de la letra, color de fondo, etc.
En donde dice Leer más puedes cambiarlo por otro texto o bien, por una imagen, si ese es el caso entonces elimina ese texto y en su lugar agrega esto cambiando la URL de la imagen donde se indica:
<img src="URL de la imagen" border="0" />
En el segundo código que hemos agregado veremos al inicio dos variables:
summary_txt = 410; indica el número de caracteres que tendrá el resumen.
img_thumb_width = 120; es el ancho que tendrán las imágenes en miniatura.
Un poco más abajo está una URL en color azul, esa es la imagen que se mostrará en el resumen cuando la entrada no tenga una imagen, y será esta:
Esa imagen la puedes cambiar por cualquier otra que elijas, sólo cambia la URL en color azul por la de la imagen que quieres.
Como has podido notar los códigos son bastantes similares al método anterior sólo que con unas pequeñas modificaciones que aunque parecen insignificantes mejoran por mucho la funcionalidad del script.
