Oloblogger

Sumarios automáticos sin JavaScript para Blogger

Posted: 09 Mar 2011 01:02 PM PST

Hay diversos sistemas para crear sumarios en Blogger y así conseguir que nuestras entradas se muestren resumidas con el consabido "Leer más" (página principal y de navegación: etiquetas/recientes/antiguas).

Los primeros que descubrimos requieren entrar manualmente algún código extra en los post, como puede ser el caso del viejo truco con la clase .fullpost o del mejorado corte (<--more-->) que Blogger tuvo a bien ponernos en nuestro editor no hace demasiado.

Pero para poder hacer lo mismo automáticamente, sólo nos quedaba o bien hacer una chapuza CSS o bien utilizar alguna utilidad JavaScript que hiciera el trabajo por nosotros.

Sin embargo, en Blogger Buster han tenido la genial idea, de utilizar algunas de las nuevas etiquetas DATA que se han ido incorporando en los últimos meses, para simplificar todo esto.

Tengo que comentar, sin quitarle ni el más mínimo mérito a Amanda, que eché de menos algunas cosillas en el código original y que este que presento más adelante, contiene ciertas modificaciones.

Por ejemplo, no se tuvo en cuenta las páginas estáticas y en estas aparecía también el "Leer más" sin ninguna necesidad. En segundo lugar, aquel código anulaba los more que el administrador hubiera introducido hasta la fecha, dando prioridad al resumen del snippet. Por último, también duplicaba el enlace ya nombrado cuando pre-existía.

A mi parecer, los cortes que alguien haya podido introducir manualmente en una entrada, tienen mucho más sentido, que los resúmenes del snippet, amén de que estos últimos, no suelen pasar de los 150 caracteres. Por ese motivo principalmente, he decidido introducir modificaciones. Al que le venga bien tal y como estaba, siempre puede tomarlo del Blogger Buster.

Y aclarado esto, seguimos...

Se trata de montar una serie de condiciones y usar algunas etiquetas DATA, para mostrar sólo lo que nos interesa, justo dónde nos interesa. Con ello se puede montar este bonito código que resulta suficiente y sobrado para crear los susodichos sumarios. Sólo hay que buscar en la plantilla (con Expandir plantillas de artilugios marcado) la variable <data:post.body/> y sustituirla por esto otro:

<b:if cond='data:blog.pageType == "item"'>
<data:post.body/>
<b:else/>
<b:if cond='data:blog.pageType == "static_page"'>
<data:post.body/>
<b:else/>
<b:if cond='data:post.hasJumpLink'>
<data:post.body/>
<b:else/>
<b:if cond='data:post.snippet'>
<b:if cond='data:post.thumbnailUrl'>
<div class='Image thumb'>
<img expr:src='data:post.thumbnailUrl'/>
</div>
</b:if>
<data:post.snippet/>
<div class='jump-link'>
<a expr:href='data:post.url + "#more"' expr:title='data:post.title'><data:post.jumpText/></a>
</div>
<b:else/>
<data:post.body/>
</b:if>
</b:if>
</b:if>
</b:if>

Con esto ya tenemos nuestros sumarios funcionando, pero como seguramente también queramos darle nuestro toque personal, entonces tenemos que recurrir al CSS.

La clase que controla la miniatura es la .thum img, por lo que si la insertamos entre nuestras etiquetas SKIN, podemos hacer flotar la imagen a derecha o izquierda del texto, así como añadir márgenes o bordes. También podemos hacerla más grande añadiendo un WIDTH, pero sin pasarse de píxeles porque la redimensión se hace sobre la miniatura, lo que provoca una perdida de calidad:

.thumb img {
float: left;
margin: 0 10px 10px 0;
}

Una segunda modificación sería la del aspecto del corte, cosa que ya vimos anteriormente y para lo cual usaremos la clase .jump-link.

Todo esto lo podéis ver funcionando en esta página de demostración.

Y para los que quieran profundizar más...

Algunas de estas variables ya las conocía pero otras no; y realmente vienen de fábula para lo que se pretende:

data:post.hasJumpLink (si hay salto 'more' o no en la entrada)
data:post.jumpText (el texto que servirá de enlace al 'more')
data:post.snippet (texto truncado de cada entrada publicada)
data:post.thumbnailUrl (miniatura de la primera imagen de cada entrada)

Y por supuesto, la tan antigua como imprescindible data:post.body, la que recoge todo el contenido tecleado por nosotros en las anotaciones.

La estructura del código comienza por distinguir mediante condiciones anidadas, si estamos (data:blog.pageType) en una entrada (item) o en una página estática (static_page). En estos casos no hacemos nada salvo lo usual, que es imprimir el contenido del post (data:post.body) tal cual.

Ya sabemos que estamos en la página principal o en una de navegación, por lo que lo siguiente es comprobar si hay corte en la entrada (data:hasJumpLink) para si lo hay, dejar actuar dicho corte y tampoco hacer nada especial.

Y ahora entramos en el resto de casos.

<b:if cond='data:post.snippet'>
<b:if cond='data:post.thumbnailUrl'>
<div class='Image thumb'>
<img expr:src='data:post.thumbnailUrl'/>
</div>
</b:if>
<data:post.snippet/>
<div class='jump-link'>
<a expr:href='data:post.url + "#more"' expr:title='data:post.title'><data:post.jumpText/></a>
</div>
<b:else/>
<data:post.body/>
</b:if>

Primero comprobamos si hay resumen generado por Blogger (data:post.snippet), porque si no, tampoco nos molestamos en hacer nada. Descartados todos los casos en que no hay que hacer nada, si hay resumen comprobamos también la existencia de miniatura (data:post.thumbnailUrl) para mostrarla. Por último, dentro de esa misma rama, añadimos el resumen y el código que monta el corte (jump-link). Sumarios listos.

Nótese en la página demo, que cuando la entrada contiene sólo una imagen o un vídeo sin texto, no existe resumen, por lo que se mostrará completa. Sin embargo, en cuanto haya un solo carácter, se verá el Leer más aunque sea innecesario. Ocurre lo mismo cuando hay más de una imagen.

Son casos extremos no habituales, pero se podrían solucionar si existiera alguna DATA que nos sirviera para saber el número de caracteres que tiene un post o encontráramos otro sistema análogo. Otra posibilidad, sería la de poder controlar el snippet. El problema es que yo no conozco ninguna manera ¿A alguno de entre los presentes se le ocurre algo?