Sumarios automáticos. Casi definitivo.

Desde hace aproximadamente un año, Blogger incorpora un sistema para crear sumarios de entradas (leer más; read more), de manera que podamos mostrarlas truncadas a discreción.  Personalmente nunca me ha gustado el sistema, porque si bien permitía realizar el corte en el punto exacto deseado, también obligaba a meter código extra post a post. Principalmente por este motivo, siempre he preferido los sumarios automáticos.

Sin embargo, este último sistema tiene unas cuantas carencias:

• las entradas que sólo contenían una imagen o muy poco texto se quedan cojas con respecto a otras más extensas.
• las imágenes en miniatura se mostraban deformadas si las originales no eran cuadradas.
• en las páginas estáticas, las entradas se truncaban indebidamente

Estas y alguna cosilla extra más, son las que he pretendido solucionar con este nuevo código.

Ahora se comprobará la longitud del texto de la entrada y si es menor que el que queremos mostrar en los sumarios, simplemente no truncará la entrada y la mostrará completa. Asimismo si el post tiene sólo imágenes.

Por otra parte, en lugar de forzar el tamaño de la imagen que acompaña los resúmenes, lo que haremos será mostrar un recorte si la original es mayor que el recuadro que fijemos para los sumarios o un mosaico si es más pequeña. Y en ambos caso, la imagen también enlazará con el post.

Y ya que estábamos, también se aportan tres estilos (CSS) para elegir el que más os guste. Uno para situar la miniatura flotando con el texto (derecha o izquierda), otro para mostrar una imagen grande en la cabecera del resumen y un tercero para no mostrar imagen alguna.

Aunque un poco largos, sólo tenemos que generar dos trozos de código para que todo funcione. Seleccionamos la casilla Expandir plantillas de artilugios y en primer lugar insertamos el estilo y el script antes de </head>. Si ya estábamos usando este truco, antes de nada tendremos que eliminar el código del anterior script. Es fácil reconocerlo porque es muy similar. Este es el nuevo que se propone:

<!-- SUMARIOS AUTOMATICOS -->
<style type='text/css'>
.contemini {
position:relative;
width:125px;
height:125px;
float:right;
overflow:hidden;
margin:0px 0px 0px 10px;
border:1px solid #aaaaaa;
-webkit-box-shadow: 2px 2px 5px ;
-moz-box-shadow: 2px 2px 5px ;
box-shadow: 2px 2px 5px ;
background:#000000;
}
.miniaturas {
width:125px;
height:125px;
background: no-repeat scroll 50% 40% #eeeeee;
}
.leermas {
/* Las propiedades que gusteis para el enlace */
}
</style>

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

function createSummaryAndThumb(pID,enlacetitulo){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = sumario_noimg;

if(img.length>=1) {
imgtag = '<div class="contemini"><a href="' + enlacetitulo + '"><div class="miniaturas" style="background-image:url(' + img[0].src + ')"></a></div></div>';
summ = sumario_img;
}

var summary = removeHtmlTag(div.innerHTML,summ,imgtag,enlacetitulo);
div.innerHTML = summary;
}

function removeHtmlTag(strx,chop,imagen,enlace){
var original=strx;
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("");
}
if(strx.length<=chop) {
return original;
}
else {
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);
var devolver = imagen + '<div>' + strx + '... (<a class="leermas" href="' + enlace+ '">Leer más</a>)</div>';
return devolver;
}
}

sumario_noimg = 380;
sumario_img = 255;
//]]>
</script>

Ahora, para que lo de los enlaces en las imágenes funcione y que no nos den la tabarra las páginas estáticas, localizamos <data:post.body/> y sustituimos esa variables por lo siguiente. Si teníamos otro código distinto para sumarios, lo sustituimos igual que antes.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<data:post.body/>
<b:else/>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<data:post.body/>
<b:else/>
<div expr:id='&quot;summary-&quot; + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb(&quot;summary-<data:post.id/>&quot;,&quot;<data:post.url/>&quot;);</script>
</b:if>
</b:if>

Ya podemos pinchar en Vista Previa y comprobar que todo funciona correctamente. Si estais en un blog de prueba (que es lo que deberíais hacer antes de meter nada nuevo en vuestro blog), a continuación podeis crear algunos posts extremos para ver el resultado: uno con poco texto, otro con poco texto y una imagen, una imagen sola...

¿Contentos con el sistema? Pues ahora las posibles configuraciones alternativas de estilo.

En la primera parte del primer código teneis todas las propiedades CSS. El alto y el ancho puede ser cambiado para aumentar/disminuir el tamaño de las miniaturas y sólo hay que tener en cuenta que hay que hacerlo simultáneamente en las dos clases (.contemini,  .miniaturas). También podeis cambiar los efectos de bordes y sombras (border, box-shadow), así como el fondo por defecto. Evidentemente, el float:right; podría ser un float:left; sin problemas; sólo habria que ajustar el margin para que se generará el espaciado con el texto en el lado contrario.

Si ya nos metemos en la parte del script, encontramos el texto "(Leer más)", que podemos cambiarlo por el que más nos guste. Al final del todo encontramos las variables que controlan el número de caracteres que queremos que se vean en los sumarios: sumario_noimg es para los posts sin imágenes (más caracteres) y sumario_img para el otro caso (con miniatura, menos caracteres).

Si quereis mostrar una gran imagen central (cuando la haya) encima del resumen de texto, entonces teneis que cambiar todo lo que está entre etiquetas STYLE por esto otro:

.contemini {
position:relative;
width:400px;
height:200px;
text-align:center;
margin:0px auto 10px;
overflow:hidden;
border:1px solid #aaaaaa;
-webkit-box-shadow: 2px 2px 5px ;
-moz-box-shadow: 2px 2px 5px ;
box-shadow: 2px 2px 5px ;
background:#000000;
}

.miniaturas {
width:400px;
height:200px;
background: 50% 50%;
/*Para que la imagen no se repita si es pequeña, incluir un no-repeat*/
}

.leermas {
/* Las propiedades que gusteis para el enlace */
}

Una vez más, podeis cambiar el tamaño de la miniatura y el resto de propiedades visuales.

Y para terminar, el estilo más fácil que es el que no mostrará ninguna miniatura en las entradas a resumir:

.contemini {
display:none;
}

.miniaturas {
}

.leermas {
/* Las propiedades que gusteis para el enlace */
}

Seguro que este último es el más os ha gustado ;)

¿Vemos otro post al azar por si le encuentras utilidad o quizás prefieres ser más metódico y suscribirte a nuestras entradas por correo? También puedes imprimir este artículo y por supuesto compartirlo en redes sociales si fue de tu agrado.

Compartir

Twitter

Pinterest

Facebook

Linkedin

Copy URL

Compartir

Twitter

Pinterest

Facebook

Linkedin

Y muchos más artículos interesantes si nos sigues en...

• Google
• Facebook
• Twitter