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.” The code below will not work if you have not put your photos into at least one set.
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: (it’s possible the folder might be called phpFlickr-1.3 if you are using the latest version.
<?php
require_once("phpFlickr/phpFlickr.php");
$f = new phpFlickr("b16911dd0ec59f16ed66e80711edbdaf"); // API
$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['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; ?>
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!
EDIT (DESCRIPTION):
A lot of people have been asking me how to display the description of the Flickr photo instead of using the title within the lightbox display. Here is the change of code you will need in order to do this (very similar to the code in the tutorial, with 2 changes):
<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):
$d = $f->photos_getInfo($photo['id']); ?>
<div class="photos">
<a rel="lightbox[]"
href="<?= $f->buildPhotoURL($photo, 'medium') ?>"
title="<?= $d['photo']['description'] ?>">
<img src="<?= $f->buildPhotoURL($photo, 'square') ?>"
alt="<?= $photo['title'] ?>" title="<?= $photo['title'] ?>" />
</a>
</div>
<?php endforeach; ?>
</div>
<?php endforeach; ?>
</div>
The difference is the addition of the line $d = $f->photos_getInfo($photo['id']); as well as changing $photo['title'] with $d['photo']['description'] inside the ‘a’ lightbox tag. Unfortunately, this method isn’t very efficient as it calls the description inside the loop, which means it has to check the description for each photo. As far as I know there isn’t a more efficient way of grabbing all the descriptions for the photo set yet. I will keep my eyes peeled for it though.
EDIT (available sizes):
I use the size ‘medium’ in the above tutorial quite a bit. There have been a lot of questions about how to change this to its original size or to a larger size. There are a variety of sizes that are supported which include:
‘square’, ‘thumbnail’, ‘small’, ‘medium’, ‘medium_640′, and ‘large’. If you would like to display another size with lightbox, simply change where I have ‘medium’ to the option you’d like.
About 
Starbucks addict. Business owner. Marathon Trainee. Challenging the status quo while helping others live the best life possible.
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!
Hiya,
Thanks for the code. Is there a way to inport particular ‘photo sets’, so different sets can be used on different pages of my site?
Regards,
Luke
Hey man, another newbie doubt!
I’m making a lot of comments so, fell free to erase the others hehe!
So, can’t I put image sizes manually? like square but with 200×200?
Or it’s only possible to use the sizes on phpFlickr “large, medium, square and etc”?
The problem is that if I use retangular and square images they look weird on page when using “small” sizes, so I wanted to use all square but bigger, is this possible?!
Thanks very much!
Hi folks. I’ve tweaked this example (many thanks for doing the original legwork!) so that it initially displays a list of all current sets – then you can click on a set and it will show all the thumbnails for that set only. If you want to use the source, send me an email.
For reasons unknown i’m receiving a blank page once i attempt to post a comment,do you recognize how come its heading?i’m implementing oprea web-browser
Hey Chris,
I’d love to take a look at your code and use it, if I may. I couldn’t get your email, so I decided to comment here.
My email is qssdean@gmail.com.
Hi Adam,
I’ve tried, but can’t seem to get it to display pictures from a specific set. I get the error: Warning: Invalid argument supplied for foreach() in.
Was wondering if you could give me the code onwards? Sorry, I’m a real noob at php.
@Adam: Ahhh ok I found the problem. Thanks very much for the code! Love how the way it works.
I am trying to use the phpflickr whilst using shadowbox rather than the light box on here as I prefer its simpler design.
However I am trying to show one individual set using the code you gave provided, no matter where I put it within my code it doesn’t seem to work, unless I’m getting it wrong some how? I put it in the gallery div, and tried putting it in the header, but can’t work it out??
Hiya,
Some people are complaining they can’t see the galleries properly in Firefox & IE – I can see them fine in both.
Also, will this be updated to use phpFlickr3.0?
Thanks,
Clare.
OK, I managed to get Lightbox working on it’s own, but really struggling to integrate it with Flickr!
The Lightbox function is working with the above code, although all images are broken and when I click on the single broken image a Lightbox pops up with a spinning wheel of death. It just seems as if I am unable to connect to our Flickr account.
Any ideas? Thanks!
Hey,
The code for showing only one set isn’t working here. No errors, but it shows nothing. Must i add something (i have added the correct ID from my set)?
The other code (for all sets) works fine.
How can you make the images in the sets display horizontally instead of vertically?
@Tim 15. Dec, 2010 at 5:35 pm
The array is still multi-dimensional so line 2 should read:
That’ll do the trick. Hope this helps.
Dan
WHERE IS THE DONATE BUTTON???
If ever a tutorial warranted a donate button it was this one, my only minor complaint is this line: $f = new phpFlickr(“b16911dd0ec59f16ed66e80711edbdaf”);
which I worked out was the API Key but its not marked up as that.
Put a donate button on, email me and I will sort you out, great work spent over 2 hours looking for a solution and this one is perfect!!
Plus I have a very simple very clever code revision, change the line:
<a rel="lightbox"
to this:
<a rel="lightbox[]”
and this puts the different sets into groups which means you can go next and previous through the photo’s belonging to each set.
@Chris Diplock
Thanks for the kind words. I have added a donate button per your suggestion – I guess it can’t hurt.
I’ve also made a few changes you mentioned so people can get the most out of the code.
Thanks.
I get this error ?
Warning: require_once(phpFlickr/phpFlickr.php) [function.require-once]: failed to open stream: No such file or directory in /home/ison/web/arti-test/gallery.php on line 17
Fatal error: require_once() [function.require]: Failed opening required ‘phpFlickr/phpFlickr.php’ (include_path=’.:/usr/share/php:/usr/share/pear’) in /home/ison/web/arti-test/gallery.php on line 17
Cheers
Andrew
Andrew – it sounds like the file is missing or in the wrong spot: “failed to open stream: No such file or directory”
require_once(“phpFlickr/phpFlickr.php”); <– that line of code is failing meaning it can’t find phpFlickr/phpFlickr.php. Make sure you have phpFlickr in the proper folder and note the cases as well. Also, it’s possible you might need to define the full path to the files, such as:
/home/ison/web/arti-test/phpFlickr/phpFlickr.php (assuming that is where it is)
Hope that helps.
Adam.
Hey Adam, love the tutorial – got it working quite fine.
I’m testing it at the moment here: http://moreinmind.com/eva/portfolio.php – apologies ahead of time if you’re on a resolution smaller than 1680x wide – I haven’t done the second CSS for smaller resolutions yet.
My question is this: Is there any way to change the size of the images when they pop up? I can’t seem to figure that out.
Cheers!
Thanks, Kevan. Glad you enjoyed the tutorial.
Your site is looking great – it does cut off on my macbook though.
Try changing the line buildPhotoURL($photo, ‘medium’) from ‘medium’ to ‘large’ or ‘original’. Make sure you have these sizes available in your flickr album though.
Let me know if that did the trick.
Cheers.
Adam.
Brilliant! That worked perfectly. I had to go with ‘large’ – using ‘original’ created a “photo can not be found” error from Flickr. It didn’t even occur to me to go over that code – I just assumed it was a problem with the .JS file.
Thank you sir! Now all I have to do is size the photos properly and whip up a second CSS so there’s no cut off on smaller resolutions.
Cheers!
Great to hear that worked!
thanks adam! awesome and simple solution which was exactly what i was looking for. i also had to use the fix for the “EDIT” portion to use “foreach ($photos['photoset']['photo'] as $photo):” instead of “foreach ($photos]['photo'] as $photo):”.
one other thing i used was a slight change of your css to style the photos slightly:
.photos {
position: relative;
float: left;
display: block;
padding: 2px;
margin: 8px;
background: #fff;
border-right: 2px solid #999;
border-bottom: 2px solid #999;
}
thanks again!
Thanks, Mark. I added the fix into the EDIT section as well. Glad you found some value in it!
First off, I love the writeup for this tutorial. Good stuff and thanks so much.
Two quick questions: 1) Is there a trick for displaying the photo description rather than the title? 2) Your demo shows the close button, but mine are not showing up … any ideas?
Thanks!
OK, question one still stands, but I figured out the answer to #2. You have to define the whole path to the closelabel.gif in the lightbox.js file.
Exactly what I was looking for! However, I’m getting this error:
Warning: Invalid argument supplied for foreach() …
I’m getting the error when I try to use all sets or a single set. Thx for any help,
@Brad without actually diving in to test, you can try this. For the occurrences of:
$photo['title']
in the alt and title attributes, try changing them to:
Try changing the above line to:
$photo['description']
Unfortunately, I’m not sure that photosets_getPhotos() returns the description as I used it above, so if that doesn’t work let me know and I will do it using photo_getinfo();
@christy
I need a little bit more information than this. I use foreach() a couple times in the code, do you have a line number that it’s failing on? If you read through all the comments you might be able to find the answer to this.
It’s line 58, which is:
The full error is:
Warning: Invalid argument supplied for foreach() in /home/content/c/3/i/c3idesign/html/kmi/tesflkr/test2.php on line 58
I’ve read thru a few times and tried using both all sets and a single set.
Can you paste me your lines, 57, 58, and 59?
These lines (57, 58, 59) are from the full gallery:
I get the same error when I try to display one set only, lines 57, 58, 59 are these:
photosets_getPhotos(’72157626498379008′); ?>
I have a flickr account tied to my yahoo account. Could that have anything to do with it?
Trying again as the php code didn’t paste…
/*
*/
/*
photosets_getPhotos(’72157626498379008′); ?>
*/
photosets_getPhotos('72157626498379008'); ?>Trying once more with brackets removed:
div id=”gallery”
?php foreach ($ph_sets['photoset'] as $ph_set): ?
div class=”photosets”
Sorry, looks like the code plugin doesn’t work properly with comments!
yes, that’s what I have. I had to remove the brackets for it to display for you. I don’t want to take up your time, I was just hoping to be able to get this to work.
If you’d like to send me a message via my contact form I will take a closer look at your code.
Adam, my error (in user id). Thanks for the help, and great utility.
@Brad I have put up a solution for displaying the description of a photo using the getInfo() function. It is a little inefficient, but I hope it helps.
Any idea what is causing this error?
Warning: Invalid argument supplied for foreach() in /home/xxxxx/public_html/my_site/Flickr/index.php on line 28
Thank you
Peter
Hey Peter, if you read above christy had this same issue. It seems there was a problem with her user ID.
If you want to send me a message via my contact form I’d be happy to take a look, please include lines 27, 28, and 29 from your code as well.
Very nice! Easy to implement too. I will use this for sure.
Hi, Thank for the great tutorial. I easily implemented the code to show only one set. What I’m trying to accomplish now is to show the list of sets with only the primary photo of each set (instead of every picture in the set), is that possible?
Also, is it possible to select only certain sets, for example those with the word “nature” in the name?
Thank you in advance for your answer.
Hi, this client code bring me well the title of the photo sets, it’s ok, but only show me red Xs, where no build the URL, please help me to resolve this, thanks .)
fantastic tutorial thank you!!
on the site I am building using this, every time I try and specify a set it causes errors, if I just use the full code for all photos it works fine.
Takes a very long time to load the gallery page though when clicked from another page on the site, is there any way around this? Or at least a way of displaying a loading images message?
thanks again!!
jon
Your tutorial is great, however the prototype.js file is conflicting with another js file i am already using slideshow.js would you have time to take a look to see if you know why? I am new to js so any help would be appreciated.
This is how the site should look without the gallery page: http://www.sfagan.co.uk/
thanks,
Michelle
Great tutorial! Works wonderfully.
Two questions:
1. How do you limit the total number of photos retrieved from a given set? In other words, how do you only display 10 pictures from a set of 45?
2. After answering #1 above, is there any way to make the 10 photos retrieved random, so that 10 different photos are retrieved each time the page reloads?
I can use CSS to limit the size of the container DIV so that only a set number of pictures are visible, but I am using the EDIT (DESCRIPTION): method for the hyperlink titles and a photoset with a lot of pictures takes forever to load. So please give me the PHP method, if possible, for limiting the number of photos.
Thanks!
Thanks for this, it’s very useful code…I’m loving it. I have a question/challenge…
How do I display my photos in albums instead of thumbnails? i.e. display only album covers, then when clicked on, open lightbox and display the rest of the images in that particular album.
Best Adam,
Thanks for the create script, it works very well for us.
Is it possible to display only the first 3 sets?
Is it possible to display the sets behind each other, not in an line below?
Thanks in advanced
Sorry Adam, I did not want to bother you……….but I am having same problem as with peter,
Invalid argument supplied for foreach() in C:\wamp\www\website testing flickr\phpFlickr\example.php on line 21
since I was getting an error, I tried to use the API in the example code supplied by you. I have check the API key…………
I am wondering what solved the problem of Peter and Christy.
Thanks for sharing your knowledge………….Now I am waiting for it to work.
Cheers,
sachin.
Sorry Adam I used my username instead of user id…………..which you have mentioned needs to be in the format…….xxxxxxxx@NXX.
Here is a site I found to get this…………could not find where I could get it on flickr
http://idgettr.com/
Need to only replace the “username” and click on the button “find”
Thanks once again for posting an excellent tutorial.
Thanks, Adam for the awesome tutorial! It was VERY simple to get working and online! Once getting it setup, I realized I have a TON of sets with even more TONS of photos in each set!
Do you think there’s a way to create a drop down field with the titles of the sets, and then when the Set title is selected from the drop down, it only shows that set’s photos?
Thanks!
Hi Adam – this is great but I also have a problem with the single set version ie9 says:
Warning: Invalid argument supplied for foreach() in /home/aclearw1/public_html/absolute-websites.co.uk/test2.php on line 33
line 33 is:
I’ve got the other ‘multiple set’ code working perfectly but I would prefer to use the single set version if possible.
Thanks in advance
Jan
Hi Adam. Excellent job on the tutorial, the code works great!
I would like it to only display a certain number of images per page, so that I can then add a ‘next’ link to go to the next page. I noticed that Flickr API has a rule that you are only supposed to display 30 photos per page. What I am thinking is something kind of like this person does here (http://net.tutsplus.com/tutorials/php/how-to-create-a-photo-gallery-using-the-flickr-api/), but I don’t really know php that well. Let me know if you have any thoughts and thanks again!
Hi Adam,
Thank you for this tutorial, I needed exactly this and it’s taken me a while to find you. (this tutorial) Great stuff. Quick question:
I’d like to display only one photo set, but display the description of the photos rather than the title. I tried combining the two code bits (single set + description instead of title), but it didn’t work. Can you help? Thank you.
Hey Adam,
Great tutorial… Many thanks! I’ve been looking for a solution like this for a while now. The only issue I’m having is that when I display a single set, the set title isn’t displayed. Any help would be appreciated.
Thanks,
Sam
@Sam Great point. I just noticed I left out retrieving the title to the single set display:
Simply add these two lines above the existing code:
< ?php $setinfo = $f->photosets_getInfo(’72157627541782067′); ?>
< ?php print $setinfo['title']; ?>
You can wrap the second line around h2 tags or whatever you use for a title, they just wouldn’t let me display them properly here.
Sorry for the delay getting back to everyone:
@Jan If you could email me your line I’ll be able to help – it looks like the comment box didn’t allow the line.
@JCM Yes, that looks like a great gallery. It should be able to guide you through doing it over multiple pages. When I get some extra time I’ll take a closer look at it.
@Daniel you should be able to combine the two pieces. Add in the:
$d = $f->photos_getInfo($photo['id']); ?>
And then use the
title=”< ?= $d['photo']['description'] ?>“> in place of the title one.
Thank you very much Adam. -I got it to work now.
If you don’t have time to tackle the following – don’t worry about it at all!
There might be others, who have wondered like me, whether there’s a line of code that will automatically adjust the size of the Lightbox in case the loaded flickr image is bigger than the browser window. I have seen WordPress Lightboxes do that – not sure if this can be implemented in the Lighbox used here.
Is it normal that after implementing this gallery on a page, that there is a page delay of around 10 seconds when navigating to it? Is this the php calling all the images from flickr? Is there a way to get the page to load faster, but have the gallery itself delayed with a spinner or a loading image?
Thanks
I’m trying to create a link inside the photo description so that they can download the original photo by clicking on it instead of going through flickrs site. It works properly on the flickr website but when not on the gallery. The link displays with the sets and makes the pop up not work. Any ideas?
Nevermind I figured it out. This would be the link <a href="buildPhotoURL($photo, ‘download’) ?>”>Download and add in “download” => “_b_d” to the buildPhotoURL function in phpflickr.php
I can’t seem to get it so that the original photo is displayed. Even using original it’s giving the wrong URL. Is there a fix for this?
@Tabatha – I’m not sure if ‘original’ is supported anymore to be honest.
@Rich – 10 seconds seems a bit high. Some delay is expected as it needs to pull the images from flickr, but it should load the page first. That is, you should see the images appear as they load, while the rest of the page has loaded.
Let me know if you are still having this issue and I’d be happy to take a peek.
Thank’s guy.
Tabatha, I had the same issue. Did the following instead of building the URL…
$sizes = $f->photos_getSizes($photo['id']);
foreach($sizes as $size) {
if($size['label'] == “Original”) {
$url = $size['source'];
$download_url = str_replace(“.jpg”, “_d.jpg”, $url);
}
this is assuming all of your originals are .jpg’s
I tested it out and it works without issue, at least for me so far.
@Haider – thanks so much for the info. I’ll be sure to add it in when I (finally) get around to updating this post.
If you want the description to be returned with the other photo data, you should include it in the ‘extras’ argument as follows:
$photos = $f->photosets_getPhotos($photoset_id, ‘description’);
Then you can use it like:
<a href="buildPhotoURL($photo, ‘medium’) ?>” title=”
hi Adam,
this post is cool.. too intelligent. No words…
Adam,
Awesome tutorial. got the phpflickr module to work right way, but i am have some trouble with the light box.
I dont get any error messages, but when i click on a photograph, it doesn’t open up in a lightbox, just goes to a different page.
Any suggestions?
Hey Murtaza – I’m not sure without seeing the code. As far as I know everything above is still working. Perhaps if you copy and pasted some of the code that the formatting didn’t follow correctly (can happen with quotes and the like).
Be sure you’re including the library as well. Sorry I can’t be much more help.
I am also trying this code and having the same error of foreach statement
“Warning: Invalid argument supplied for foreach() in C:\wamp\www\Verbena_New\gallery.php on line 52″
in this particular code foreach ($ph_sets['photoset'] as $ph_set):
please help me out
At last I am successful to add this script to my site. Thanks Adam
but there is few more things I wanted to do. I want to add the description of each image and the comments by the users. Please help me out
How do I use this code to access the group pool? Thanks!
@Alturiak
You’ll need to use the function specific for retrieving group pool photos which is pools_getPhotos(), similar to how we use the above function to retrieve photos from user sets.
For more info you can check out the API for group pools here:
http://www.flickr.com/services/api/flickr.groups.pools.getPhotos.html
@Anik – for the comments, you’ll need to use comments_getList() to get a list of comments from each photo. Unfortunately the comments do not get returned with photosets_getPhotos() so you’ll need to use the variable $photo from the code above to grab and return comments_getList($photo) and cycle through the comments to display however many you want.
@Adam
Can it show me as doing? Because, I am not managing to do to work. I am not a programmer, I only followed what you described above. If it can help me, I will be thankful!
HI Adam, Great tutorial! I have the gallery working correctly live online, but have not been able to get the images to display correctly in WAMP Server’s localhost. Instead, small symbold appear where the photos should be. Do you have any thoughts on what may be preventing this from displaying correctly in WAMP? Thanks again for the tutorial and any insight you might have!
I was interested in the questions asked above:
Hi, Thank for the great tutorial. I easily implemented the code to show only one set. What I’m trying to accomplish now is to show the list of sets with only the primary photo of each set (instead of every picture in the set), is that possible?
but I don’t see an answer to it?
If your script is failing off the bat, as evidenced by the
Warning: Invalid argument supplied for foreach()
message, likely you are trying to use your Flickr account name instead of your Flickr id.
you could fish around for it on Flickr, or just use this handy utility: http://idgettr.com/
Adam, thanks for the slick script!
I am able to pull the photo set names but all of the images show up as bad links. The page is at: http://hobokenrockets.com/rockets/photos.php
Seems like the PHP code is not parsing into the actual links ???
It just hangs and never finishes loading the page.
Thanks for any help!
Great post – thank you. I had similar problems to Dee, but once I had found the correct id and moved from my localhost to my hosting provider it worked.
The id is quite confusing since Flickr merged with Yahoo what you need is this xxxxxxxx@Nxx which can be found in the URL on your account. I found mine by clicking on a photo within your account and you will see a long URL which will have this id within it.
Hope this helps.
@Haider & @Adam I replaced <a href="buildPhotoURL($photo, ‘original’) ?>”>Download with your code like this <a href="photos_getSizes($photo['id']);
foreach($sizes as $size) {
if($size['label'] == ‘Original’) {
$url = $size['source'];
$download_url = str_replace(‘.jpg’, ‘_d.jpg’, $url);
} ?>”>Download
And I am now getting an error (it works fine before I change it except it doesn’t pull original images) Parse error: syntax error, unexpected T_ENDFOREACH
Great tutorial and it has helped me so much …. thanks a lot
Hi Adam.
I’m not a PHP expert, I just play…
I’d like to insert this as a shortcode in WordPress.
Like just write this in your posts and set opens: [flickr set="xxxxxxx"]
Anyway my formula doesn’t work. It throws an error like
“Fatal error: Call to a member function photosets_getPhotos() on a non-object in… MYFILENAME”
function my_flickr( $atts ) {
extract( shortcode_atts( array(
'set' => ''), $atts ) );
$photos = $f->photosets_getPhotos($set);
foreach ($photos['photoset']['photo'] as $photo):
echo "buildPhotoURL($photo, 'large') . "alt=" . $photo['title'] . " title=" . $photo['title'] ." />";
endforeach;
}
add_shortcode( 'flickr', 'my_flickr' );
I guest something is wrong with my “matrioska” functions ^_^
Can you help me?
thank you!!
Moreover… what if I’d like to display a private set? entering the secret seems not to help.
Adam, I’ve spend hours trying to figure this out.
The foreach statement is causing it to load/display all the thumbnails in my set on the main page. I just want it to show a thumbnail for the first image in the set or an icon that a user clicks then it shows them all one-by-one as you toggle left/right in lightbox mode. Help!
Thank you!
Excellent tutorial! I’m so pleased I found this! One question though please. In the example site designbyroeland.com, the thumbnails come back with a nice white space between them. I would like this on my page but am getting all the thumbnails next to each other. How do I achieve this? Have looked within the .css but don’t want to break it!
best regards
John
No probs re above post now Adam thanks. ‘Stole’ mark’s code from a post above and modified it (commented out the borders
ie
.photos {
position: relative;
float: left;
display: block;
padding: 2px;
margin: 8px;
background: #fff;
/*border-right: 2px solid #999;
border-bottom: 2px solid #999;*/
}
Hey John – great to hear you got it working and that the other comments were able to help you out. Sorry I was late to reply.
@Tabatha sorry to hear you’re having issues – parse error sounds like it could be a misplaced semi-colon, etc. Can you paste the line of code (and the one before it) that is throwing this error?
@Alex if you want to ping me an email from my contact form or get in touch on twitter I’ll be able to better help you with the WordPress shortcode. Cheers.
@Bhutan glad you liked it.
@Tabatha,
Two things… one, as Adam said, you have a syntax error somewhere. And two, you need to include a line which prints the final download url: “echo $download_url;”
Hey can someone help me out?
I’m a beginner with all of this and looking for something easy to implement into a website and this seems to be everything I’m looking for just I am stuck on the first step.
Do I copy and paste these things into the php.ini file or???????
Hey Michelle,
Nothing needs to go into the php.ini file. Read through the tutorial again – it explains the steps you need to take. The first step is setting up and adding photos to your flickr account.
Let me know if you have any other specific questions.
Adam
Hi Adam,
I meant the third step to include everything into the PHP file.
Which PHP file would that be?
Hey Michelle,
It’s the PHP file that you want to setup the gallery with. Perhaps a /gallery.php for example.
Cheers
Thanks, that’s exactly what I needed.
Adam, I am very green and amateur when it comes to building website as I am still learning. I am building a website for a non-profit organization and they want to have a gallery on their page that they can upload pictures from each event. If I do this on their page and give them them login credentials to Flickr, each time they upload pictures, will it automatically appear on the page or does updating of the embedded code have to happen? I am trying to build it so members from the Board can go out and upload their own pictures without any change in the code of the page. Any thoughts?
Thanks in favor of sharing such a good thought, paragraph is pleasant, thats why i have read it fully
any one how i can call a collection instead of a set using this tutorial… by the way works great.
any one know??????