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:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 |
<? // Hacemos que nunca se cachee ninguna imagen header("Expires: Mon, 26 Jul 1997 05:00:00 GMT"); header("Last-Modified: " . gmdate("D, d M Y H:i:s") . " GMT"); header("Cache-Control: no-store, no-cache, must-revalidate"); header("Cache-Control: post-check=0, pre-check=0", false); header("Pragma: no-cache"); //elegimos una sección al azar de las imagenes de google $texto=""; mt_srand((double)microtime()*1000000); $inicio = mt_rand(0,20)*20; $url="http://images.google.es/images?q=star+wars&imgsz=small%7Cmedium%7Clarge%7Cxlarge&hl=es&lr=&start=$inicio&sa=N"; // abrimos la url generada dinamicamente $fichero=fopen($url,"r"); while(!feof($fichero)) $texto.=fread($fichero,1024); fclose($fichero); // dentro de la página devuelta, elegimos una imagen al azar $indice = mt_rand(1,20); // para ello debemos recorrer todas las etiquetas IMG desde una posición determinada $posicion=strpos($texto,"Solamente se muestran las"); for($contador=0;$contador<$indice;$contador++) $posicion=strpos($texto,"<img",$posicion)+4; $posicion=strpos($texto,"src=",$posicion); // cogemos la url de esa imagen de thumbnail de google $url="http://images.google.es" . substr($texto,$posicion+4,strpos($texto," ",$posicion)-$posicion-4); $texto=""; // la abrimos para recuperar su contenido $fichero=fopen($url,"r"); while(!feof($fichero)) $texto.=fread($fichero,1024); fclose($fichero); // mostramos la cabecera acorde con el tipo de fichero switch(substr($url,strrpos($url,"."))) { case ".gif": header("Content-type: image/gif"); break; case ".png": header("Content-type: image/png"); break; default: header("Content-type: image/jpeg"); break; } // y finalmente mostramos el contenido de la imágen recuperada echo $texto; ?> |
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.
Interesante. Pero pareces asumir que tu tienes derecho (y permiso) de usar esas imagenes (que en realidad estan en otro sitio) en el tuyo.
El webmaster de las paginas donde esten alejadas todas esas imagenes bien pueden hacerte un planteo legal por el uso sin permiso.
Eso abriría un debate sobre si legal o no sindicar contenidos, si es legal o no tener imagenes y texto en la caché del navegador, si es legal o no que google indexe y transforme el tamaño de las imágenes…
Ya que google images muestra un enlace y no los propios derechos de autor, se entiende que es google el primero que infringe esos derechos, sin embargo no ha sido protestado por nadie ni retirado el servicio, porque si alguien no quiere que salga la imágen, tiene métodos para poder quitarla del indexador (y al mismo tiempo del script php que he creado).
hola, estoy leyendo tus posts, realmente son geniales, aquí quisiera hacer un aporte, creo que si luego que obtienes la url de la imagen aleatoria que quieres mostrar pones:
header(«Location:»+url_img_aleatoria);
te ahorras un poco de codigo.
Un saludo.
emiliano
Hola Emiliano, tu idea es buena, pero cuando pulsases sobre las propiedades de la imágen saldría google como url en vez del dominio donde albergues el php.
hola.
ti idea me funciono pero kisiera saber como puedo hacer una imagen mia al url para ponerla en myspace..???leonardo_rre@hotmail.com
No lo puedo hechar a funcionar, me hechas una mano 🙁
Este artículo es de hace casi 9 años, me temo que han cambiado tantas cosas que no sabría por donde empezar.