Jugando con los posts (Magazine 3)

JMiur

Y seguimos con el magazine, este estilo de plantilla que se ha hecho popular en WordPress.

No cabe duda, cuando vemos uno de los demos de ese tipo de plantillas, nos asombramos, salen del esquema normal de un blog y es probable que eso sea lo que nos llama la atención. Deja de ser una sucesión de entradas una debajo de la otra, se parecen ... a un sitio "normal"

Y tal vez el punto clave venga por ese lado. Un blog es un blog. Un blog no es una página web común y en esas diferencias están sus pros y sus contras. Tal vez, bajo ciertas condiciones y con ciertos contenidos, este formato magazine sea útil pero no siempre porque devirtua la escencia misma del blog y esto no es ni malo ni bueno, sólo es distinto.

De todas manera, como cualquier herramienta, abre posibilidades que pueden explorarse aunque en Blogger, las limitaciones son muchas.

A mi juicio, un tema tipo magazine no está definido porque las entradas se muestren resumidas y en varias columnas. Un tema tipo magazine tiene una característica especial que es la que podemos ver en cualquier portal de noticia: en la página principal (en relativamente poco espacio) se muestran los títulos de los últimos artículos, un copete o bajada que nos da una idea del contenido de cada uno de ellos, otros artículos destacados y cierto contenido dinámico auxiliar en alguna sidebar (videos, galería de imágenes, etc).

Todo eso, hace que, utilizar alguna plantilla de este tipo en el mismo WordPress, con todas sus ventajas, no sea sencillo; implica pensar la diagramación, agregar datos extras para que la plantilla los interprete, colocar imágenes especiales, etc, etc, etc. Obviamente, cuanto más sofisticada sea, más cosas habrá que tener en cuenta pero, siempre es posible resignar funcionalidades y simplificar las cosas.

Sigo creyendo que en Blogger el tema es complejo si es que queremos sacarle el máximo partido y avanzar un poco más, no limitarnos a cortar el post en cierto punto sino pensarlo desde cero para que las entradas se muestren de dos maneras diferentes y no sólo gráficamente, sino también su contenido.

Partiendo de eso, entonces, vamos a ver qué posibilidades nos quedan ... pocas, es cierto.

La idea es: escribo un post, cualquiera, tiene videos, imágenes, lo que se me ocurra. Si uso un modelo magazine con algún sistema tipo Leer Más, tendré que armarlo de alguna manera para que lo que se muestre en la página principal no descalabre todo. Puede hacerse, hay que pensarlo pero, prefiero no hacerlo porque es demasiado trabajo y no siempre conseguiré algo razonable. Prefiero buscar una forma de agregarle a ese post, algo que me sirva de "copete/bajada" un extracto especial, algo que sólo veré allí y no en la entrada individual.

Voy a hacer lo siguiente, colocaré ese extracto al inicio de mi entrada, en un bloque DIV al que le daré una clase:

<div class="extractoOculto">

Este es el contenido del extracto o resumen oculto de la entrada.
</div>
..........
y aquí colocaré el post "normal"

Ahora, modificaré la plantilla y me baso en la misma que en los casos anteriores, una plantilla mínima.

Expandimos los artilugios y buscamos el área donde se muestran los posts:

<div class='post-body entry-content'>
<p><data:post.body/></p>

<div style='clear: both;'/> 
</div>

Vamos a cambiar ese código por este otro:

<b:if cond='data:blog.pageType == "item"'>

<div class='post-body entry-content'>

<data:post.body/>
<div style='clear: both;'/>
</div>
<b:else/>


<div class='post-body entry-content'>
<div expr:id='"original-" + data:post.id' style='display:none;'>
<data:post.body/> 
</div>
<div style='clear: both;'/>

</div>

<script type='text/javascript'>
// enviará el ID generado por Blogger (data:post.id)
ejecutarExtracto('<data:post.id/>');
</script>

</b:if>

¿Qué hemos hecho? Usamos los condicionales para saber si estamos en una página individual (y en ese caso no hacemos nada) o si estamos en la página principal que es donde queremos cambiar las cosas.

El lugar de mostrar, lo tenemos oculto hasta analizarlo utilizando JavaScript y allí cambiaremos su contenido, lo re-escribiremos y recién luego lo mostraremos.

Pondremos ahora el CSS al igual que hicimos antes, justo antes de </head>:

<b:if cond='data:blog.pageType != "item"'>
<style>

/* las propiedades de las entradas en la página principal */
.post {
background-color: #FAF5FF;
border-bottom: 10px solid #FFFFFF;
float: left;
height: 190px; /* el alto es fijo */
margin: 0 10px;
overflow: hidden; /* evitamos barras en caso de error */
width: 310px; /* el ancho es la mitad de una entrada normal */
}
.post img {
float: left;
height: 100px;
margin: 0 5px 0 0;
width: 100px;
}
</style>
<b:else/>
<style>
/* ocultamos el extracto en las páginas individuales */
.extractoOculto {display:none;}
</style>
</b:if>

Inmediatamente debajo de eso, agregamos la función del script:

<script type='text/javascript'>

//<![CDATA[

// llega con el ID del post
function ejecutarExtracto(idPOST) {
var namePOST = "original-" + idPOST; // el DIV del post normal
var divPOST = document.getElementById(namePOST);
// buscamos los DIVS
var lista = divPOST.getElementsByTagName("div");
if(lista.length>0){
// buscamos un DIV con la clase extractoOculto
for(var i=0; i<lista.length; ++i) {
if(lista[i].className=="extractoOculto") {
// cambiamos el contenido del psot por el de ese DIV
divPOST.innerHTML = lista[i].innerHTML;
// lo mostramos
divPOST.style.display = "block";
return;
}
}
}
}
//]]>
</script>

Y eso es todo. Un ejemplo de esto es el que puede verse en este demo online.

A mi entender, habría que resolver dos cosas más, la primera es tratar que este tipo de formato se muestre en la página principal exclusivamente y no en otro tipo de páginas con listas como Archivos, Búsqueda o cuando avanzamos o retrocedemos con la barra de navegacion inferior del blog. Este es un tema complejo y no sé si tiene solución.

El otro punto que sería interesante es ver si existe la posibilidad de agregar contenido dinámico, es decir, realizar el proceso inverso, tener en el post algún tipo de información extra que no se vea en la página principal y tampoco en las páginas individuales sino que se ubique en alguna otra parte del blog, por ejemplo en la sidebar.

REFERENCIAS:

Magazine Parte 1