Many people struggle with installing and setting up third-party gallery applications and although there are a couple popular image galleries that most web-hosts offer as an easy-to-install application, they can still be frustrating and pose many security issues for the inexperienced.
With the growing popularity of using Flickr to manage photos, more and more people are looking for an easy way to display these photos on their website.
After some playing around, I’ve settled with the phpFlickr and Lightbox combination to nicely display photo galleries on a website. PhpFlickr is a class written by Dan Coulter to act as a wrapper to Flickr’s API, and lightbox is a very simple and elegant way to display photos on a page. This tutorial will teach you how to quickly setup a photo gallery with phpflickr and lightbox on your own website.
So what do you need?
1. A flickr account (a free one with 100mb monthly upload is fine for most). You will also need to know your user ID (usually in the format xxxxxxxx@Nxx)
2. Latest version of phpflickr: can be downloaded here
3. Lightbox 2 java script: downloaded here
4. Obviously, your photos.
What to do:
1. Upload the photos you want to display to your Flickr account. Organize the photos into Sets to best manage the separation of “galleries.”
2. Install phpFlickr and Lightbox by easily extracting them to the directory of your choice (ie. /photos/ on your website). Both phpFlickr and Lightbox are ready to go out-of-the-box so you won’t need to play around with them too much if you don’t want to.
3. Include the necessary content in your php file.
For lightbox, the following will go in the header section of your php file:
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript"
src="js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="js/lightbox.js"></script>
and
<link rel="stylesheet" href="css/lightbox.css"
type="text/css" media="screen" />
For phpFlickr, add the following code in the header section of your php file:
<?php
require_once("phpFlickr/phpFlickr.php");
$f = new phpFlickr("b16911dd0ec59f16ed66e80711edbdaf");
$user = "xxxxxxxx@Nxx";
$ph_sets = $f->photosets_getList($user);
?>
Where the user value can be found in your flickr account.
Now we are ready to use phpFlickr to import and Lightbox to display our pictures from our Flickr sets. Here’s a simple bit of code I use that imports and displays the photos:
<div id="gallery">
<?php foreach ($ph_sets['photoset'] as $ph_set): ?>
<div class="photosets">
<p><h2><?php print $ph_set['title']; ?></h2></p>
<?php $photoset_id = $ph_set['id'];
$photos = $f->photosets_getPhotos($photoset_id);
foreach ($photos['photoset']['photo'] as $photo): ?>
<div class="photos">
<a rel="lightbox"
href="<?= $f->buildPhotoURL($photo, 'medium') ?>"
title="<?= $photo['title'] ?>">
<img src="<?= $f->buildPhotoURL($photo, 'square') ?>"
alt="<?= $photo['title'] ?>" title="<?= $photo['title'] ?>" />
</a>
</div>
<?php endforeach; ?>
</div>
<?php endforeach; ?>
</div>
The CSS I use for this is:
#gallery {
position: relative;
float: left;
width: 600px;
padding: 0px 15px 10px 15px;
}
.photos {
position: relative;
float: left;
display: block;
padding-bottom: 10px;
}
.photosets {
clear: both;
padding-top: 1px;
}
.photosets h2 {
color: #000;
}
The full documentation on both lightbox and phpFlickr is available in their downloaded packages. They are both quite powerful. The example given here is just a simple way to grab all the Sets in your Flickr account and display them in a gallery format.
I recently added this to the site designbyroeland.com. You can check out the example of how it will look here. Simple. Elegant.
EDIT:
If you’re looking to only display one set, this can be done with the following:
<?php $photos = $f->photosets_getPhotos('xxxxxxxxxxxxxxxxx'); ?>
<?php foreach ($photos['photo'] as $photo): ?>
<div class="photos">
<a rel="lightbox" href="<?= $f->
buildPhotoURL($photo, 'medium') ?>"
title="<?= $photo['title'] ?>">
<img src="<?= $f->buildPhotoURL($photo, 'square') ?>"
alt="<?= $photo['title'] ?>" title="<?= $photo['title'] ?>" />
</a>
</div>
<?php endforeach; ?>
Where the xxxx’s are replaced with the set ID that you can find in your flickr URL for that set. Feel free to republish this guide if you wish, but please try to link back if possible. Thanks!
I’m trying to add this, but I keep getting an error on the foreach (I think it’s line “foreach ($photos['photo'] as $photo):” I suspect this is because I can’t find ‘photo’ defined anywhere?
The error I get is:
Warning: Invalid argument supplied for foreach() in /home/xxx/public_html/gallery.php on line 91
Thanks!
Thanks!
What would be the code to import one specific set?
- Johan
@Clare
Sorry for taking so long to reply, I’ve been offline for a while – trying to enjoy the summer
The foreach() defines $photo on the fly there. You would be receiving this error if $photos['photo'] is not an array, as foreach() requires an array. Are you able to paste your code?
—
@johan
I edited my post to include the code for importing one specific set. It can be found at the end of the post.
Hey Adam,
Check your syntax on line 4 of your edit. Seems a rel=”nofollow”> made it in there somehow.
Thanks, JeffreyATW.
I had switched plugins to Code Markup by Bennett McElwee to display code in posts. It’s nice but was still getting used to it.
Not sure how it got in there, but thanks for the heads up – it should be fixed now.
If you’re getting the same error as Clare -
“Warning: Invalid argument supplied for foreach() in …”
try using instead of
foreach ($photos['photo'] as $photo):
this code:
foreach ($photos['photoset']['photo'] as $photo):
that did it for me.
Thanks for the heads up Andrew!
Hi, this is a great tutorial but it seems that I have problem getting it work.
This is the error that I got:
Warning: Invalid argument supplied for foreach()
which is this line: foreach ($ph_sets['photoset'] as $ph_set):
Thanks for the help.
Hi Adam,
First of all, Thanks for the great method of integrating Flickr. Everything works out for me, except for the lightbox. Any thoughts after looking at my source code? Thanks!
Patrick
@Eric : see Clare’s and Andrew’s comments above, this issue was addressed.
@Patrick: all your included files look alright. I will check in more detail later, but it does look alright at first glance. Are you using some sort of CMS? Perhaps it’s an issue with it handling the javascript.
Thanks for the prompt response. I’m not using a CMS. The site is static for now.
Anyone else having problems with the lightbox not working? Everything else works fine.
Hi
I’ve got all of this to work, after using Andrew’s advice above – but would love to know how to add the description as the alt tag rather than just repeating the title.
I have tried replacing ['title'] with ['description'] but just get errors.
foreach ($photos['photoset']['photo'] as $photo):?>
<a rel=”lightbox”
href=”buildPhotoURL($photo, ‘medium’) ?>”
title=”">
<img src=”buildPhotoURL($photo, ’square’) ?>”
alt=”" title=”" />
Cheers
Sorry – the code didnt get digested properly:
foreach ($photos['photoset']['photo'] as $photo):?><a rel="lightbox"
href="buildPhotoURL($photo, 'medium') ?>"
title="">
<img src="buildPhotoURL($photo, 'square') ?>"
alt="" title="" />
Oh bother
code still not getting through the input. Not done this before.
I can’t get this to work. This is the error I’m getting:
Fatal error: Call to a member function photosets_getPhotos() on a non-object in…
Any ideas?
@J Can you provide the page you are trying to implement this on?
I also had a problem with my LightBox not working right, then I realized the files I extracted where not be called correctly
ORIGNIAL—-
EDIT– (in my case)
Also I had to use andrews fix
foreach ($photos['photoset']['photo'] as $photo):
Otherwise everything works great! Thank you adam, if you need t-shirts printed I’ll be sure to hook you up!
Thanks Antonio.
I will add Andrew’s fix into the actual post to avoid confusion.
Believe it or not I’m actually in the market for some T-shirt printing. I’ll ping you an email on your site.
Cheers.
Hey,
Great post. I’m having a bit of trouble with it though…
All the images show on the page as instead of the image.
I’m wondering, do you need to have a Flickr API key for this to work?
Just read about something like this on the phpFlickr documentation.
Cheers,
Andy
Thanks for the great tutorial.
I got everything working perfect, but I would really like to activate the “Next” and “Previous” buttons to click through the images. Is there some code that I can add to make this work?
If you want the next and previous to work per album/set add
rel=”lightbox[]”
If you want the next and previous to work for the whole photo stream add
rel=”lightbox[flickr]“
My code was removed for the set. It should say “print $ph_set['id'];” between an open and close php tag
Is there a way to style the image sizes within the css?
Hi again sorry I figured that one out – dur!
Next question. Is there a way to limit the number displayed on the page? Am I being thick again?
:*)
Hi There,
I am working on a site locally at the moment, I have successfully got the feed from flickr into my site, I am pulling the photosets in. However I only want to show the primary image for each set and the children of the set should only be viewable when the primary image is open in the light box, I currently have this code,
photosets_getPhotos($photoset_id);
foreach ($photos['photoset']['photo'] as $photo): ?>
<a rel="shadowbox['']” href=”buildPhotoURL($photo, ‘medium’) ?>” title=”">
<img src="buildPhotoURL($photo, ‘rectangle’) ?>” alt=”" width=”210″ height=”160″ title=”" />
@Glen : You could build a count variable into your loop that only displays another picture if count <= however many pictures you want to display. You could use this to limit the number of photosets or photos within a photoset.
Thanks Adam. Have you any idea how to display images from a Group pool?
I was also curious as to how to display only the primary photo in a set. Thanks so much for the great article.
Hey man, first thanks for this code! save my day….the only thing than i can’t do is show one set, like others the same error shows to me…
on line
i understand the part of the array, but to fix this?
thanks again and sorry about my english!
ps. the website is my url test the feature
I have hundreds of sets, and thousands of photos on my Flickr account.
I would like my gallery to display only the set names and set thumbnails at first. Then be able to click on the set thumbnail to display that set’s images.
Is that possible? How hard would that be for me to set up?
I’ve seen this app in action before and thought I’d give it a spin on a super-simple website. However, after following all the directions and not tinkering with anything else, it doesn’t do anything for me. I’m not even getting error messages. Any assistance would be greatly appreciate. I’m pretty new to php, so let me know if I’m missing something.
http://www.grabbagcomics.com/lively_productions/photogallery.php
Never mind, found my problem! Thanks!
Can i list my photos in ASC or DESC order?
Thanks again!
Thanks for sharing very good post.
How to add a Flickr-based photo gallery to your website: phpFlickr + Lightbox. | Adam Bate
thanks for post information.
How to add a Flickr-based photo gallery to your website: phpFlickr + Lightbox. | Adam Bate
I was excited to get a program that was easy to install. And then I got totally stuck on the first step. Do I need to know something about PHP to use this? Step 3 said “3. Include the necessary content in your php file.” I saw several files with the word php in them, but I can’t open them. I feel like an idiot after reading the introduction.
I’m getting this error:
Warning: require_once(72157623959485727/phpFlickr.php) [function.require-once]: failed to open stream: No such file or directory in /home/gnomepar/public_html/INDY500GUIDE.COM/tt.php on line 28
Suggestions??
Who do you guys use to print photos?
Sensational article bro. This is just a very nicely structured piece of writing, just the information I was looking pertaining to. Bless you
Great tutorial! I just have one question, how do I have it display only the primary photo for each set?
hi, it’s aigo, thanks for your sharing
Can anyone tell me if it’s possible to make the images to go the “large” view, when clicked?
wow, thankyou so much, it helped me alot n_n
Hi,
I’m having the same problem as what had been brought up at the beginning of the comments where I get:
Warning: Invalid argument supplied for foreach() in /home4/bridalcl/public_html/rubberonroad.com/photos.php on line 76
I followed the instructions from Andrew to replace the foreach() statement but still get the same result. I tried putting the code not into my site template but in just a blank php but got the same thing (just on line 50 instead of 76 because it’s a shorter code.
Any suggestions? Thanks in advance!