Hace poco me planteé meter una sección de imágenes aleatorias en la web que estoy administrando junto con un amigo sobre coleccionismo español de la guerra de las galaxias.

El caso es que el hecho de tener un montón de imágenes almacenadas no es la mejor solución para un hosting si no tienes mucho espacio, por lo que se me ocurrió recurrir a la sección de imágenes de google. En esta sección se muestran en formato thumbnail (imágen pequeña de referencia) todas las imágenes de las páginas web que en su día indexó google, por lo que además de tener un vasto repertorio de imágenes, todas ellas estan asociadas al texto de la web a la que pertenecen. Así, si buscamos por palabras, podemos encontrar imágenes que concuerden con la búsqueda.

A mi me viene de lujo para mis intenciones, puesto que poniendo star wars en el cuadro de texto de la sección de imágenes de google aparecen algo menos de un millón de resultados. Añadiendo que la sección que quería poner en la web era más bién pequeña, las imágenes thumbnail de google son perfectas en cuanto a dimensiones para que quepa en la sección de la web.

Ahora bién, ¿como hacer para que los thumnails que google ha generado salgan en la web como propios?…Pues gracias a php puedo leer el contenido de las urls y mostrarlo con una cabecera apropiada como si fuera una imagen normal y corriente.

1-Una imagen en HTML se hace con la etiqueta IMG y el atributo src. En mi caso la imágen aletoria de la web debería apuntar siempre a un mismo sitio ya que es el propio php quien mostraría una imagen distinta cada vez. Por lo que en la web si os habeis fijado aparece:

<img src=»aleatorio.php» alt=»Imagen aleatoria (Gracias a Google Images)»>

Que indica al navegador que debe mostrar la imagen que genera la página aleatoria.php (con esto os podeis imaginar que los nombres de los ficheros le importan un pimiento al navegador, solo le interesa las cabeceras que devuelva el servidor)

2-Ahora tenemos que programar el código que recupere y muestre los bytes de la imagen que se quiere escoger al azar. Para ello debemos coger las imagenes de google, pero ¿como?. Pues antes de mostrar nada de código, voy a explicar muy por encima como funciona la sección de imágenes de google:

Voy a http://images.google.es/ y pongo como busqueda star wars

Me salen 20 imágenes, y unos enlaces para ir avanzando en el catálogo de imágenes. Sin embargo los thumbnails que aparecen son todavía un poco grandes para la sección de la web, por lo que elijo la opción Medianas, ahora pulsaremos por ejemplo sobre la página 3 del catálogo. Si os fijais a medida que he ido pulsando enlaces la url aparece con más datos:

http://images.google.es/images?q=star+wars&imgsz=small%7Cmedium%7Clarge%7Cxlarge&svnum=10&hl=es&lr=&start=40&sa=N

Esto es lo que nos servirá como primer punto para la busqueda de imágenes relacionadas con un tema determinado. Si os fiajis en los parámetros de la url está la letra q, donde se almacena el criterio de la búsqueda (en mi caso star+wars); imgsz, que indica el tamaño de las imágenes a buscar (puede ser también xxlarge e icon, aunque en mi caso es small%7Cmedium%7Clarge%7Cxlarge); svnum que no se para que sirve, ya que si lo quito funciona igual; hl para el idioma de los resultados; lr que tampoco sé para que sirve, start que indica desde que indice empezar, este es muy importante ya que aqui usaremos el primer número aleatorio; sa=N que no se para que sirve.

Como os comentaba, con start se puede indicar desde que índice de las imágenes empezar a mostrar: 0 sería desde la primera página, 20 desde la segunda página, 40 desde la tercera, etc. También podemos poner valores intermedios, pero yo sigo el camino de google con sus enlaces.

Una vez que ya podemos elegir que página de imágenes queremos cargar, ya solo queda elegir que imagen de las 20 que aparece en esa página mostrar, momento por el cual debemos usar el segundo número aleatorio. Pero claro, lo que nos interesa son las imágenes de google, no las originales a las que apunta el enlace de cada una de ellas. Por eso debemos recorrer el codigo fuente HTML de la página que hemos recuperado para ir etiqueta por etiqueta IMG hasta alcanzar el número aleatorio que habiamos solicitado. Sin embargo no podemos empezar desde el principio puesto que google tiene en su página un logo, unas imagenes de 1 pixel de grosor, etc. Es por ello que debemos comenzar a partir de un punto donde sepamos que a continuación todas las etiquetas IMG son las de los thumbnails. En mi caso uso la cadena «Solamente se muestran las«.

A partir de entónces, cuando ya obtengamos el atributo src de la etiqueta IMG requerida, ya podremos recuperar los bytes de la imagen thumbnail de google a través de su url. Posteriormente solo queda mostrarla a través del PHP.

El siguiente código fuente muestra como lo hacer lo que he comentado anteriormente desde una página php:

Podeis ver un ejemplo de su funcionamiento en la web que os indicaba arriba o directamente en este enlace http://www.starwarsspanishstuff.info/aleatorio.php.

Recomiendo poner en el texto alternativo un reconocimiento a google.