Flickr Gallery 0.4

November 20th, 2004

This project is now closed. Please use the much superior FAlbum if you want to integrate Wordpress and Flickr.

Update (1/8/2005) - A new version is available here with some of the features requested in this post’s comments and also some bug fixes.

I’ve been working on a Wordpress plugin that integrates some of Flickr’s great photo sharing services. This plugin allows you to display your Flickr photos and photosets on your site like a photo gallery using Flickr’s API. Some of the salient features include:

  • Flickr photosets as “albums” - complete with descriptions and meta
  • Support for Flickr “notes” feature - just this plugin uses all CSS and Javascript instead of Flash (the plugin’s output looks like this)
  • EXIF data support to display camera settings the photo was snapped with — in addition to the description and meta info from Flickr
  • Valid XHTML output

You can download it in .tar.gz format here or .zip format here.

An example installation can be found here. Read on for installation instructions.

Installation Instructions:

  1. Make sure you have your Flickr photos organized into photosets.
  2. Extract the files somewhere.
  3. Edit flickr-gallery.php with your settings.
    1. Set FLICKR_USER_ROOT constant to your Flickr page (something like http://www.flickr.com/photos/username/ - it’s your Flickr “alias”) so that the plugin can build the comments links for your photos.
    2. Set FLICKR_EMAIL constant to your Flickr account login (the email address you signed up with)
    3. Set FLICKR_PASSWORD constant to your Flickr account password
    4. Set FLICKR_CACHE_PATH constant to the path of your cache directory (something like /var/www/localhost/wp-content/flickr-cache/). This directory should be in your WP-content directory and must be writable by the web server/PHP.
    5. Optional - Set FLICKR_CACHE_EXPIRE to the number of seconds you want the cache to live for. 600 secs (10 mins) is suggested so as to not overload Flickr with API traffic and get your IP address banned.

    Do not change the API key. Also, PLEASE do not steal the API key. This one has been assigned to this plugin and Flickr uses it to track API usage. You can get your own API key here for your own projects or derivatives of this code.

  4. Put flickr-gallery.php in your WP-content/plugins/ directory and activate the plugin via your WP admin console.
  5. Copy your index.php file to gallery.php (or another filename if you want). Edit gallery.php by replacing everything inside
    <div id="content"> ... </div>

    with

    < ?php flickr_show_photos($_GET['album'], $_GET['photo']); ?>

    Make sure you still have <div id=”content”>. Then create links to gallery.php from wherever you want to link to it.

  6. Define the flickr-album, flickr-thumbnail, and flickr-title style
    classes in your style sheet. Modify the classes to fit the look and
    feel of your site. My classes look like this:
    .flickr-album {
    	padding: 0;
    	width: 550px;
    }
    .flickr-thumbnail {
    	padding-right: 20px;
    	background-color: #fff;
    	border: 1px solid #a9a9a9;
    	margin: 6px 6px 6px 6px;
    	padding: 4px;
    	margin-top: 10px;
    }
    .flickr-title {
    	width: 500px;
    	color: #260;
    	padding-top: 6px;
    }
    
  7. If you want to use the Flickr “notes” part of the plugin you must do the following:
    1. Put annimg.js somewhere (I put it in my blog root).
    2. Add
      <script type="text/javascript" src="<?php echo get_settings('siteurl'); ?>/annimg.js">
      </script>

      to your gallery.php head.

    3. Define the a.annotation, a.annotation span, and a.annotation:hover styles in your style sheet. My classes look like this:
      a.annotation {
      	position: absolute;
      	border: 1px solid white;
      	padding: 0;
      	display: none;
      }
      a.annotation span {
      	display: block;
      	width: 100%;
      	height: 100%;
      	/* Setup opaque background in notes box with browser specific opacity
      	 * properties (they aren't valid CSS - sorry).  If having valid CSS is
      	 * so important	to you just get rid of the next 4 lines after these
      	 * comments (you'll sacrifice the opaque background in the notes
      	 * boxes though).
      	*/
      	background: white;
      	opacity: 0.2;
      	-moz-opacity: 0.2;
      	filter: alpha(opacity=20);
      }
      a.annotation:hover {
      	border-color: yellow;
      }
      

System Requirements:
PHP 4.1 or greater - with allow_url_fopen enabled (to make remote API/REST calls and download images)
Wordpress isn’t actually required because this doesn’t use any of WP’s plugin hooks

Of course this code comes with no guarantee. If you need support I’ll be glad to help (within reason) — just shoot me an email. If you want to suggest future features or just tell me that you are using my plugin I’d appreciate that feedback too.

Copyright (c) 2004
Released under the GPL license

63 Responses to “Flickr Gallery 0.4”

  1. Ian Says:

    Installing at the moment….will let you know when I get it working.

  2. gianluca Says:

    Hi ! Great plugin, but not runs :-( i’ve a problem. this is the error message. “Warning: Invalid argument supplied for foreach() in D:\Inetpub\webs\lontanodagliocchicom\WP-content\plugins\flickr-gallery.php on line 64″ and there’s the URL of the page: “http://www.lontanodagliocchi.com/gallery.php” thank you for support!!!

  3. Ray Says:

    People who need support of this plugin -

    Email me at rdarrowREMOVEME@worrad.com (remove the “REMOVEME”) or I’m occasionally on AOL IM as bigray26. If you need realtime support email me and we can setup a time for me to chat with you on IM.

  4. Ian Says:

    Got it working, Ray. Thanks again. Also, you may remind people who are new to flickr that they have to set a username (Flickr calls it an alias) before installing this plugin. Otherwise they’ll have to use that long string of random alphanumeric characters to plug into the file. Just a thought!

  5. Le Cyber Cactus.com Says:

    Flickr plugin for wordpress
    Thanks to Ray for this good plugin for Wordpress. ;)

    This plugin allows you to display your Flickr photos and photosets on your site like a photo gallery using Flickr’s API. Some of the salient features include:
    Flickr photosets as “albums”…

  6. blog.hruska.ch Says:

    Flickr plugin pre WordPress CMS
    Flickr Gallery 0.4 je plugin pre WordPress. Mal by umožòova zobrazovanie fotiek z online galérie Flickr na blogu vo forme foto-galérie. Neskúšané!…

  7. scriptygoddess Says:

    [...] November 21 2004 WordPress Bookmarks to Plugins: Flickr Gallery Flickr Gallery Plugin [via weblogtoolscollection] Posted [...]

  8. Mark J Says:

    I’ve found three bugs in this plugin:
    - if a user has no albums setup, it throws a “foreach” error. Better to tell the user to put their photos into albums
    - Private photos are shown for the world to see (!!!)
    - Notes with double-quotes (”) throw “eval()” errors… I fixed that error with this code:

    case 'note': // Grab note attributes
    $val['value'] = str_replace(’”‘, ‘& quot;’, $val['value']);

    Which will probably get eaten by WP… basically, do str_replace and replace all double quotes in the comment with & quot; element

  9. jim Says:

    noticed one more thing, if you have WP-amazon plugin activated and try to use it, you get this error

    Fatal error: Cannot redeclare makexmltree() (previously declared in /home/httpd/vhosts/jimjacob.com/httpdocs/wp-admin/wp-amazon.php:76) in /home/httpd/vhosts/jimjacob.com/httpdocs/wp-content/plugins/flickr-gallery.php on line 345

    when i turned the flickr plugin off, it worked fine. yet either way, i still get this error on the gallery.php page.

    Fatal error: Call to undefined function: file_get_contents() in /home/httpd/vhosts/jimjacob.com/httpdocs/wp-content/plugins/flickr-gallery.php on line 297

    any ideas?

  10. Ray Says:

    Mark J,

    Thanks for the code fix for notes with quotes in them. I’ll also add a word in the documentation about users needing to have photosets defined in Flickr. I’ll also work on the private image problem. I’ll release an update with all of this soon.

    Ray

  11. Ray Says:

    Jim,

    The first error sounds like WP-amazon and flickr-gallery both declare a makeXMLTree function. You could fix this by renaming the makeXMLTree function and all of its calls in flickr-gallery.php. Just do a search and replace it with whatever you want.

    The second error baffles me a bit. I thought file_get_contents was a built in PHP function. What version of PHP do you run and do you have output of your phpinfo?

    Ray

  12. Glacial Says:

    Don’t work in wordpres 1.3 alpha 4 … :(

  13. Glacial Says:

    Update: Works in wp1.3alpha4 but don’t work with themes.

  14. Michael Says:

    I’ll be playing with this tonight… Meanwhile, this photoset is noted as having 3 photos in the list, but something’s wrong….

  15. Ray Says:

    Michael,

    That’s because that version is kind of my dev environment and I’m working on hiding private photos (something Mark J pointed out). That photoset really does have 3 photos in it, but one of them is marked private. It really should only say it has 2 and I’m still working on it.

    Ray

  16. Michael Says:

    It seems to work fine here. I’m on 1.3a4 with a theme :)

    One thing though, on the example site, the photos are small square thumbnails, but on my own site they’re fetched in their correct aspect ration, how come?

  17. Ray Says:

    Michael,

    You can change the thumbnail size displayed on the album home by changing the line that looks like $thumbnail = FLICKR_PHOTO_ROOT."{$photo_id}_{$photo_details['secret']}_m.jpg”; // Build URL to thumbnail (line 115?).
    The “m” right before the .jpg is what specifies the size. Choose from the following options:
    “s” -> square thumbnail (75px x 75px)
    “t” -> aspect ratio correct thumbnail (100px x 75px)
    “m” -> aspect ratio correct medium (240px x 180px)

    I’m adding a feature to choose from the different sizes just by changing a setting for the next release.

    Ray

  18. » Blog Archive » Flickr Gallery Says:

    [...] Bit Bucket

    Flickr Gallery

    I came across a Flickr-powered Wordpress gallery plug-in today. Must give it a try some time… [...]

  19. Mark J Says:

    Another thing that I changed on my install: where it gives links to Flickr for all your tags, I made them links to MY Flickr images with those tags (just inserted username before /tags/). I thought that was a little more useful.

  20. Blogging Pro - Blog News, Tools and Hacks » WordPress Plugin: Flickr Gallery 0.4 Says:

    [...] 4 slvShowNewIndicator(1101309046); Filed under: WordPress Plugins|Google it! This plugin allows you to display your Flickr photos and photosets on your site l [...]

  21. Stewart Says:

    Very cool!

    How about setting FLICKR_CACHE_EXPIRE to 86400 (3 days) and having a “republish” button to really avoid overloading Flickr’s servers? ;)

    (And things like the EXIF data at leats should cache permanently, since it can’t change - and you could even do some of the fancy things which we’re not doing yet, like saying the f-stop was ‘2.8′ rather than ‘28/10′.)

    Right now, it violates our TOS since there is no link to the photo page on Flickr, so that is no good. We’ll discuss this internally, but you should consider making that the default (rather than linking to the original) and perhaps give Flickr Gallery users the option of linking to the original directly (i.e., by clicking on the medium size inside of Gallery) and putting a footer link to ’see this photo on Flickr’ or something like that.

    Again though - nice work :)

  22. Ray Says:

    Stewart,

    Thanks for the comments. The point about the EXIF data is a good point. That data isn’t going to change so I’ll make the caching permanent for that. Also, I’ll consider a good way to have the plugin hit Flickr’s servers less frequently but I’m not sure a “republish” button is the best way (I don’t think we want to expose the button to everyone, and there isn’t any user authentication layer in the plugin and I don’t think there should be).

    As for the link to the photo’s page on Flickr, it was there (the comments link) so I don’t think it is breaking the TOS. It might not have been clear enough what it was linking to so I’ve renamed it to make it more obvious that it links to the photo’s page on Flickr.

    Ray

  23. Stewart Says:

    I’ve never actually used WordPress, so I don’t know exactly how it works - I’m assuming that there’s already an authenticated area for the author, and a ‘force refresh’ could be added there.

    Here’s why polling ever 10 minutes doesn’t work: Flickr has a lot of users and I think WordPress does too. Let’s say 1000 people start using this - not a whole lot, really. Let’s say they have only 10 photosets on average, each of which contains 10 photos. So, every 10 minutes, they’d be making 110+ calls to the API. That’s 110,000 in total, every 10 minutes, or 183.3 per second (and it could be a lot more, depending on your design).

    An API call can be doing several things in our back end, including several DB queries. That means that your app, one of many hundreds developed on the API, would be generating a few hundred DB queries every second. Except (I’m guessing) only 1 time out of 250-2,500 (or more) would anything have actual changed. I hope you can see why we wouldn’t allow that for long :)

  24. Ian Says:

    Ray, I’m getting a werid error now when I try to visit my gallery.php…All it says is, “An error occurred. Here is the response from Flickr:

    And here is the response after passing through the parser:

    array (
    )”

    Any ideas? I didn’t change anything up until noticing the error message

  25. officialsm Says:

    i try to install it, but doesn,t work.
    I see the tag
    < ?php flickr_show_photos($_GET['album'], $_GET['photo']); ?>

    in main page?
    Anyone could help me?

    The installation is here:

    http://www.officialsm.net/test/wordpress/wordpress/gallery.php

    Thanks in advance

  26. Ray Says:

    officialsm,

    In your gallery.php file make sure you have
    <?php flickr_show_photos($_GET['album'], $_GET['photo']); ?>
    instead of
    < ?php flickr_show_photos($_GET['album'], $_GET['photo']); ?>

    Note the difference in spaces: the first one doesn’t have any spaces between < and ?php. Also, it looks like you might be using version 0.4. Consider upgrading to 0.5.

    Ray

  27. MasoBlog » WPçš„Flickr外掛 Says:

    [...] 28/2004

    WP的Flickr外掛
    類別 本站網誌 — maso @ 12:03 am

    WordPress Flickr Gallery Plugin é€™å€‹å¤–æŽ›å¯ä»¥è®“ä½ ä»¥åŽŸæœ [...]

  28. Si. Says:

    Hi,

    Great plug in.. I might even pay for FLickR because of it.. 1 problem though. I’ve haging problems getting the layout correct. Messing with the CSS entries I can get it justified right OK, but if I move it all left (which is where I need it) It goes outside of the frame of the site and I can’t fix it.

    Can you help?

    http://www.rambozotheclown.co.uk/wordpress/gallery.php

    Thanks.

  29. Ah Knight's Blog » Flickr On Wordpress Says:

    [...] addition to the description and meta info from Flickr * Valid XHTML output check the detail of this plugin

    Related Post -

    Switching to WordPressWor [...]

  30. thomas wanhoff Says:

    I got this error in the frontend:
    “An error occurred. Here is the response from Flickr:

    And here is the response after passing through the parser:

    array (
    )”

    any idea?
    http://www.sammelstelle.net/gallery.php

  31. Ray Says:

    Thomas,

    You should probably upgrade to version 0.6. The error you see could be caused by one of two things. First, the flickr-cache dir may not be writable by the script and it may not be able to cache the files it needs to (make sure you see that it is creating files in there). Second, your photos have to be organized into photosets in Flickr for this script to work. Darius is working on a mod of this script to show your entire photostream so you don’t have to organize into photosets, but I don’t think he’s ready to release it quite yet.

    Ray

  32. Si Says:

    Great plugin, I’ve finally got it working how I want it.. However, Flickr’s lack of subsets really limits the usefullness of it as a gallery.. do you have any plans to use the Flickr Tags? this would enable the creation of “albums” using the tag names…. maybe even sub albums??

    Si

  33. Ray Says:

    Si,

    Sub-albums by tags is a neat idea. It certainly opens up a lot of flexibility for how you could organize your albums. The only problem with the idea is that Flickr doesn’t allow you to store those groupings by tags, so we would have to find way to store how you wanted to organize by tags on the local server. That’s easy enough to do, but to make it easy to use and change could be a challenge. Let me think about it a bit. In the meantime feel free to try your hand at hacking the plugin to work like you want it to.

    Ray

  34. Si Says:

    :)

    I’m no PHP expery by a long shot.. but I might investigate.. Having a lot of pictures in a “flat” structure will eventually just end up in pages of Albums.. Sub Albums.. Hmmm.. now that would look good.. Even if you used tags on the local server I think it would be a great enhancement for a future version.

  35. arie Says:

    helo, like gianluca, i got a same msg “Warning: Invalid argument supplied for foreach()

    WP 1.3-apha-5

  36. Marty Rozmanith Says:

    I’m getting an error after I instlal the plugin. I have it enabled in WP, but I get a bunch of PHP spit back at me. the error looks like this;

    http://rozmanith.dyndns.org:8080/Shared%20Graphic%20Files/TempImages/gallery-error.JPG

  37. superporcel Says:

    Flickr Gallery plugin
    Flickr Gallery plugin es un plugin para wordpress, que integra nuestras fotos en Flickr! en nuestro blog en forma de galeria.

    Mas informacion

  38. cyron.id.au » Galleries of Pink Galahs Says:

    [...] fully though, some clever person out there has developed something just perfect for me. A Wordpress flickr Gallery. It takes your photo sets on flickr, and lets you s [...]

  39. Zazie@Tokyo » Flickr-gallery¤Èwp-amazon¤òξÊýÍøÍѤ¹¤ë¤È¤­¤Î¥á¥â Says:

    [...] 㥢 ¤È¤¤¤¦¤³¤È¤ÇÄ´¤Ù¤¿¤é¡¢À©ºî¼Ô¤µ¤ó¤Î¥Ú¡¼¥¸¤Ë²ò·èË¡¤¬½Ð¤Æ¤Þ¤·¤¿¡£ Flickr Gallery 0.4¤Î¥³¥á¥ó¥ÈÉôʬ¡£¡Ê¤Á¤Ê¤ß¤Ë¤³¤Î¥Ú¡¼¥¸¤Î¥×¥é¥°¥¤¥ó¤Ï¤Á¤ç¤Ã¤ÈÁ [...]

  40. Universe » Flickr Gallery 0.4. Says:

    [...] /universe/index.php?p=1119″ rel=”bookmark”>

    I am victorious! Thanks to Flickr and this plugin, I finally have a photo gallery that requires no [...]

  41. kusaeni Says:

    i have an album in flickr but why the error is style coming (foreach) in line 78 ?

  42. Tany Says:

    I have this problem… i dunno what IM doing bad

    Fatal error: Call to undefined function: flickr_show_photos() in /home/tany/public_html/dynachrome/index.php on line 27

  43. The Tinbasher Flickrs One Off » ☼ The Tinbasher Blog Says:

    [...] it then I think I’ll upgrade to the pro account as well as getting my head round the wordpress flickr plugin. If you do happen to POP over to take a look around [...]

  44. dara Says:

    I’m trying to install your flickr API with wordpress 1.5. Because of the
    new theme system, it’s not work with the directions you provided. Please
    help.

  45. dara Says:

    Hey I figured it out. First install the Run PHP Plugin. Then create a new page and place the PHP code as flickr_show_photos($_GET['album'], $_GET['photo']); .

    The only thing I still don’t have is the ability to view as slide show.

  46. dara Says:

    hmm comment system messed up the code. here it is again

    < - phpcode -> flickr_show_photos($_GET['album'], $_GET['photo']); (without the dashes)

  47. Joie Says:

    i’m using 1.5 too. the run PHP plugin didn’t work for me, even though i dotn think that’s the problem. my problem is that it says there is a problem, does anyone know what could be wrong? http://www.reignoftears.com/gallery.php

  48. Ryan Says:

    can the gallery.php file you create go anywhere? mine is in the root and when i try view the page all i get is:

    Fatal error: Call to undefined function: get_header() in /home/www/nicemeel/gallery.php on line 1

  49. Chris Luby Says:

    What a brilliant plugin! Exactly what I was looking for. It’s tricky but possible to make it work with 1.5. Best WP Plugin yet!

  50. Photography Hack Says:

    Comprehensive Listing of Flickr Tools, Plugins, and Extras
    Anyone who loves digital photograph and the internet no doubt is already an addict of uber photosharing site Flickr (a group of people I endearingly refer to as Flickrheads). Here’s a great list of tools for working with Flickr photos and the platform

  51. Bubble Jam Says:

    Movable Type
    If this plugin doesn’t require WordPress, does that mean I could theoretically use it with MovableType?

  52. Paula Says:

    This awesome plugin inspired me to get a Pro account instead of keeping the regular account I had for months on Flickr
    I think they should see it that way, instead of as a server problem
    Anyway, I have it almost set up (http://www.super-yo.com/sg/gallery.php) but it shows me some errors when clicking the albums
    Any idea how can I solve this?
    Thanks in advance

  53. fybix.net: ...it could be worse... Says:


    yea. i guess if you’ve been visiting my website these past few days you’ve noticed some changes. i’ve installed a few plugins and modded the theme a bit. i plan on making different title heads and adding a few more things to the layout. i still can…

  54. John Says:

    Is there anyway to display the set name when viewing a photo? I tried a few different variables by guessing and couldn’t get any of them to work.

    Also, could you tell me how you were able to make the links in your example include the album names?

  55. SODL Says:

    ahm… sorry… I don´t get it.. what do you mean with:
    ###
    5. Copy your index.php file to gallery.php (or another filename if you want). Edit gallery.php by replacing everything inside
    ###
    which index.php? :-/

  56. marcel Says:

    Sorry… I don´t get it.. what IS FLICKR_USER_RO

    THIS MY ERROR CAN YOU HELP
    An error occurred. Here is the response from Flickr:

    < ?xml version="1.0" encoding="utf-8" ?>


    And here is the response after passing through the parser:

    array (
    ‘rsp’ =>
    array (
    ‘err’ =>
    array (
    ‘code’ => ‘1′,
    ‘msg’ => ‘User not found’,
    ),
    ),
    )

  57. cml Says:

    “5. Copy your index.php file to gallery.php (or another filename if you want). Edit gallery.php by replacing everything inside… ”

    What index.php file are you talking ’bout?

  58. Jo Says:

    I would like to echo the question posed earlier: How did you get your gallery.php file to go somewhere else (i.e. to be associated with your “photo gallery” link)??

  59. Jo Says:

    Oh, and two further questions: Can I associate my gallery.php with a WordPress Page? I see you have it as a category link, but would it be possible to use a Page?

    And secondly, is there an easy way to get rid of the photo attributes on each photo’s individual page? (i.e. the camera used, shutter speed, etc.)

  60. cml Says:

    The gallery.php, should that be placed in the root folder or the WP-content/themes/default/ folder? Can someone show me the source code for the gallery.php?

  61. Jo Says:

    cml: there are two gallery.php files. The first one, placed in your theme’s folder, is a copy of the theme’s index.php with a few lines of code (see above) cut and pasted into everything between the opening and closing of the

    tag and teh

    The second gallery.php is inserted into your root folder. It is a new text document with only the following code:
    < ?php
    $_SERVER[’PATH_INFO’] = ‘’;
    require(’./wp-blog-header.php’);
    include(TEMPLATEPATH . “/gallery.php”);
    ?>

    This second gallery.php is necessary to make up for the fact that WP 1.5 has themes, which changes where index.php is found.

    For a better explanation, see
    http://www.nicemess.com/?p=4

  62. randler.se - ett eko i mängden » Problem med blo.gs Says:

    [...] Försöker förgäves lägga till bloggfavoriter till min blo.gslista, men det enda som händer är detta: Popup med texten “There is no blog with that URL”. Jäla skit assÃ¥. FÃ¥r väl lägga till dem i en egen liten länkkategori. De har ju en gemensam nämnare. De skriver för dagstidningar. Nu är frÃ¥gan, ska jag orka försöka mig pÃ¥ en annan sorts galleri än de tvÃ¥ jag försökt fÃ¥ att fungera redan. Falbum och Flickr gallery. Ett nästintill omöjligt uppdrag. Kan ju ingenting om sÃ¥nt där egentligen, bara lÃ¥tsas. [...]

  63. Inside the Confusion » Flickr and Wordpress Says:

    [...] I am attempting to integrate flickr with wordpress. It’s supposed to be easy(Hah!) with a plugin called flickr-gallery. However I am having difficulty. I don’t like linking to flickr from my site (see previous post) because I have not control over the look of my flickr site. With this plugin I can use CSS to control the look of galleries, which is very important to me. For some reason my attempts have been to no avail, but my quest will continue. Flickr will be an excellent addition to my site, plus it will use their bandwidth so that I can continue my internet takeover. [...]