Adding Flickr Thumbnails to Your Web Page

June 5th, 2009 by Gage Choat

Note: This post is one of a series of posts that breaks out the individual topics of my presentation “Pimp My Web Page” given at WebVisions 2009. You can see the fully pimped page that includes the code detailed below at http://pimpedblog.harmonicnw.com. Code tested for XHTML 1.0 Strict pages on IE 6 and 7 for PC, Firefox 3 for PC/mac, Safari 4 public beta for mac.

You can easily add Flickr thumbnails to your web page using Flickr’s web badge API. Insert the code below in your page where you want the thumbnails to appear:

<script type="text/javascript" src="http://www.flickr.com/badge_code_v2.gne?count=8&amp;display=random&amp;size=s&amp;source=user_set&amp;set=72157606336502682"></script>

Read on for details about adjusting the parameters to obtain the photos you want and styling the output with CSS.

Background

As with using the YouTube API, if you properly authenticate you can do all sorts of neat things with the Flickr API. The method I’m explaining here is a simple way to get your thumbnails without having to do any authentication. For most people, the functionality offered by the web badge API is probably enough. After all, it does allow you to pull up to ten photo thumbnails with a choice of sizing options from either a user account, a photo set or a group.

How It Works

This script makes a call to the Flickr API with a bunch of user parameters (i.e. count, display, etc.) In return, Flickr returns a bit of JavaScript that writes the requested thumbnails right to your page. Easy, huh?

Parameters

Specify parameters by changing the values after the ? in the script source URL. You can use these parameters to adjust number of thumbnails, size of thumbnails and source of the photos.

A word about size: if you choose the small square option (s), you will get a square that has cropped out the excess tallness or width from the original photo. With the other two options, you will get either a tall rectangle or a wide rectangle depending on the portrait/landscape orientation of the photo.

  • count – Number of thumbnails to show. Limit of 10 thumbnails.
  • display – Choose between random or latest.
  • size– Choose from the following options:
    • s – 75 pixels by 75 pixels
    • t – longest side is 100 pixels
    • m – longest side is 240 pixels
  • source– Choose from the following options:
    • user – Displays photos from a user. Specify which user by adding &user=[userid] where you specify the user ID.
    • user_set – Displays photos from a photo set. Specifiy which set by adding &set=[setid] where you specify the set ID.
    • group – Displays photos from a group. Specify which group by adding &group=[groupid] where you specify the group ID.
  • layout – This one is optional. If you want an alternate to the default HTML output, you can add &layout=x (see The HTML Output section below for details.) Otherwise just leave it out as I do in my examples. I believe the other “correct” options are h and v, but these both seem to result in the same default output.

Confusing? How about some examples. Let’s say you wanted to pull 5 random photos from the user bridgepix (user ID: 80651083@N00) in the largest size setting. You would use the following code:

<script type="text/javascript" src="http://www.flickr.com/badge_code_v2.gne?count=5&amp;display=random&amp;size=m&amp;source=user&amp;user=80651083@N00"></script>

Or if you wanted to pull the 3 latest photos from the Timbers Army group (group ID: 79221983@N00) in the smaller rectangular thumbnail size, use:

<script type="text/javascript" src="http://www.flickr.com/badge_code_v2.gne?count=3&amp;display=latest&amp;size=t&amp;source=group&amp;group=79221983@N00"></script>

So How Do I Locate those IDs?

You can find IDs for the user and photo sets within the URL of the photostream and photo set pages.

  • User ID – The user bridgepix‘s photostream can be found at http://www.flickr.com/photos/80651083@N00/. The user ID is at the end of the URL (shown in bold here.)
  • Photo set IDbridgepix has a photo set at http://www.flickr.com/photos/80651083@N00/sets/72157606336502682/. The set ID is at the end of the URL (shown in bold here.)

The group ID isn’t quite as obvious.. it is hidden away from sight within the HTML. To find a group ID, browse to the Flickr group page, copy the group home page URL from your browser, then go to http://idgettr.com/ and paste the URL in the form. Hit the Find button to get the group ID. You can also use this site to get a user ID.

The HTML Output

If you do not specify layout=x in the parameters, then the HTML that the Flickr web badge API inserts into your page is structured like the example below:

<a href="http://www.flickr.com/photos/80651083@N00/2649621736/">
    <img width="75" height="75" title="USS Blueback Submarine" alt="A photo on Flickr" src="http://farm4.static.flickr.com/3139/2649621736_e988c72421_s.jpg"/>
</a>
<a href="http://www.flickr.com/photos/80651083@N00/2740661357/">
    <img width="75" height="75" title="Steel Bridge, Portland, Oregon" alt="A photo on Flickr" src="http://farm4.static.flickr.com/3248/2740661357_08c3a04671_s.jpg"/>
</a>
<a href="http://www.flickr.com/photos/80651083@N00/2656206031/">
    <img width="75" height="75" title="Submarine Propeller" alt="A photo on Flickr" src="http://farm4.static.flickr.com/3120/2656206031_b52e379d2d_s.jpg"/>
</a>

If you had your Flickr API call within a <div> with the id photos, then you might add a stylesheet rule like #photos a img { margin: 0 5px } to add a margin between images. Or if you wanted to do away with the margins for all images including these thumbnails, you might use img { border: none }.

If you do specify layout=x in the API call, then you get slightly different HTML output that looks like:

<div id="flickr_badge_image1" class="flickr_badge_image">
    <a href="http://www.flickr.com/photos/80651083@N00/2660201203/">
        <img width="75" height="75" title="Morrison Bridge" alt="A photo on Flickr" src="http://farm4.static.flickr.com/3133/2660201203_5b5939a851_s.jpg"/>
    </a>
</div>
<div id="flickr_badge_image2" class="flickr_badge_image">
    <a href="http://www.flickr.com/photos/80651083@N00/2665667372/">
        <img width="75" height="75" title="Morrison Bridge, Portland, Oregon" alt="A photo on Flickr" src="http://farm4.static.flickr.com/3184/2665667372_40308a78a0_s.jpg"/>
    </a>
</div>
<div id="flickr_badge_image3" class="flickr_badge_image">
    <a href="http://www.flickr.com/photos/80651083@N00/2656206031/">
        <img width="75" height="75" title="Submarine Propeller" alt="A photo on Flickr" src="http://farm4.static.flickr.com/3120/2656206031_b52e379d2d_s.jpg"/>
    </a>
</div>

Making it W3C Valid

You should replace the @s in the URLs with %40s. And I’ve already encoded my &s with &amp;s in the examples. So to make that bridgepix user example fully XHTML 1.0 Strict W3C-compliant, use this code:

<script type="text/javascript" src="http://www.flickr.com/badge_code_v2.gne?count=5&amp;display=random&amp;size=m&amp;source=user&amp;user=80651083%40N00"></script>

Further Reading

Posted in HTML, JavaScript, Web Development, WebVisions

Back to blog home