My favorites | Sign in
Project Home Downloads Wiki Issues Source
Search
for
Documentation  
How to use and integrate the Flickr Photo Album plugin into your WordPress blog.
Featured
Updated Feb 4, 2010 by joeta...@gmail.com

Table of Contents

Installation

  1. Download and unpack / unzip the archive
  2. Copy the entire "tantan-flickr" directory to your Wordpress plugins directory.
  3. Go into your Wordpress admin, click on the "Plugins" tab, and then activate "Flickr Photo Gallery".
  4. Click on the "Options" (or "Settings") tab, and click the "Photo Album" subtab to bring up the options screen.
  5. Follow the onscreen prompts to link your photo album to your Flickr account.
  6. Once your photo album is linked to your Flickr account, enter a URL where you want your photo album to appear.
  7. You're done! To view your photo album, just go to the URL you entered in the previous step. To insert a photo, just click on the Flickr icon in your "Add media" bar when editing posts. Click on a photo, select a size, and a HTML snippet for that photo will appear in the post's textarea. Cool! If you're using WordPress 2.3 or older, then you should a new "Photos" tab next to your uploading tabs.

Super Cache Compatibility

If you have the Super Cache plugin enabled, add the following code to your .htaccess, directly after the WPSuperCache section, but before the WordPress section. Replace /photos/ on the first line with the path to your photo album.

<IfModule mod_rewrite.c>
RewriteCond %{REQUEST_URI} ^/photos/.*
RewriteCond %{DOCUMENT_ROOT}/wp-content/cache/supercache/%{HTTP_HOST}/$1/index.html -f
RewriteRule ^(.*) /wp-content/cache/supercache/%{HTTP_HOST}/$1/index.html [L]
</IfModule>

Custom Photo Comments

The plugin supports a couple third party commenting systems, replacing the comments left by Flickr users. These are free web services that allow your visitors to leave comments on your photos, without them having to login and register at Flickr. If you want to add your own commenting system, look inside the photoalbum-comments.html template file.

To use a third party commenting system, instead of default Flickr comments, add the following to the TOP of your wp-config.php:

For JS-Kit, add this code: (see the JS-Kit documentation for more options)

define('TANTAN_FLICKR_COMMENTS', 'js-kit');

For Disqus, add this code:

define('TANTAN_FLICKR_COMMENTS', 'disqus');
define('DISQUS_SHORT_NAME', 'XXXX'); 

Note: if you already are using the Disqus commenting system for your normal blog posts, then you don't need the second DISQUS_SHORT_NAME line. If you just want to use Disqus for your photo comments (and not your normal blog posts), then replace XXXX with the short name of your site. The short name is listed on this admin screen.

In the end, your wp-config.php should look something like this:

<?php
define('TANTAN_FLICKR_COMMENTS', 'disqus');

// ** MySQL settings ** //
define('DB_NAME', '...');
... etc ...

Popup Overlay Support

The plugin comes bundled with 4 different display libraries, hosted on TanTanNoodles: Lightbox, Facebox, FancyZoom, and Fancybox. Here's a quick demo of these display libraries. These libraries are hosted for your convenience, you are encouraged to download these libraries and install them on your own server.

If you already have a display library installed on your site and would like to use that instead of a bundled library, then you will need to modify this resource file (found in the templates directory). Follow the examples in that file (starting at around line 134) to tweak the PHP to fit your site.

To use one of the hosted bundled display libraries, add the following to the TOP of your wp-config.php file:

For Thickbox, add this code: (included by default with WP 2.5+)

define('TANTAN_DISPLAY_LIBRARY', 'thickbox');

For Light Box, add this code:

define('TANTAN_DISPLAY_LIBRARY', 'lightbox');

For Fancy Box, add this code:

define('TANTAN_DISPLAY_LIBRARY', 'fancybox');

For Face Box, add this code:

define('TANTAN_DISPLAY_LIBRARY', 'facebox');

For Fancy Zoom, add this code:

define('TANTAN_DISPLAY_LIBRARY', 'fancyzoom');

In the end, your wp-config.php should look something like this:

<?php
define('TANTAN_DISPLAY_LIBRARY', 'facebox');

// ** MySQL settings ** //
define('DB_NAME', '...');
... etc ...

Notes:

  1. Depending on your blogs theme, you may need to use a little bit of JavaScript / CSS mojo and hack some code in your theme.
  2. Here's a page with a list of all the various libraries you might want to use if you want to use your own.
  3. Take a peek inside the file photoalbum-resources.php to see how to hook up the plugin with a custom display library.

