Jugando con los posts (Estilo magazine) The end

Vamos a ver si podemos darle un final a esta serie de entradas sobre las plantillas tipo magazine en Blogger, agregando un par de funciones más.

Lo primero, entonces, es definir con claridad cuáles son las características propias de este tipo de sitios y, en este caso, saber qué podemos hacer y qué no podemos hacer ya que nos enfrentamos con las limitacions propias de un servicio que ofrece un acceso restringido a nuestros datos.

La plantilla deberá contemplar algunos puntos que considero imprescindibles para un blog de este estilo:

1. La página principal del sitio (home) debe ser exclusiva, distinta del resto y es la única que muestra el estilo magazine. Debería ser diferente, tanto por la forma en que se muestran las entradas como en su estructura y allí, mostrarse un extracto personalizado de cada entrada con un enlace a la página individual.
2. La página de entradas individuales se mostrará de manera normal, con cualquier tipo de contenido y ese contenido deberá ser independiente del resto.
3. Las páginas que se muestran durante la navegación deben ser listas con títulos y, eventualmente, incluir la opción de expandirlos.
4. La sidebar debe ser dinámica y contemplar la posibilidad de mostrar contenido de referencia a la entrada individual que se esté viendo.
   

Partiendo de estas premisas, comienzo con una Plantilla Mínima y, como ya estoy un poco harto del color blanco, le cambio algunos detalles gráficos y la amplío. Aunque todo eso no tiene mayor importancia y la parte estética puede ser cualquier cosa.

A los efectos de la explicación, sólo hay que saber que los anchos de referencia son los siguientes:

header-wrapper: width: 980px
outer-wrapper: width: 980px
main-wrapper: width: 660px
sidebar-wrapper: width: 260px
footer-wrapper: width: 980px

Es decir, el blog tiene 980 pixeles de ancho máximo dividido en dos partes, las entradas ocupan 660 y la sidebar 260. El resto, los 60 pixeles restantes, son las separaciones entre ambos.

La idea es la siguiente: en la página principal se verá el estilo magazine. Por la forma en que lo quiero distribuir, necesito que sólo se muestren 6 entradas por página así que voy a Configuracion | Formato y coloco ese valor:

Mostrar díasentradas en la página principal.

Ese estilo magazine, con entradas sumarias, sólo se verá allí en home, de esa manera, cualquier blog podría adaptarse ya que no sería necesario editar las entradas anteriores, basta que las primeras (en este caso esas seis) posean el nuevo código; el resto se seguirá mostrando normalmente.

Para darle más fuerza a ese home y diferenciarlo más del resto del sitio, cambiaremos de lugar la sidebar y, en lugar de colocarla al lado de las entradas como en el resto de las páginas, la pondremos abajo.

Vamos a modificar el código de Blogger, expandiendo los artilugios y buscando esto:

<b:includable id='post' var='post'>

un poco más abajo, veremos el código que se usa para mostrar las entradas:

<div class='post-body entry-content'>
<data:post.body/>
<div style='clear: both;'/>
</div>

Modificaremos eso, interceptándolo de manera similar a lo que se mostraba en el artículo anterior:

