Website Photos: Camera Phone to Website Using Flickr

I’ve recently been looking at different options of simply and quickly getting images displayed on a website. Ideally something that can be done by anyone and from anywhere! Useful for all sorts of websites, from hobby sites to websites promoting live shows etc.

Here are a couple of different options that both make use of the free Flickr service - www.flickr.com (NB Flickr is owned by Yahoo!)

These options are making use of something called a Flickr badge. This is a snippet of code that links your web page with your Flickr account – displaying your photos automatically.

You can upload your images to Flickr from any PC with an internet connection – but it’s also quite handy to be able to take a photo on a mobile phone and then send it directly to Flickr via your mobile connection. That’s all you have to do. The image will automatically appear on your web page!

I’m using an Android app called Flickroid. So I can take a photo and then send directly to Flickr – job done. Lots of phones have some type of Flickr app built in these days.

Flickr have only recently (late summer 2011) released their own Android app – it looks like at the same time Flickroid has been removed (possibly due to copyright issues).

The official Flickr app can be found here:

https://market.android.com/details?id=com.yahoo.mobile.client.android.flickr

I’ve created two demonstrations showing what can be done.

One is very simple and quick to setup the other a little bit more complicated.

www.flickr.com/services/apps/72157625016035753/ - you need to login (all free) to look at this page, so you will need a Flickr account.

By following Flickr’s simple setup wizard you can create either an HTML Badge or a FLASH version. The images you are going to display can be the latest or random ones in your account or from a photo ‘set’ or even gathered from other Flickr users that have allowed their photos to be shared.

5 Steps to a Flickr Badge

I’ve gone down the HTML route.

Flickr creates the required JavaScript code that you just copy/paste into your web page. I’ve changed the formatting by editing the CSS etc. but this isn’t necessary.

My demo of the official Flickr Badge is here: http://www.hmmm.ip3.co.uk/camera/flickr-badge.shtml

TWEAK

With the official Badge clicking a thumbnail image takes the visitor to your Flickr account. I’ve added the following code snippet after the Flickr code so that Flickr opens in a new window/tab so the visitor doesn’t lose my web site.

<script type="text/javascript"> var flickrNumImgs = 7; for ( i=1;i<=flickrNumImgs;i++ ) { var flickrBadgeImage1Div = document.getElementById('flickr_badge_image'+i); var a = flickrBadgeImage1Div.firstChild; a.setAttribute('target', '_new'); } </script>

So that’s all pretty useful and is very simple to set up.

But you might want more…

Ideally I wanted visitors to click an image thumbnail and open a larger version using a Gallery Lightbox (and not be taken to the Flickr site) – something that people are familiar with and works well for galleries.

I found this PHP script does the job well:

http://www.ibluemojo.com/example/BMPyFlickr/flickr_badge.html

It makes use of the popular Lightbox2, so you will need their files as well:

http://www.huddletogether.com/projects/lightbox2/

Following the instructions I created a demo here: http://www.hmmm.ip3.co.uk/camera

Since that script was written Flickr now allow you to ‘fetch’ larger images.

I added ‘_z’ to this line:

$str .= ‘<a target="_blank" class=".$link_css." href="'.$result[1].'_z.jpg"

This fetches a larger image from Flickr when a thumbnail is clicked.

Notes

I’ve found that images displayed using the official Badge script are always available immediately but sometimes the ones using the Flickr API via the PHP script can be delayed – sometimes by a few hours. This is worth knowing in case you think your script isn’t working!

Now you know the term ‘Badge’ there are plenty of other Flickr Badge scripts out there to be found if the above doesn’t quite do what you need.