O'Reilly Hacks
oreilly.comO'Reilly NetworkSafari BookshelfConferences Sign In/My Account | View Cart   
Book List Learning Lab PDFs O'Reilly Gear Newsletters Press Room Jobs  


 
Buy the book!
Yahoo! Hacks
By Paul Bausch
October 2005
More Info

HACK
#85
Mash Up Images from Around the Web
The Yahoo! Image API provides access to thousands of images across the Web, and developers are recombining these images into new applications that let you play along
[Discuss (0) | Link to this hack]

In the music world, a mash-up combines two or more existing songs into something entirely new. A mash-up might have a song from the Beatles in the background and vocals from Snoop Dogg in the foreground, while blending in a Sesame Street song at the same time. The Yahoo! Image Search web service offers programmatic access to thousands of images, and some developers are using this service to create their own visual mash-ups—combining disparate images into games, interesting visualizations, or random works of art. Here are a few interactive examples that will give you a taste of what's being mashed together with the Yahoo! Image Search API.

Yahoo! Buzz Demo

The Yahoo! Buzz Demo is an alternative way to read the news. When you browse to http://buzz.progphp.com, you'll find an oval-shaped collage made up of over 100 different images, each representing a current top news story. As you move your pointer over each image in the collage, the image pops to the foreground so that you can see it clearly, and a summary of the news story the image represents is displayed in the middle of the page, as shown in .

Clicking an image takes you directly to that image's original location on the Web, and clicking the center news story takes you to the full story at Yahoo! News. In addition to top stories, you can browse images based on other news categories, or use your own term.

Rasmus Lerdorf, a Yahoo! employee, built the Yahoo! Buzz Demo to show what's possible with the Yahoo! Image Search web service. The demo uses PHP to pull in news stories from Yahoo! News RSS and the Yahoo! News API, images from around the Web via the Yahoo! Image API, and some crafty CSS to pull everything together. While it won't replace the front page of the paper anytime soon, the Buzz Demo is a fun way to find stories. If you'd like to take a look behind the scenes, you can view the complete source code at http://buzz.progphp.com/buzz.phps.

Search Collage Generator

Siddharth Uppal put together around 100 lines of Perl that grabs up to 50 images for any given query and assembles them into a single collage. He used the existing Yahoo::Search module (available at http://search.cpan.org/~jfriedl/Yahoo-Search-1.4.7/lib/Yahoo/Search.pm) to assemble Yahoo! Image

Figure 1. A visual look at top news stories

API requests and return the results as Perl-friendly objects. The script then puts each image into a collage on a web page, resizing each image to the same size within HTML <img>tags.

You can download a copy of the script at http://upster.blogspot.com/2005/03/yahoo-image-search-collage-generator.html and run it from the command line like this:

perl yahoo_collage.pl --queryinsert query

The output is HTML, so you'll want to send this output to a new file. For example, you can create a collage of portraits from around the Web by calling the script like this:

perl yahoo_collage.pl --query portrait > portrait.html

After you run this script, portrait.html will show you a collage similar to the one in .

The script also provides the HTML necessary to share your collage with the world. You can simply cut and paste the HTML in the <textarea> at the bottom of the page and paste it into your weblog or web publishing tool to show off your creation.

Figure 2. A collage generated with the query "portrait"

Yahoo! Memory Game

Remember those memory games you played as a kid, where you had to turn over cards of matching pictures? Swedish developer Nisse Bryngfors recreated the game with the Yahoo! Image API and Flash. When you browse to http://bryngfors.com/index.php?page_id=10, you'll find a blank game form titled "Dynamiskt memory spel," and a "Search images" field in which you can type a search term. Enter a term, click Go!, and the game will be populated with 28 silver tiles.

Clicking a silver tile reveals an image that has been gathered via the Yahoo! Images API. Somewhere under another tile is the same image, and it's your mission to find all of the matches as quickly as possible. shows a game in progress using the term fire.

If you'd like a shorter game, you can decrease the number of tiles. Sometimes, seeing what images the Yahoo! Image API returns is as entertaining as the game itself!


O'Reilly Home | Privacy Policy

© 2007 O'Reilly Media, Inc.
Website: | Customer Service: | Book issues:

All trademarks and registered trademarks appearing on oreilly.com are the property of their respective owners.