Different sizes for the popup image can be set by adding this to your wp-config.php.

define('TANTAN_DISPLAY_POPUP_SIZE', '--SIZE--');

Replace --SIZE-- with either: Square, Thumbnail, Small, Medium, Large, Original.


Look and Feel Customization

Not all WordPress themes are created equal. The first thing you'll want to do is make sure the photoalbum-index.php template file closely matches your own theme's index.php or page.php. In particular, make sure any DIV tags in your own theme's files are reflected in the photoalbum-index.php.

  1. All the templates are located inside a "templates" folder inside the tantan-flickr directory.
  2. If you just want to customize a particular template, just copy that template into your current theme directory. This ensures that when the plugin get's updated, your changes will not be lost.
  3. To completely customize the look and feel, copy all these template files (they all start with photoalbum-) into your current theme directory and modify as necessary.
  4. Modify the HTML and CSS in the template files to fit your own site. All the CSS are referenced from the template file photoalbum-header.html
  5. That's it!
Comment by ziegler....@gmail.com, Jun 22, 2008

Hi, nice plug ! BUt i already have installed the lightbox plugin. How can i make your plug using it ? when i add : define('TANTAN_DISPLAY_LIBRARY', 'lightbox'); to the wp-config i load 2 overlays at the same time !!

Thanks

Comment by supp...@dstar1.com, Jun 26, 2008

what do i change in photoalbum-resources.php ...what path do i replace this with?

http://static.tantannoodles.com

the location of my wordpress directory on my own site?

Comment by alexl...@gmail.com, Jul 3, 2008

The Flickr gallery plugin works great. I want to use LightBox? and have downloaded and enabled lightbox-2 (as well as wp-lightbox2). What else do I have to do to make Flickr gallery use lightbox? I don't understand.

Comment by hans.fis...@gmail.com, Jul 4, 2008

I tried to use Fancyzoom.

I added this: define('TANTAN_DISPLAY_LIBRARY', 'fancyzoom'); and I installed fancyzoom from here http://www.cabel.name/2008/02/fancyzoom-10.html

but now???

Comment by josh.har...@gmail.com, Jul 14, 2008

Is there an existing guide to show us what files to update if we have already installed the plugin? I have it installed currently but did some extensive customization. Unfortunately its been a while ago and i cant remember what all files I messed with.

Comment by luca15...@gmail.com, Sep 4, 2008

hi. i installed plugin but i can't views my album (error 404) when i follow link

http://www.mysite.it/photo/album/123456/page.html

is a .htaccess file problem?

Comment by justfl...@gmail.com, Sep 5, 2008

i have the same err@@ i am also views my album but error 404

Comment by martin.b...@gmail.com, Sep 8, 2008

@ziegler.benjamin: I just had the same problem.

Here is how I solved it: In wp-admin you have to go to Settings -> Lightbox 2 and uncheck the option "Auto-lightbox image links".

Comment by paulycrush, Sep 23, 2008

How do you turn off paging?

Comment by paulycrush, Sep 23, 2008

Why does the title in my browser display "nothing found for albums"?

Comment by jerry.gu...@gmail.com, Sep 28, 2008

Is anyone having problems with the Flickr Plugin not randomizing their photos?

Comment by adaptera...@gmail.com, Sep 28, 2008

Hello, Why is it I cannot post my photos in my page? By the way I'm using WordPress? 2.6.2.

Comment by lucasmat...@gmail.com, Sep 30, 2008

I couldn't make it show as in your examples. I copied all the files to my theme and still don't show anything.

Comment by defr...@gmail.com, Oct 1, 2008

Merci beaucoup l'integration lightbox et une turie ;) bravo

Comment by shirlyhe...@gmail.com, Oct 17, 2008

hey...

I'hve installed the tantan-flickr and i got this messege: In order to view your photo album, your WordPress? permalinks need to be set to something other than Default. what do i need to do ? please help me....:)

Comment by hkiz...@gmail.com, Oct 28, 2008

How can i use fancyzoom in my blog Photo album ? how to make a configure. iread everything. everything about lightbox. fancyzoom working great for my local pics http://blabla.com/blabla.pics but not working flickr pictures. any body help me please.

Comment by analytic...@gmail.com, Nov 1, 2008

The shadowbox plugin will not work when I choose "Square" instead of "Thumbnail"

Comment by nicolini...@gmail.com, Nov 13, 2008

