¿Crear una galeria de imágenes con Google Docs?

Una de las cosas complicadas de Blogger es que, como no disponemos de la posibilidad de alojar archivos que no sean imágenes, nos vemos limitados a utilizar la plantilla o los posts para cualquier cosa, sea esto un índice, un formulario de contacto o cualquier extra que necesitemos. Es una pena porque hay muchas técnicas sencillas que nos permitirían mejorar nuestros sitios sin necesidad de recurrir siempre a gadgets ofrecidos por un servicio. Pese a eso, algunas cosas pueden hacerse usando las mismas herramientas que ofrece Google.

Una de ellas es Google Docs, especialmente las llamadas planillas de cálculo (spreadsheets) ... y antes que quienes odien estas cosas o se hayan indigestado con la palabra cáculo huyan despavoridos, déjenme aclarar que quiero mostrar como usar una de esas planillas para crear una galería de imágenes aleatorias.

cambiar las imágenes

Nada del otro mundo pero la idea puede servir para cualquier otra cosa ya que una característica de estas planillas es que podemos leer su contenido desde un sitio web así que podría servir para muchas cosas, una lista de imágenes tan simple como esta o algo más sofisticado donde se requieran muchos datos.

Entramos a Google Docs con nuestra cuenta de GMail y allí hacemos click en el menú New | Spreadsheet lo que nos abrirá una ventana con una hoja nueva que no es otra cosas que una grilla formada por columnas y filas; una hoja cuadriculada donde cada sector es una celda en la que podemos escribir algo. Lo primero que haremos es ponerle un nombre.

Nos toca ahora llenarla y en la fila 1 columna A colocaré un titulo, algo que identificará esa columna, sin acentos, espacios ni caracteres especiales para evitar problemas. En este caso, la llamaré IMAGEN y es indistinto que sea en mayúsculas o minúsculas. Luego, hacia abajo, agregaré una serie de direcciones URLs de imágenes alojadas en diferentes servidores, en Blogger mismo, en ImageShack, en XooImage, en TinyPic e incluso algunas de domino público.

Sin demasiados problemas, hemos creado una base de datos, hiper-simple pero base de datos al fin.

Ahora debemos hacer un par de cosas para que podamos leerla desde nuestro blog.

Click en el botón SHARE que está arriba a la derecha y seleccionamos Publish as web page.

Se abrirá una ventana y en la opción Get a link to the published data seleccionamos RSS. Nos mostrará un código como este:

http://spreadsheets.google.com/feeds/list/RPd2ssiQhWQVretbgDHGOD/od6/public/basic?alt=rss

donde lo único que nos importa es eso resaltado, la clave (key) que luego usaremos para leer la planilla.

Volvemos a SHARE y seleccionamos Get the link to share y nos aseguramos que sea pública pero que sólo podamos editarla nosotros.

Hasta ahí nuestra plantilla. De ahora en adelante, podremos editarla sin necesidad de repetir todos estos pasos, los cambios se iran guardando y se re-publicarán de manera automática.

¿Cuál es su característica principal? Que, al publicarlas, obtenemos un feed y ese feed es accesible, podemos leerlo con JavaScript porque Google nos dice cómo hacerlo.

Vamos entonces a agregar un pequeño script en la plantilla del blog que leerá ese feed y usará los datos de las direcciones URL de las imágenes para crear una tabla donde mostraremos seis de ellas elegidas de manera aleatoria y que, en este caso, se abrirán con LightWindow.

Justo antes de </head> ponemos esto:

<script type='text/javascript'>
//<![CDATA[
  planillaURL = new Array();
  planillaTIT = new Array();
  cantidadplanilla = 0;
  function leerGDOCS(json) {
    cantidadplanilla = json.feed.entry.length;
    for(i=0; i<cantidadplanilla; i++) {
      planillaURL[i] = json.feed.entry[i].gsx$imagen.$t;
      planillaTIT[i] = json.feed.entry[i].gsx$titulo.$t;
    }
  }
  function mostrarGDOCS(donde) {
    var salida = "";
    var max = cantidadplanilla-1;
    var alea = Math.round(Math.random()*max);
    var cual = alea;
    var anchoTHUMB = 90; // el ancho de la miniatura
    var altoTHUMB = 90; // el alto de la miniatura
    salida += "<table class='demoGDOCS' cellspacing='5' cellpadding='0'>";
    salida += "<tr>";
    for (i=0; i<=5; i++) {
       // cada miniatura es una celda de la tabla
      salida += "<td align='center' valign='middle'>";
      // si se usa otro modelo de ventana modal, debería cambiarse este enlace
      salida += "<a class='lightwindow' rel='demoGDOCS[GDOCS]' href='" + planillaURL[cual] + "'>";
      salida += "<img width='" + anchoTHUMB + "' height='" + altoTHUMB + "' src='" + planillaURL[cual] + "' />";
      salida += "</a>";
      salida += "</td>";
      cual ++;
      if(cual>max) { cual = 0; }
    }
    salida += "</tr>";
    salida += "</table>";
    document.getElementById(donde).innerHTML = salida;
  }
//]]>
</script>
<script src='http://spreadsheets.google.com/feeds/list/_aquí_el_valor_de_nuestra_clave_/od6/public/values?alt=json-in-script&amp;callback=leerGDOCS' type='text/javascript'/>

Y, como la tabla tiene una clase, podemos usar CSS para establecer cualquier diseño:

.demoGDOCS {
  /* es la tabla en si misma */
}
.demoGDOCS td {
  /* cada celda de la tabla */
}
.demoGDOCS td img {
  /* las miniaturas */
}

Para aplicarla basta colocar un DIV con un ID único y llamar a la función donde se nos ocurra mostrar la galería:

<div id="unNombreUNICO"></div>
<script>mostrarGDOCS('unNombreUNICO');</script>

A partir de allí, sabiendo que podemos leer cualquier columna y cualquier fila de la planilla creada, las posibilidades son múltiples y quedan libradas a la imaginación y las necesidades de cada uno.

Otra variante donde se lee otro dato más, un texto para cada imagen:

ElHackerZ