Tratando de entender el header (2)

El problema básico del header por defecto de Blogger es que el código es automático y por lo tanto, poco flexible. Por ejemplo, cuando usamos una imagen de fondo, se coloca dentro de una etiqueta IMG y por lo tanto, se hace muy complicado modificarla para que varie. Las primeras plantillas de Blogger no tenían esta dificultad ya que no tenían previsto el uso de imágenes y eso, en definitiva, hacía que fuera más sencillo modificarlas.

Así que, para resolver este problema y todos los asociados con el manejo de imágenes dentro del header, lo mejor es eliminar su contenido y colocar un código elemental que nos permitirá personalizarlo como se nos de la gana.

Expandiendo los artilugios, buscamos esto:

<b:section class='header' id='header'>
<b:widget id='Header1' locked='true' title='elTitulo' type='Header'>
  ... y vamos a eliminar todo lo que esté acá adentro ...
</b:widget>
</b:section>

Luego reemplazaremos eso que eliminamos por el código simplificado y quedaría esto:

<div id='header-wrapper'>
<b:section class='header' id='header'>
<b:widget id='Header1' locked='true' title='elTitulo' type='Header'>
  <b:includable id='title'/>
  <b:includable id='description'/>
  <b:includable id='main'>
    <div id='header-inner'>
      <b:if cond='data:blog.url != data:blog.homepageUrl'>
        <a expr:href='data:blog.homepageUrl'> </a>
      </b:if>
    </div>
  </b:includable>
</b:widget>
</b:section>
</div>

Como no vamos a usar el título ni la descripción del blog y los dos includable que los manejan no pueden eliminarse (porque vuelven a aparecer), los dejamos vacios, sin contenido y el único que usamos es el main que es todo lo que necesita un header ¿Qué hace ese código? Transforma la imagen que usamos en un enlace a la pagina de inicio de nuestro sitio que es accesible sólo cuando no estamos en el home.

Lo que sigue, es cambiar el CSS así que vamos a buscar las definiciones. Sólo necesitamos tres:

#header-wrapper {
  margin: 0 auto 10px; /* está centrado y tiene un pequeño margen que lo separa de los posts */
  width: 860px; /* es el ancho del blog y el ancho de la imagen de fondo */
}
#header-inner {
  background: transparent url(URL_imagenBlog) no-repeat 50% 50%; /* es la imagen a usar */
  height: 100px; /* debemos indicar la altura de esa imagen de fondo */
  width: 100%; /* que ocupará tptp el ancho del blog */
}
#header a { /* esa imagen es un enlace así que le damos los mismo valores */
  display: block; /* transformamos el enlace en un rectángulo de cierto tamaño */
  height: 100px; /* indicar la altura de la imagen de fondo */
  width: 100%; /* indicamos que ocupa todo el ancho */
}

El resultado sería el que se muestra en este blog de pruebas.

A partir de acá, como ya controlamos la imagen de fondo, podemos intentar, por ejemplo, mostrar headers aleatorios:

<script type="text/javascript">
  // lista de imágenes a utilizar
  misFondos=new Array('URL_imagen1','URL_imagen2','URL_imagen3');
  // elegimos una al azar
  var alea=Math.round(Math.random()* misFondos.length + 1);
  // creamos la etiqueta style y la escribimos
  var salida = '<style>#header-inner {background-image:url(' + imagen[alea] + ');}</style></style>';
  document.write(salida)
</script">

De forma similar, podríamos tener imágenes que roten de forma sucesiva o cualquier otra locura que se nos ocurra; por ejemplo mostrar una imagen diferente según sea la etiqueta.

Aquí, las cosas se nos complican un poco porque Blogger no nos dice la etiqueta de un post hasta que este es mostrado, lo hace dentro del LOOP así que no disponemos de ese dato en el <head> </head> de nuestra plantilla que es donde lo necesitamos, para decidir qué imagen vamos a usar ANTES que se cargue la página. Intentaremos entonces ser modestos y tener encabezados diferenciados para las páginas de listas; es decir, aquellas que, por defecto, muestran un recuadro generado por este código:

<b:includable id='status-message'>
  .......
</b:includable>

El único dato que identifica si estamos en una página de ese tipo es la URL de la misma:

http://nombreBlog.blogspot.com/search/label/nombreEtiqueta

o bien:

http://nombreBlog.blogspot.com/search/label/nombreEtiqueta?max-results=20

Y como Blogger no tiene códigos condicionales para indicarnos esto, debemos recurrir a la única alternativa que nos queda, usar JavaScript.

La idea es esta, vamos a leer la URL de la página, verificar si estamos en una de las páginas de etiquetas, leer esa etiqueta y luego, hacer que el script agregue el código de style correspondiente, exactamente como en el caso anterior.

Supongamos que tenemos tres etiquetas llamadas etiqueta1, etiqueta2 y etiqueta3 y tres imágenes distintas, una para cada una de ellas. Entonces, vamos a poner lo siguiente, justo antes de </head>:

<script type='text/javascript'>
// <![CDATA[
  // esta es una función interna necesaria para IE
  Array.prototype.indexOf = function(s) {
    for (var x=0;x<this.length;x++) if(this[x] == s) return x;
    return false;
  }
  // leemos la URL de la página
  var dondeEstamos  = window.location.href.replace(/&amp;/g, '&');
  // si no es una etiqueta, seguimos de largo
  if(dondeEstamos.indexOf('label') > -1) {
    // creamos dos arrays con la lista de etiquetas y las imágenes que queremos usar
    // en la primera, colocamos los nombres de las etiquetas tal como se ven en la barra de direcciones del navegador
    lasCategorias=new Array("etiqueta1","etiqueta2","etiqueta3");
    // en la segunda, colocamos las direcciones de las imágenes, en el mismo orden
    losHeaders=new Array("URL_imagen1","URL_imagen2","URL_imagen3");
    // vamos a filtrar la URL
    var buscarX=dondeEstamos.lastIndexOf('?');
    if(buscarX > -1) { dondeEstamos = dondeEstamos.substring(0,buscarX); }
    // averiguamos cual es la etiqueta
    var headerEtiqueta = dondeEstamos.substr(dondeEstamos.lastIndexOf('/')+1);
    // y cuál es la imagen
    var indice=lasCategorias.indexOf(headerEtiqueta);
    // si no la tenemos definida, seguimos de largo y no pasa nada
    if (indice != false) {
      // aquí vamos a crear el código CSS
      var salida = '<style>#header-inner {background-image:url(' + losHeaders[indice] + ');}</style>';
      // y lo escribimos
      document.write(salida)
    }
  }
// ]]>
</script>

El resultado sería el que se muestra en este blog de pruebas si se navega por las etiquetas primera, segunda, tercera y cuarta.

ElHackerZ