Hi, i wanna organize photo-album section in my blog in this way: - in the sidebar (different from default sidebar), a list (thumbnail+description) of all photo-sets existing - in the content window, all pixx of the current photo-set

What template-files should i use? How should i structure them? Thanx

Comment by geo...@halleyhome.com, Nov 15, 2008

Thanks for the great plugin, I'm using it at http://www.halleyhome.com and I'm right in the middle of customizing all the templates. Finding everything pretty easy to manipulate so far, thanks for the hard work!

Comment by dotcomma...@gmail.com, Nov 25, 2008

hello mate

i have installed your plugin at http://www.cooking-outdoors.com/ I have used "Fancybox" setup.. I have inserted the code in to wp-config.php file too but still not working.. Can you please check the url and tell me the solution?

regards

Comment by visualis...@gmail.com, Dec 2, 2008

Was someone able to use the ShadowBox? library? I have it installed as a wordpress plugin and would like to use it with TanTan?

Comment by sueb...@gmail.com, Dec 18, 2008

I was using an older version of the plugin with WP 2.5. I finally made the jump to WP 2.7 and upgraded your plugin as well for the video support. I went back through and made the customizations to get it all to display correctly with my theme. The issue I am having is that when I click on an infidual photo to display it (not the flickr slideshow) it adds the image to the bottom of the current post and every post after that. I am at a loss for what to change to fix this and have it display one photo correctly. Any help would be grand!

Sue

Comment by lamarrwilson, Dec 19, 2008

I have 2 issues:

1. Sidebar widget won't load latest pictures. It's been over 7 hours.

2. Link below pictures that says, "View more photos" goes to the home page of my site, not Flickr.

Can anyone assist?

Comment by zidmubar...@gmail.com, Dec 20, 2008

any suggestion to make the widget like this http://www.johnchow.com

Comment by jenn...@gmail.com, Jan 9, 2009

I've installed this plugin on a site I'm working on and everything works fine, except that the listing of thumbnails in the first set displays as a vertical list. Check it out at st-marks.com/flickr

I've spent a couple hours trying to fix this issue, but I'm beginning to feel stumped. Does anyone have any ideas why this might be happening?

Comment by mergryp...@gmail.com, Jan 23, 2009

my theme makes a menu of wp pages, how can I add a 'photo' page that links to the URL for the flickr directory created?

Comment by timothy....@gmail.com, Jan 30, 2009

I have super cache installed. Where is the htaccess file so I can edit it?

Comment by marcbarr...@gmail.com, Feb 24, 2009

How can I change the language on the sidebar at the bottom of the pictures? Relacing this link: "View more photos >

Comment by namr...@gmail.com, Mar 14, 2009

How to add widget manually from theme ? just like <php .......

Comment by gabriel....@gmail.com, Apr 2, 2009

I know this will make me sound like a newb, but this plug-in requires far too much manual customization to get it working with lightroom - why not just just include this on the settings page where you can select what pop-up layer you want to use?

Great idea, but still too much work.

Comment by gerald.s...@gmail.com, May 12, 2009

I'm with Gabriel Tetrault. I spent 4 hours trying to work out your documentation. In the end I googled elsewhere, un-installed the plugin and removed all the files and used this - which is MUCH easier and better than the plugin outlined above: http://wordpress.org/extend/plugins/flickr-gallery/other_notes/

I recommend anyone with problems with the above plugin to use this.

Comment by James....@gmail.com, Jun 11, 2009

can anyone help! im in the middle of the dillema.. how can install the fancybox! i just dont know how~ T_T

Comment by colinvd...@gmail.com, Jul 16, 2009

Hi, I really like your plugin and it is working great!

However, as you say: "These libraries are hosted for your convenience, you are encouraged to download these libraries and install them on your own server."

I would love to host the libraries myself, but I don't know how. Could someone please help me?

Comment by tombeard...@gmail.com, Jul 16, 2009

Nice plugin. When a photo is put into a post, the small size from Flickr is too small and the medium is too big (the content area is 700px). Is there a way to automatically resize the image to 700px width and retain the aspect ratio?

Comment by docdawn...@gmail.com, Aug 14, 2009

I love this plugin.. I may have to take some cycles out to look in to fixing the URLs it makes though.. I freakin HATE having ".html" or any flickr id info show up in my URLs..

Overall, this is an awesome plugin and inspite of really not liking the URLs, I still use it a lot - the rest of it makes up for that.

Feel free to ping me if you have tips on getting the URLs lookin epic - maybe I'm bein a n00b and jumping the gun, but I don't think there's any support yet for epic urls.

