Placeholder Image (s) with jQuery and Bing Image Search API

I’m often creating websites that need placeholder images for lots and lots of dynamically generated content. Usually I just stare forlornly at blue question boxes, but this time I decided to get serious and try to pull relevant images from an image search API. Google’s shut down, and so did Yahoo, so I used Bing, and it worked like gangbusters

(There exists a nice way of doing this from flickr, but for the site I’m currently developing that really wouldn’t have worked very well, as flickr’s photos are artsy and I needed product images.)

1. Sign up for the Bing developer center. Note your API Key.
2. Import jQuery into your HTML.
3. Download img_placeholders.js.
4. Open the file, change APP_ID_GOES_HERE to your Bing API Key.
5. Include it in your html.

6. Include the following script block in your HTML when you need it:

   So instead of George Clooney, put in what you want to search for. (or don’t and check out some man candy) And instead of img_div_id put the id of your html image tag. I recommend applying a fixed width and height style to your image tag so the search images don’t outsize the space you have allotted for them.

   This will get the first image of the Bing image search results. Might be fun to change the code inside of img_placeholders.js to randomize the results a little bit

That’s it!

Click Here to view the demo

I adapted this for use with django, which i’m using to create a database of products. Until I get the photos from my client, I’ll just pull the images from Bing. The website looks a lot livelier now. A sample of the django template code below:

Bigups to MyTechWorld, whose code I adapted to pull Bing image search results.

————————

The best reviewed jQuery book out there: jQuery in Action, Second Edition

Learn Django and build awesome web apps in like, a week: Practical Django Projects (Expert’s Voice in Web Development)

If this helped you out do me a solid and click here! :) --> Or you can follow me on Twitter, too. I promise to entertain.