Jugando con los posts (Magazine 2)

Seguimos con la idea de Blogger estilo magazine.

El problema con que nos topábamos era la necesidad de establecer una altura común a todos los posts ¿Podría establecerse una altura fija, colocar un texto visible y ocultar el resto? Claro, eso es lo que nos aconsejan y podemos hacerlo manualmente o bien utilizando alguna variante del script Leer Más que usábamos para expandir y contraer las entradas. Y digo una variante porque aquí no necesitamos del script en si mismo ya que no vamos a expandirlos sino, simplemente, ocultar una parte del contenido.

Entonces, vamos otra vez a la plantilla, expandimos los artilugios y buscamos algo similar a esto:

<div class='post-body entry-content'>
  <p><data:post.body/></p>
  <div style='clear: both;'/> <!-- clear for photos floats -->
</div>

Como las plantillas varian mucho, lo lógico es usar una plantilla mínima para practicar y luego, ver si encontramos los códigos en las otras. La clave, de ahora en adelante, es encontrar el código que escribe los posts y para eso, nos debemos guiar por este dato: <data:post.body/>

Vamos a cambiar ese código por este otro:

<div class='post-body entry-content'>
  <b:if cond='data:blog.pageType == "item"'>
    <p><data:post.body/></p>
    <div style='clear: both;'/>
  <b:else/>
    <p><data:post.body/></p>
    <div style='clear: both;'/>
    <span class='leermas'>
      <a target='_blank' expr:href='data:post.url'>Leer Más ...</a>
    </span>
  </b:if>
</div>

Lo que estamos haciendo es usar los condicionales para mostrar los posts de dos maneras diferentes; si estamos en una entrada individual, no hacemos nada pero, si estamos en la página principal, le agregamos, debajo de cada uno de ellos, un enlace que en este caso dirá Leer Más y que apunta a la entrada correspondiente. Al hacer click allí, se abrirá el post completo en otra pestaña.

¿Y cómo ocultamos el contenido del post? Bueno, ahí ya tenemos que hacerlo manualmente. Al igual que hacemos con los posts expandibles, debemos agregar una etiqueta que oculte cierta parte del contenido, eso lo hacemos de la siguiente forma:

el contenido visible del post
<span id="fullpost">
  el contenido oculto del post
</span>

y si queremos automatizarlo un poco, agregamos eso mismo en CONFIGURACIÓN | FORMATO, dentro el cuadro Plantilla de entrada.

Lo único que faltaría sería poner el CSS correspondiente que, en este caso, sería algo así:

<b:if cond='data:blog.pageType != "item"'>
  <style>
    .post {
      background-color: #FAF5FF;
      border-bottom: 10px solid #FFFFFF;
      float: left;
      height: 220px; /* la altura fija de todas las entradas */
      margin: 0 10px;
      overflow: hidden;
      width: 310px; 
    }
    .fullpost { /* esto ocultará parte del contenido */
      display:none;
    }
    .leermas { /* las propiedades del enlace con el texto Leer Más */
      clear:both;
      display:block;
      text-align: right;
    }
  </style>
</b:if>

Bueno. Hay que decir la verdad. Eso, no es todo.

De aquí en más, deberemos tener una serie de cuidados al escribir un post ya que lo que ocurre con este tipo de técnicas es que limitan las cosas que podemos hacer o bien, nos obligan a tener en cuenta el tipo de contenido para que el blog no se distorsione.

Primero que nada ¿qué pasa con las imágenes? Si están ocultas, no hay problema pero, ¿y si están visibles? Las posibilidades son varias:

Podemos forzar a que directamente no se vean agregando la definición dentro del CSS anterior:
.post img {display: none:}

Podemos forzar a que se redimensionen agregando:
.post img {height: 100px; width: 100px;}

Podemos forzar a que se redimensionen y floten agregando:
.post img {float: left; height: 100px; padding: 0 10px 0 0; width: 100px;}

En la mayoría de estos casos, deberemos modificar el código que coloca Blogger cuando insertamos imágenes ya que en ese código se establece la dimensión así que el CSS no funcionaría.

También podemos preveer estas situaciones y usar sólo imágenes de cierto tamaño, pensando cómo se verá eso que escribimos en un ancho más pequeño de lo normal pero no será suficiente porque se nos seguirán presentando alternativas que no podemos contemplar; por ejemplo, ¿qué pasa con los videos? Podríamos hacer más o menos lo mismo, redimensionarlos agregando algo así como:

.post object, .post embed {width: 150px; height: 120px;}

Un ejemplo con algunas de esas características es el que puede verse en este ejemplo online.

¿Y si usamos tablas? ¿Y si tenemos DIVs con medidas fijas? ¿Y si los párrafos están justificados y en un ancho tan pequeño aparecen espacios enormes entre las palabras? Sí. Podemos resolverlo pero habrá que hacerlo todo manualmente y cada tanto, se nos presentarán dificultades o condiciones en las que no habíamos pensado.

A todo esto, yo le sumaría un problema no visible. Ocultar el contenido no hace que ese contenido no sea cargado, es invisible pero está ahí por lo tanto, la carga del blog no es menor, es igual o, eventualmente, más pesada así que si alguien cree que esta es una solución para el tiempo de carga, se equivoca.

Este tipo plantillas, como cualquier otra, tiene un uso específico y no cualquier blog podrá adaptarse con sencillez. Si el blog es básicamente textos, no habrá problemas; si utiliza características multimedia, será más complejo de controlar y esto no es sólo por las limitaciones del mismo Blogger; un blog de WordPress de tipo magazine requerirá que cada post tenga ciertas característica y nos exigirá que agreguemos algunos datos o hagamos las cosas de cierta manera para evitar que se descompagine.

Sin embargo, WordPress posee varios métodos para lidiar con este tipo de idea. Esto que se muestra hasta acá podría ser similar a lo que se llama MORE, es decir, un corte manual, hecho por nosotros mismos. Otra posibilidad es mostrar un resumen automático de cierta cantidad de palabras (sólo de palabras), un resumen que es un texto plano, que no tiene contenido HTML (ni formatos ni imágenes ni objetos); esa característica es bastante compleja de reproducir en Blogger ya que sólo disponemos de JavaScript como lenguaje.

Una última posibilidad es la llamada EXTRACTO.

Un extracto es un texto que uno agrega a una entrada pero que no es parte de la entrada, sólo se muestra en la página principal o en las páginas donde se listan entradas pero no en las páginas individuales ¿Para que sirve? Para olvidarnos del contenido del post y no tener que lidiar con él. Sea cual sea su contenido, el resumen que se mostrará es independiente de este, lo escribimos en otro lado.

¿Será posible crear en Blogger un extracto de las entradas que no cargue el post entero?... Oh, sí, se puede.