Cheers!

Comment by dpino3...@gmail.com, Aug 31, 2009

I love this plugin. How can I add it not as a widget but asa a php into a html or php file from my blog... Something like <?php tantan_flickr(); ?>. Is this possible?

Thanks

Comment by legrand....@gmail.com, Sep 7, 2009

I love to use this plugin with lightbox.. showing flickr sets.. my only problem is... when adding a flickr set how do I prevent my blog showing all pictures from the set?? I just want one picture and the other need to be accessable through a lightbox overlay

Comment by robertef...@gmail.com, Sep 27, 2009

Having trouble implementing this plugin.

Basically, I'm looking to display square thumbnails in a sidebar that gets it's content from a custom field on each page. I want the thumbnails to open a lightbox with the photo from Flickr. Think you can help me? Want to make a few bucks? Contact me at rob @ cloudesign .com because I need a bit of help!

Comment by robertef...@gmail.com, Sep 28, 2009

legrand.nick - I believe if you mark the photo as private, and then select "don't show private" (or something to that effect) in the config that will work for you

Comment by 3xscr...@gmail.com, Oct 4, 2009

Thanks for this Joe - you have done a great job and it is much appreciated. I have just sent you a donation and encourage other users to as well.

Comment by kann...@gmail.com, Oct 7, 2009

I can't figure out how to fix the CSS on my theme to make the thickbox overlay work -- the nav bar shows up in front of the picture: http://www.tatoddconstruction.com/photo-gallery/

Help!

kanne84@gmail.com

Comment by crackpixels, Oct 20, 2009

Any way to insert this manually into a template? <?php ... ?> ??

Comment by jayje...@gmail.com, Oct 28, 2009

Hi, is there a way to include grab EXIF data from Flickr and show it in the photo descriptions?

Comment by natural-...@hotmail.com, Nov 2, 2009

I wish to show all of my groups in Flickr on my page. The max showing, I believe, is 400. I belong to 700 groups. Is there a way to at least paginate for every 200, 300, or 400? My page is http://oldschoolscholar.com/museum-galleries/ and it is popular with many people for cultural reason.

Thanks!

Comment by ch101...@gmail.com, Nov 18, 2009

How to change the Thumbnail's size?Help!Thank you!

Comment by ch101...@gmail.com, Nov 18, 2009

I can't set a password to the photo-album page,how can i do??

Comment by cont...@wiredsoles.com, Nov 28, 2009

Thanks for a fantastic plugin! I have tried a heap of others and i simply couldn't get any of them to work the way i wanted! I have installed this and added the lightbox code and it is working perfectly!!! (It actually allowed me to remove some of the others I was running as well!).

Only question i have is in regards tot he sidebar widget, at the moment when someone clicks on an image in the sidebar widget it currently goes to the album specific page for that photo (which is exactly what it is meant to do), but I was wondering if it is possible to modify the code to allow either of the following:

1) When the user clicks in the sidebar I would like for it to load in a lightbox instead of going to a new page, this way it will have the same look and feel as when the user browse's the image gallery using lightbox.

2) if the first option is going to be to hard and require a lot of changes then is it possible to just make all photos in the sidebar link directly to the main gallery index page?

Hope this makes sense :) and thanks again!!!

Comment by suryakum...@gmail.com, Dec 14, 2009

i really love this plugin, but it's not pretty well ini my theme... anyone can help me.. i'm not to understand about html or css... please check here: http://obgynfkusu.com/gallery

suryakumara@gmail.com

Comment by Bertrand...@gmail.com, Jan 21, 2010

I am running WordPress? 2.9.1 and I installed the tan tan Flickr Photo Album 1.1

When I am on the Photo Ablum Configuration page (/wp-admin/options-general.php?page=tantan-flickr/flickr/class-admin.php), under the Flickr settings, I cannot "Configure your sidebar >." Clicking the "Enable the Flickr Widget for your sidebar" checkbox does not change anything.

