Leer más con imágenes en miniatura mejorado (2)

Hace un par de meses les presentaba una mejora del Leer más con imágenes en miniatura el cual incluye una imagen predeterminada para las entradas que no tienen imágenes, tamaños proporcionales en las miniaturas y la posibilidad de ingresar a la entrada haciendo click en la imagen. Y aunque creía que ya no había nada más que hacerle a ese script siempre hay inquietudes de los usuarios; y algo que preguntan con frecuencia es porqué las entradas resumidas no respetan los espacios entre cada punto o salto de línea; o por qué si sus entradas tienen negritas y cursivas no se veían en los resúmenes, en otras palabras, que los sumarios se ven muy planos al no mostrar los formatos del texto.

Y bueno, haciéndole unas ligeras modificaciones conseguí que la entrada resumida pueda mostrar cualquier formato que tenga el texto, ya sean negritas, cursivas, colores, espacios, saltos de línea, etc. De manera que pueda verse tal como han escrito la entrada.

ATENCIÓN: Si estás usando el truco para elegir qué resumen mostrar en el Leer más automático no apliques estos cambios de lo contrario dejarán de verse los resúmenes personalizados.

Si ya habías puesto el Leer más con imágenes en miniatura mejorado (1) sólo elimina el script que va antes de </head> y en su lugar pon este:

<script type='text/javascript'>


summary_txt = 450;

img_thumb_width = 125;

</script>



<script type='text/javascript'>

//<![CDATA[

// Script original de Anhvo, modificado por ciudadblogger.com

function removeHtmlTag(strx,chop){


if(strx.indexOf("<img")!=0)

{

var s = strx.split("<img");

for(var i=0;i<s.length;i++){

if(s[i].indexOf(">")!=0){

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 +'" title="'+'"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpEoSAY-PBU5WwlP3pOHfrzmdTaKTyi0EDHHJpXLvziuWeiNTM5AOLmQdBeXCLwObCzgYyzSW2Nk-JuwOyKqtjZNEwuhzzzQ54Cg3EEq0FOi4CMwk11r2tBrYwoOUQsEbNxcCJdrH-AL4/" 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 +'" title="'+'"><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>

Y con eso bastará para que se apliquen las mejoras que además de las que tenía también podrán verse los textos enriquecidos.

RECOMENDACIÓN: Como las entradas resumidas respetarán cualquier cantidad de espacios o saltos de línea que haya es preferible que no dejes espacios antes del primer texto, por lo que si tienes una imagen al comienzo escribe tu entrada justo después del código de la imagen sin dar un salto de línea.

---

Si es la primera vez que vas a usar el Leer más automático entonces entra en Diseño | Edición de HTML, marca la casilla Expandir plantillas de artilugios y busca esta línea:

<data:post.body/>

Elimínala y en su lugar agrega esto:

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


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

<div expr:id='&quot;summary&quot; + data:post.id' style='font-size:13px; text-align:justify;'><data:post.body/></div>

<script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;,&quot;<data:post.url/>&quot;);</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 == &quot;item&quot;'><data:post.body/></b:if>

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

Ahora antes de </head> pega lo siguiente:

<script type='text/javascript'>

summary_txt = 450;

img_thumb_width = 125;

</script>



<script type='text/javascript'>


//<![CDATA[

// Script original de Anhvo, modificado por ciudadblogger.com

function removeHtmlTag(strx,chop){

if(strx.indexOf("<img")!=0)

{

var s = strx.split("<img");

for(var i=0;i<s.length;i++){


if(s[i].indexOf(">")!=0){

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 +'" title="'+'"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpEoSAY-PBU5WwlP3pOHfrzmdTaKTyi0EDHHJpXLvziuWeiNTM5AOLmQdBeXCLwObCzgYyzSW2Nk-JuwOyKqtjZNEwuhzzzQ54Cg3EEq0FOi4CMwk11r2tBrYwoOUQsEbNxcCJdrH-AL4/" 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 +'" title="'+'"><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>

Y listo.

Los que ya tenían el script mejorado notarán que el cambio en el script es mínimo pero los resultados son muy notables.

¿Algo más que mejorar? Probablemente sí, pero por ahora me parece que está bastante completo.