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


Sign in to add a comment
Hosted by Google Code