Freeola Home Get Dotted Domains Win Free Games Freeola Blog Freeola Guides Freeola Customer Forum
get Any UK domain name
just 49p for 1 year!

Freeola Guides


Website Photos: Camera Phone to Website Using Flickr

By on 20th December, 2017 | 1 Comment(s)

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.

 

Flickr’s Official Badge

 

www.flickr.com/badge.gne - 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


 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…

 

PHP Badge – Flickr with a Lightbox Gallery

 

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.


Did you find this article helpful?

Yes | No


Article Comments (1)
Add your comment:

Comments are limited to 750 characters, you have 750 remaining.


Avatar
Hmmm... commented on 17th December, 2011:
Code update:

I noticed my www.hmmm.ip3.co.uk/camera page had stopped displaying photos using the third-party PHP script.

After some poking around I found that Flickr have recently renamed one of their files!
'static.flickr.com' has become 'staticflickr.com'.

A quick edit and I'm back up and running!

This is one of the perils of using third-party resources...

Freeola & GetDotted are rated

Check out some of our customer testimonials below:

Continue this excellent work...
Brilliant! As usual the careful and intuitive production that Freeola puts into everything it sets out to do, I am delighted.

View More Testimonials

Impressive control panel
I have to say that I'm impressed with the features available having logged on... Loads of info - excellent.
Phil

View More Testimonials

Need some help? Give us a call on 01376 55 60 60

Go to Support Centre
Tell us what you think!

Live Chat is offline

Live Chat is available:
9am to 6:30pm Monday to Friday (excluding bank holidays).

01376 55 60 60

Send us a ticket.

It appears you are using an old browser, as such, some parts of the Freeola and Getdotted site will not work as intended. Using the latest version of your browser, or another browser such as Google Chrome, Mozilla Firefox, or Opera will provide a better, safer browsing experience for you.