Cloudmark Desktop Banner

Listing sets from Flickr with CFlickr

CFlickr has some pretty cool stuff, the guy that developed it (Chris) has constructed the entire Flickr API in ColdFusion from what I can tell.

Today we are going to look at how to list a users sets via CFlickr. First you need to get the NSID for the user you want the sets for.

!-- Create an instance of the Flickr class--->
<cfset flickr = createobject("component", "CFlickr.Flickr")>
<!--- change to use your API key --->
<cfset flickr.init("yourAPIkey")>

<!--- Get the interface we want to work with --->
<cfset usrInterface = flickr.getPeopleInterface()>
<!--- Find the nsid for the user length --->
<cfset nsid = usrInterface.findByUsername("length").getID()>

First lets set up the PhotosetsInterface for the specificUser, in this case 'length', and retrieve the list of sets available.

<cfset setInterface = flickr.getPhotosetsInterface()>
<cfset setList = setInterface.getList(user_id=nsid)>

Next we will loop over the sets and display the name, and title image for that set.

Lets loop over the array first and set the title and id to variables so we dont have to call those methods twice in the loop.

<cfloop from="1" to="#arraylen(setList)#" index="i">
   <cfset title = setList[i].getTitle()>
   <cfset id = setList[i].getId()>
   .....
</cfloop>

Now lets pump out the image for this set, this code pulls out the photoURL for the primary photo in the set, and specifies that we want the nice 'size_small_square' small square version of that photo.

<img src="#setList[i].getPrimaryPhoto().getPhotoURL(setList[i].getPrimaryPhoto().size_small_square)#" border="0" alt="#title#">

Lastly lets wrap that in a a tag so we can later get the photos in this set, put the title underneath and the number of photos in the set.

<a href="?s=#id#"><img src="#setList[i].getPrimaryPhoto().getPhotoURL(setList[i].getPrimaryPhoto().size_small_square)#" border="0" alt="#title#">
<br>#title# (#setList[i].getPhotoCount()#)</a>

And here is the complete finished product:

<cfset setList = setInterface.getList(user_id=nsid)>
<cfoutput>
<h1>Photo Sets</h1>
<div class="body"><p>There are currently #arraylen(setList)# sets.</p></div>
<table id="photoTable">
   <tr>
   <cfloop from="1" to="#arraylen(setList)#" index="i">
      <cfset title = setList[i].getTitle()>
      <cfset id = setList[i].getId()>
      <td width="25%" onClick="location.href='?s=#id#';">
         <div class="menuBody" style="text-align:center;">
         <a href="?s=#id#"><img src="#setList[i].getPrimaryPhoto().getPhotoURL(setList[i].getPrimaryPhoto().size_small_square)#" border="0" alt="#title#">
         <br>#title# (#setList[i].getPhotoCount()#)</a>
         </div>
      </td>
      <cfif i mod 4 eq 0></tr><tr></cfif>
   </cfloop>
   </tr>
</table>
</cfoutput>

Whilst working out how this all works cfdump is very much your friend. Remember that cfdump of an object will show you all the methods available in that class, and you can be invaluable in helping you work out where you go next.

The CFlickr CFC documentation is a great place to get started too.

In the next part, how to display images from a set.

Cloudmark Desktop Banner
Comments
Chris's Gravatar Hi, glad you like my CFlickr kit. Working with Flickr is very easy with CF, but hopefully CFlickr will reduce alot of the repetative coding and simplify it even further. I'll be adding a new caching feature to CFlickr soon, which really speeds things up for things like paging through photos in a photoset.

Chris
# Posted By Chris | 22/04/07 03:46
amin's Gravatar how to display our photos in original size
# Posted By amin | 03/09/07 21:34
Duncan's Gravatar Simply using photo.getPhotoUrl() will return the URL to the photo in its original size. If you would like to see for example a small square image then use photo.getPhotoUrl(photo.SIZE_SMALL_SQUARE), there are other sizes available, however it changes from image to image, so make sure you check first.
# Posted By Duncan | 14/09/07 09:19
BlogCFC was created by Raymond Camden. This blog is running version 5.9.001.