My favorites | Sign in
Project Logo
                
Search
for
Updated Sep 20, 2008 by joetan54
Labels: Featured
Documentation  
How to use and integrate the Flickr Photo Album plugin into your WordPress blog.

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.benjamin, 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 i...@detroitstar1.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 alexluft, Jul 03, 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.fischer.ch, Jul 04, 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.harvey, 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 luca15074, Sep 04, 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 justflyup, Sep 05, 2008

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

Comment by martin.baechtold, Sep 08, 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.guinn47, Sep 28, 2008

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

Comment by adapterad70, 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 lucasmattioneli, 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 defre92, Oct 01, 2008

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

Comment by estrella.esteve.arias, Oct 17, 2008
I've installed this plugin, and it works very well, but I have a problem. When I open "my photos" page the sidebar disappears. How can I maintain the format?

http://www.estrellaesteve.com/ http://www.estrellaesteve.com/mis-fotos/

Comment by shirlyhershko, 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 hkizgin, 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 cont...@w3haus.com.br, Nov 01, 2008

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

Comment by nicoliniluca, 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 dotcommakers, 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 g...@supergab.com, Dec 02, 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 suebriz, 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 zidmubarock, Dec 20, 2008

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

Comment by jennamn, Jan 09, 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 mergryphon, 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.c.obrien, Jan 30, 2009

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

Comment by marcbarriere, 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 namribu, Mar 14, 2009

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

Comment by gabriel.tetrault, Apr 02, 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.scullion, 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.wwh, 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 colinvdbel, 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 tombeardshaw, 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 docdawning, 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 dpino3666, 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.nick, Sep 07, 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 robertefitzpatrick, 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 robertefitzpatrick, 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 3xscreen, Oct 04, 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 kanne84, Oct 07, 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 jayjenxi, 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 02, 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 ch101xyl, Nov 18 (2 days ago)

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

Comment by ch101xyl, Nov 18 (2 days ago)

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


Sign in to add a comment
Hosted by Google Code