BlogCFC Flickr Images Pod
I have all of my photos over on Flickr and wanted a small blogCFC pod on the right side to display the most recent uploads. Here is how I did it.
First create a new pod within blogcfc, this is easily done by going to the /tags/layout.cfm and adding a line in amongst the other pods:
Now go to the /includes/pods directory and create an images.cfm file.
At this point I should mention that I have used CFlickr a full features CF implementation of the Flickr API. There are other ways of doing this in CF but I intend to do more with Flickr on my site soon. So if you want to use it, go download it!
<cfprocessingdirective pageencoding="utf-8">
<cfmodule template="../../tags/scopecache.cfm" cachename="pod_images" scope="application" timeout="#application.timeout#">
<cfmodule template="../../tags/podlayout.cfm" title="Recent Flickr">
<cfoutput>
</cfoutput>
</cfmodule>
</cfmodule>
<cfsetting enablecfoutputonly=false>
Next put in the code for CFlickr. In this case we want all the images for my username Length. (For the purposes of this demo I have removed my API key get yours at Flickr API)
First in the top of the images.cfm add in the creation of the instance and hit the required method to fetch a users images.
<cfset flickr = createobject("component", "CFlickr.Flickr")>
<!--- change to use your API key --->
<cfset flickr.init("123456789123456789")>
<!--- 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()>
<!--- Get the 4 most recent photos --->
<cfset photoList = usrInterface.getPublicPhotos(user_id=nsid,per_page=4,page=1)>
<cfset arrayPhotos = photoList.getPhotos()>
Now loop over the result and display them neatly with title and alt attributes filled with the title of the photo.
<!--- Loop over the photos and output a thumbnail of each --->
<cfloop from="1" to="#arraylen(arrayPhotos)#" index="i">
<cfset photo = arrayPhotos[i]>
<a href="http://www.flickr.com/photos/length" title="#photo.getTitle()#"><img src="#photo.getPhotoUrl(photo.SIZE_SMALL_SQUARE)#" border="0" alt="#photo.getTitle()#"/></a>
</cfloop>
<a href="http://www.flickr.com/photos/length">More from Length @ Flickr</a>
</div>
And the end result is what you see on the right. The complete code is attached to this entry.
and we just want people to input their email address or flickr username. And all of this is implemented in our site