Siguiendo con la lista de cambios que llevo haciendo en diseño del blog esta nueva temporada, ahora he añadido el que la imagen de la cabecera del blog cambie aleatoriamente cada vez que se visita el blog o se accede a un post concreto. Y por si a alguien le interesa, voy a explicar la forma en que lo he hecho.
Buscando un poco en Internet para ver cómo lo habían hecho otras personas (no necesariamente con Blogger) me encontré con dos opciones. En las dos opciones intervienen tanto CSS como Javascript. Éstas son:
- Predefinir con CSS un estilo (con una imagen de fondo) para la cabecera, y al cargar la página, mediante Javascript, redefinir ese estilo (para cambiar la imagen) accediendo a los elementos de la cabecera (a partir de identificadores, objetos, atributos, valores...).
- Asignar a la cabecera un estilo inexsistente, y al cargar la página, mediante Javascript, generar un trozo de código CSS que defina ese estilo con una imagen aleatoria cada vez.
Yo me he basado en la segunda, que a mi juicio resulta mucho más sencilla y más "limpia".
Lo que necesitamos a priori es:
- Saber un poco de CSS y Javascript.
- Que el blog tenga ya una imagen de fondo en la cabecera, y que las imágenes que vayamos a usar tengan esas mismas dimensiones.
- Disponer de un espacio público en Internet donde alojar las imágenes (y un pequeño fichero Javascript que facilitará el trabajo).
- Que las imágenes (y el fichero Javascript) sean accesibles a través de URLs del estilo:
- http://servidor/mis/imagenes/imagen0.jpg
- http://servidor/mis/imagenes/imagen1.jpg
- ...
Para el tema del alojamiento yo he usado una carpeta pública de DropBox, ya que por ejemplo hacerlo con PicasaWeb sería más complicado por el tema de los nombres de las imágenes y las URLs que tienen asociadas.
Entonces, la forma de proceder es la siguiente:
- Publicar las imágenes que queramos.
- Generar un fichero Javascript (yo lo he llamado mylib.js) y publicarlo también. El fichero Javascript con el siguiente contenido:
var NUMBER_OF_IMAGES = 5;
function createClassRandomImage() {
imgId = Math.floor(Math.random() * NUMBER_OF_IMAGES);
document.write('<style type="text/css">\n');
document.write(' .random_image { background-image: url("http://servidor/mis/imagenes/imagen' + imgId + '.jpg"); }\n');
document.write('<\/style>\n');
}
createClassRandomImage();
- En la plantilla HTML de Blogger añadir antes del final del HEAD la siguiente línea para cargar el fichero Javascript:
...
]]></b:skin>
<script src='http://servidor/mis/imagenes/mylib.js' type='text/javascript'/>
</head>
<body>
...
- También en la plantilla HTML de Blogger (expandiendo los widgets), buscar el siguiente trozo de código, y editarlo añadiendo un atributo class y quitando la url de la imagen original, para pasar de esto:
...
<div expr:style='"background-image: url(\"" + data:sourceUrl + "\"); "
+ "background-position: "
+ data:backgroundPositionStyleStr + "; "
+ data:widthStyleStr
+ "min-height: " + data:height + "px;"
+ "_height: " + data:height + "px;"
+ "background-repeat: no-repeat; "' id='header-inner'>
...
...
<div class='random_image' expr:style='"background-image: "
+ "background-position: "
+ data:backgroundPositionStyleStr + "; "
+ data:widthStyleStr
+ "min-height: " + data:height + "px;"
+ "_height: " + data:height + "px;"
+ "background-repeat: no-repeat; "' id='header-inner'>
...
- Guardar los cambios... y ya debería funcionar :)
En este caso hay configuradas 5 imágenes (variable
NUMBER_OF_IMAGES del fichero Javascript). Para configurar más o menos imágenes simplemente hay que variar ese número y añadir las imágenes junto con las otras... sin tener que tocar nada más en la plantilla del blog.
Posts