It goes to this URL (http://plaingreen.blendinteractive.com/wp-admin/themes.php?page=widgets/widgets.php) and dies with a permissions error:

"You do not have sufficient permissions to access this page."

Is this the right page? As the admin shouldn't I have the required permissions?

Several others have had problems with this, too. http://www.flickr.com/groups/tantannoodles/discuss/72157608253970046/

I have had really good luck with it here (http://siouxfallsjazzfest.com/photos/), and our clients can actually use it! But the sidebar widget does not work on this site, either (WP 2.8.4).

Comment by Bertrand...@gmail.com, Jan 22, 2010

This fix WORKED!

Line 64 of "tantan-flickr/flickr/admin-options-flickrsettings.html" contains the following string:

    themes.php?page=widgets/widgets.php

Change this to:

    widgets.php
Comment by lithoped...@gmail.com, Jan 24, 2010

Any advice on limiting the number of photos shown on the front page of the gallery template? The foreach loop in the code counts all of the photos from an album in the "highlight" div. I'd like to limit it to a specific number. Any suggestions?

Thanks

Comment by mar251@gmail.com, Jan 26, 2010

Is it possible to get the plugin working with the template files not in the root of theme directory, but in a subfolder?

Comment by debbi...@gmail.com, Feb 16, 2010

How can I hardcode the size of the video player? the current default is too wide for my theme.

Comment by sherrilynnwood@gmail.com, May 6, 2010

i installed plugin on wordpress 2.9.2, thesis theme 1.7, i have thumbnails from my flickr set but when I click on one I get a 404 error when I am expecting to get a larger image. http://daintytime.net/quilts/color-studies/

Comment by MarkJYam...@gmail.com, Jun 1, 2010

i installed and got my thumbnails but when I click on a photo it just go's to error I cant get them to pop open in light box. please help. Thanks http://blog.therandr.org/2010/06/bff-behind-the-show-photos/

Comment by atravela...@gmail.com, Jun 4, 2010

i would like to remove the tags showing and also to have all the pictures already displaing on the page without have to click on the photo icon. as u understand i am not an expert so any help is really really appreciate it :-) here is how it looks now http://welovelondra.com/foto-e-video/ cheers

Comment by PaulVand...@gmail.com, Jul 1, 2010

my photos show up on the actual post but in the list of archives the don't show up. how do i make it so theyre always visible so you don't have to click on the individual post to view them?

also i copied the code onto my wp-config and it is not making the face box effect happen. can someone point me to the troubleshooting?

Comment by elz...@gmail.com, Aug 17, 2010

Tried using Disqus for comments, but on each photo it shows the following message:

"This page could not be reached by Disqus. If you are testing locally or on a password-protected page, please use the disqus_developer parameter as detailed here.."

Disqus works OK for my blogs comments, so in my wp-config.php I used: define('TANTAN_FLICKR_COMMENTS', 'disqus');

Any ideas?

Luis

Comment by aron.lak...@gmail.com, Aug 19, 2010

To change thumbnail size:

Copy the "photoalbum-albums-index-highlight.html" from the

"wp-content\plugins\tantan-flickr\templates\" directory to your current template directory, ie: "wp-content\themes\sandbox\"

change the following line:

echo TanTanFlickrDisplay?::photo($photo, array('size' => 'Square', 'scale' => 0.5, 'album' => $album, 'context' => 'gallery-index'));

the scale will multiply your current thumbnail size, so if you want to have 75px 75px thumnails instead of the current 37.5, set this to 1 instead of 0.5 like this:

echo TanTanFlickrDisplay?::photo($photo, array('size' => 'Square', 'scale' => 1, 'album' => $album, 'context' => 'gallery-index'));

You can play around with defining custom sizes in wp-config.php if you really feel like, but the above should do the trick.

Comment by andreasb...@gmail.com, Sep 27, 2010

I love this plugin, but I'd love it even more if child themes were supported. Any chances it's getting an update soon?

Comment by wesweaty...@gmail.com, Mar 23, 2011

Hi,

Anyone knows how to link to the flickr .jpg image file?? Right now i selected the link to flickr, but it links to http://www.flickr.com/photos/username/5553083156/

How do i link to the .jpg file so i can use fancybox or shadowbox???

regards

Comment by krat...@gmail.com, Oct 25, 2011
Comment by vivagerm...@gmail.com, Dec 1, 2011

when I click on a photo it just go's to error I cant get them to pop open in light box http://makemixmoneyonline.com

Comment by tom.masz...@gmail.com, Dec 11, 2011

I have a couple of errors I can't figure out.

1) None of the popup overlay features work correctly. No matter which one I use, it never loads the image. They just sit at the loading popup and never display the image.

2) In the popup for image insertion it defaults to "Original" size no matter what I set for "TANTAN_DISPLAY_POPUP_SIZE".

Any ideas?

Comment by muk...@collegesanduniversities.org, Dec 27, 2011

how to i make the photoalbum-index.php the main page that loads on the domain and not the wordpress index.php?


Sign in to add a comment
Powered by Google Project Hosting