Usar el campo vínculo para crear mini-entradas

Esto es una idea loca y absurda pero no importa. Se trata de intentar reproducir alguna de las facilidades de Tumblr para crear contenido con cierta facilidad, seleccionando algún tipo predefinido.

En realidad, como las posibilidades son muchísimas, las variantes son demasiadas como para tratar de mostrarlas así que me basaré sólo en algunas de ellas. En este caso, me imagino que mi blog tendrá entradas normales y además, tres tipos de entradas especiales que quiero generar rápidamente, sin escribir mucho código cada vez que publico algo y, por supuesto, quiero que esas entradas se muestren de manera diferente a las demás; que en el home no tengan títulos visibles ni comentarios, que sean una especie de miniposts que agrego porque si, porque sólo quiero compartir algo.

Para no ser demasiado imaginativo, se me ocurre que esas entradas serán Citas, Imágenes y Audio.

Entonces, me voy a aprovechar del campo de enlace que me permite agregar Blogger en cada entrada si tengo marcada la opción en la Configuración. En ese cuadro puedo poner una URL que luego, tal como mostraba en la publicación anterior, podemos leer desde la plantilla.

Pero, esa URL no tiene limitaciones, nadie dice que deben ser URLs reales así que voy a usar tres diferentes, simplemente, para poder reconocerlas en la plantilla y condicionarlas:

• cuando cree una entrada de tipo Citas, pondré: http://cita.me
• cuando cree una entrada de tipo Imagen, pondré: http://imagen.me
• cuando cree una entrada de tipo Audio, pondré: http://audio.me

Y el contenido será lo más simple posible; un texto, una etiqueta IMG, lo mínimo necesario y nada más.

Ahora, el tema es la plantilla así que me baso en al Mínima, expando los artilugios y busco <b:includable id='post' var='post'> que es donde está el LOOP que muestra las entradas. Voy a condicionar todo eso para separarlo en dos partes, la primera será la que mostrará esas entradas especiales y la segunda es la que mostrará las entradas de manera normal, sea la que sea:

<b:includable id='post' var='post'>
  <div class='post'>
    <a expr:name='data:post.id'/>
    <b:if cond='data:post.link'>
      <!-- AQUÍ PONDREMOS EL CODIGO ESPECIAL -->
    <b:else/>
      <!-- AQUÍ DEJAMOS TODO TAL COMO ESTÁ YA QUE SON LAS ENTRADaS NORMALES -->
    </b:if>
  </div>
</b:includable>

Si guardase eso y no tuviera entradas con algún tipo de enlace agregado no pasaría nada y no habría cambios; si tuviera alguno, simplemente no lo vería ya que, todo lo que hemos hecho es condicionar la forma en que se ven las entradas y decirle a Blogger que si la entrada tiene una URL como vínculo, haga algo distinto a lo que hace con el resto de las entradas. Lo que nos falta, entonces, es decirle qué queremos que haga con cada una de esas entradas especiales y claro está, eso puede ser cualquier cosa.

No voy a hacer nada sofisticado, simplemente, voy a decirle que muestre la entrada en un DIV con una clase diferente a la que usa habitualmente:

<b:if cond='data:post.link == &quot;http://cita.me&quot;'>
  <div class='post-header'>
    <div class='post-cita'>
      <data:post.body/>
      <div style='clear: both;'/>
    </div>
  </div>
</b:if>

<b:if cond='data:post.link == &quot;http://imagen.me&quot;'>
  <div class='post-header'>
    <div class='post-imagen'>
      <data:post.body/>
      <div style='clear: both;'/>
    </div>
  </div>
</b:if>

<b:if cond='data:post.link == &quot;http://audio.me&quot;'>
  <div class='post-header'>
    <div class='post-audio'>
      <data:post.body/>
      <div style='clear: both;'/>
    </div>
  </div>
</b:if>

Por supuesto, todo eso se puede simplificar mucho más pero, basta como ejemplo.

Ahora, nos falta el CSS:

<style>
  /* las citas */
  .post-cita {
    color: #555;
    font-family: Times New Roman;
    font-size: 40px;
    letter-spacing: -1px;
    margin: 50px 0;
    text-align: center;
    text-shadow: 3px 3px 2px #CCC;
  }
  /* las imágenes */
  .post-imagen {
    text-align: center;
  }
  .post-imagen img {
    background-color:#CCC;
    border:4px double #EEE;
    padding:10px;
  }
  /* los audios usando un reproductor externo */
  .post-audio {
    -moz-box-shadow: 0 0 20px #000;
    background-color: #CCC;
    margin: 50px auto;
    padding: 10px 0 6px;
    text-align: center;
    width: 350px;
  }
</style>