<!-- diferenciar el tipo de pagina -->
<b:if cond='data:blog.url != data:blog.homepageUrl'>
<!-- entradas "normales" -->
<div class='post-body entry-content'>
<data:post.body/>
<div style='clear: both;'/>
</div>
<b:else/>
<!-- entradas tipo magazine -->
<div class='post-body entry-content'>
<div expr:id='"original-" + data:post.id'>
CONTENIDO ORIGINAL DEL POST
</div>
<div style='clear: both;'/>
</div>
<script type='text/javascript'>
// enviar el ID generado por Blogger <data:post.id/>
// enviar el contenido HTML del post <data:post.body/>
ejecutarExtracto(&#39;<data:post.id/>&#39;,&#39;<data:post.body/>&#39;);
</script>
</b:if>

La gran diferencia es que usamos esta condición:

<b:if cond='data:blog.url != data:blog.homepageUrl'>

que es la que nos permite diferenciar la página de inicio del cualquier otra página de nuestro blog.

Como quiero que las páginas con listas (Archivos, Etiquetas, Navegación, Búsqueda) se muestren resumidas, vamos a agregarle el hack de PeekABooPost tal como lo que explica El escaparate de Rosa

Buscamos esto:

<b:includable id='main' var='top'>

y justo encima, agregamos el código:

<b:includable id='PeekABooPost' var='post'>
<div class='post uncustomized-post-template'>
<table class='listaArchivos'>
<tr>
<td class='masmenos'><a expr:onclick='&quot;javascript:toggleIt(\&quot;&quot; + data:post.id + &quot;\&quot;);&quot;' href='javascript:void(0)' style='text-decoration:none' title='Expandir/Contraer esta entrada'>[+/-]</a></td>
<td class='titulo'><a expr:href='data:post.url'><data:post.title/></a></td>
</tr>
</table>
<div class='post-body entry-content' expr:id='data:post.id' style='display:none'>
<data:post.body/>
<div style='clear: both;'/>
</div>
</div>
</b:includable>

Seguimos allí y más abajo, eliminaremos esta línea:

<b:include data='top' name='status-message'/>

Por último, reemplazaremos esta línea:

<b:include data='post' name='post'/>

por este otro código:

<b:if cond='data:blog.homepageUrl != data:blog.url'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:include data='post' name='PeekABooPost'/>
<b:else/>
<b:include data='post' name='post'/>
</b:if>
<b:else/>
<b:include data='post' name='post'/>
</b:if>

Bien, si seguimos cuerdos, podemos continuar; la parte más engorrosa ha terminado. Ahora, sólo nos queda agregar el CSS y los scripts, justo antes de </head>

<style>
/* ocultar el contenido dinamico de las entradas */
/* este dato dependerá de la plantilla y puede tener otro ID */
#HTML1 {display:none;}
</style>

<!-- estableceremos estilos diferentes para home y el resto del blog -->
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<style>
/* los estilos para la pagina principal estilo magazine */
.post {
-moz-border-radius: 10px;
border: 2px solid DarkGray;
float: left;
font-family: Verdana;
height: 190px; /* la altura de los extractos es fija */
margin: 0 5px 10px;
overflow: hidden;
padding: 10px;
width: 275px; /* habrá tres extractos en el ancho */
}
.post h3 a, .post h3 a:visited {/* propiedades de los títulos */ }
.post img {
width: 100px;
height: 100px;
float: left;
margin: 0 5px 0 0;
}
h2.date-header {display: none;} /* ocultamos la fecha que pone Blogger */
.post-footer { /* propiedades del footer */ }
/* los cambios de la sidebar */
#main-wrapper { /* le damos ancho y eliminamos la flotación para que se muestre abajo */
float: none;
width: 930px;
}
#sidebar-wrapper {
float: left;
margin: 20px 0 0 25px;
overflow: hidden;
padding: 0;
width: 930px;
}
.sidebar .widget { /* definimos las propeidades de cada elemento */
float: left;
margin: 10px;
padding: 10px;
width: 270px; /* el ancho de cada elemento (en este caso hay sólo tres) */
}
</style>
<b:else/>
<style>
/* los estilos para el resto de las paginas */
.extractoOculto {display:none;} /* ocultamos los extractos de las entradas */
/* los estilos para listas de archivos */
.post table.listaArchivos { /* la tabla que contiene el hack */ }
.post table.listaArchivos td.masmenos { /* la celda para expandir/colapsar */ }
.post table.listaArchivos td.titulo { /* la celda del título */ }
</style>
</b:if>

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

function leerExtractoPOST(cadena) {
// llega con una cadena (bodyPOST) con el HTML del post procesado
// y la devuelve procesada extrayendo el contenido
// busca la secuencia del DIV con el extracto oculto (28 caracteres)
var verificar = cadena.indexOf('<div class=\"extractoOculto\">');
if (verificar != -1) {
// si encuentra el DIV con el extracto oculto busca la secuencia final
var hasta = cadena.indexOf('</div>');
// y extra el contenido
cadena = cadena.substr(28,hasta-28);
} else {
// si no encuentra el DIV con el extracto oculto VEREMOS
// alert ("ERROR");
}
return cadena;
}

function ejecutarExtracto(idPOST,bodyPOST) {
// llega con idPOST que es el ID generado por Blogger 
// llega con bodyPOST que es el contenido HTML del post 

// la funcion verifica que haya un extracto y devuelve una cadena HTML
bodyPOST = leerExtractoPOST(bodyPOST);
// lo que se va a escribir es el contenido del extracto
var divPOST = "original-" + idPOST; // el DIV del post normal
document.getElementById(divPOST).innerHTML = bodyPOST;
}

function toggleIt(id) {
// la funcion del hack PeekABooPost
post = document.getElementById(id);
if (post.style.display != 'none') {
post.style.display = 'none';
} else {
post.style.display = '';
}
}

//]]-->
</script>

Un último esfuerzo para tener más opciones. Vamos a agregar script más, nos vamos al final de nuestra plantilla y justo antes de </body> colocaremos la función que nos permitirá mostrar contenidos variables en la sidebar:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script type='text/javascript'>
//<![CDATA[
if (document.getElementById('contenedorOculto') != null) {
var copiarContenido=document.getElementById('contenedorOculto').innerHTML;
document.getElementById('contenedorDinamico').innerHTML=copiarContenido;
document.getElementById('HTML1').style.display='block';
}
//]]>
</script>
</b:if>

Vamos a ver cómo debemos usarla.

Una parte, el extracto, es exactamente igual que el que usamos antes (más información). El extracto es lo que se verá en la página principal en lugar del post. Basta colocarlo al inicio de las entradas, entre etiquetas DIV que tengan la clase extractoOculto.

Para que el estilo magazine funcione correctamente, las entradas deberán incluir ese DIV, caso contrario, se mostrará el contenido normal, cortado, ya que la altura de esos rectángulos es fija.

Por el contrario, el contenido dinámico es optativo. Ese contenido es el que se mostrará sólo en la sidebar cuando veamos la entrada individual y lo agregamos de modo similar, por ejemplo, al final del post, en un DIV con la clase contenedorOculto:

<div class="extractoOculto"><img src="URL_imagen" />Este es el contenido del extracto.</div>
....... el resto del post .......
<div id="contenedorOculto" style="display:none;">Este es un contenido exclusivo de la entrada.</div>

REFERENCIAS:

Magazine Parte 1

Magazine Parte 2

Magazine Parte 3