What Is Flickr Photo Album(FPA) Plugin?
Flickr Photo Album for WordPress is a fantastic plugin that allows you to pull in your Flickr photo sets and display them as albums on your WordPress blog.
There is a pretty simple template provided, but you can customize the templates 100% to match the look and feel of your own site.
And this post will guide you through the process of the customization. It’s pretty easy thanks to the great structuring of this plugin. See FPA in action here.
Preliminaries before We Start
From the “Look and Feel Customization” part of FPA’s wiki, we know that to customize this thing, we have to make sure the photoalbum-index.php template file (which is located inside the “template” folder in the plugin’s directory) closely match your own theme’s page.php.
Let’s first take a look at what the photoalbum-index.php file is like:
<?php
/*
Template Name: Photo Album
More comments here are omitted…
*/
global $TanTanFlickrPlugin;
if (!is_object($TanTanFlickrPlugin)) wp_die(‘Flickr Photo Album plugin is not installed / activated!’);
get_header();
// load the appropriate albums index, album’s photos, or individual photo template.
// $photoTemplate contains the template being used
?>
<div id=“content” class=“narrowcolumn”>
<?php
include($tpl = $TanTanFlickrPlugin->getDisplayTemplate($photoTemplate));
// uncomment this line to print out the template being used
// echo ‘Photo Album Template: ‘.$tpl;
?>
<?php if (!is_object($Silas)):?>
<div class=“flickr-meta-links”>
Powered by the <a href=“http://tantannoodles.com/toolkit/photo-album/”>Flickr Photo Album</a> plugin for WordPress.
</div>
<?php endif; ?>
</div>
<?php
// uncomment this if you need a sidebar
//get_sidebar();
get_footer();
?>
It is just like a standard page template of WordPress theme, isn’t it?
Then we shall look into the page template as indicated. There should be a page template file sample in your theme’s directory, named page.php or something like that. Take my current theme as an example, the codes inside look like:
<?php get_header();
?>
<div id=“whitewrap”>
<div class=“wrapper”>
<div id=“location”>
<p><a href=“<?php echo get_option(‘home’); ?>/” title=“<?php bloginfo(‘name’); ?>“>Home</a> / <?php the_title(”); ?></p>
</div>
<div id=“secondary”>
<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>
<div id=“postcontent”>
<?php the_content(”); ?>
</div>
<?php endwhile; else: ?>
<?php endif; ?>
</div> <!– end secondary –>
<?php include (TEMPLATEPATH . ‘/sidebar-page.php’); ?>
</div> <!– end wrapper –>
</div> <!– end whitewrap –>
<?php get_footer(); ?>
Compare these two code snipplets and you’ll realize that the main structure is nearly the same. Hence what we’re going to do next is pretty simple bearing this in mind. Besides, those comments inside photoalbum-index.php almost have told you everything you need to do(not very much, though ^^).
Step 1: Merging the two
First thing’s first, copy everything between <?php get_header(); ?> and <?php get_footer(); ?> from page.php to photoalbum-index.php to replace its counterpart.
Step 2: Main Replacement
Our purpose is to make the structure of photoalbum-index.php accords with that of page.php. So we ought to wipe out lines between <div id=“secondary”> and its closing </div>, then add following codes there:
<?php
include($tpl = $TanTanFlickrPlugin->getDisplayTemplate($photoTemplate));
?>
<?php if (!is_object($Silas)):?>
<div class=“flickr-meta-links”>
Powered by the <a href=“http://tantannoodles.com/toolkit/photo-album/”>Flickr Photo Album</a> plugin for WordPress.
</div>
Keep the promotion link as a tribute to the author.
Step 3: Tiny Moderation
In fact, we’ve already finished the job. But there’s a little more to be done: Make the patching where necessary. In my sample, the navigation title should be fixed as below:
<div id=“location”>
<p><a href=“<?php echo get_option(‘home’); ?>/” title=“<?php bloginfo(‘name’); ?>“>Home</a> / <?php e(‘Gallery’); ?></p>
</div>
Mission Accomplished!
Now the photoalbum-index.php should look like this:
<?php
/*
Template Name: Photo Album
So many comments…
*/
global $TanTanFlickrPlugin;
if (!is_object($TanTanFlickrPlugin)) wp_die(‘Flickr Photo Album plugin is not installed / activated!’);
get_header();
?>
<div id=“whitewrap”>
<div class=“wrapper”>
<div id=“location”>
<p><a href=“<?php echo get_option(‘home’); ?>/” title=“<?php bloginfo(‘name’); ?>“>Home</a> / <?php _e(‘Gallery’); ?></p>
</div>
<div id=“secondary”>
<div id=“postcontent” class=“narrowalbum”>
<?php
include($tpl = $TanTanFlickrPlugin->getDisplayTemplate($photoTemplate));
?>
<?php if (!is_object($Silas)):?>
<div class=“flickr-meta-links”>
Powered by the <a href=“http://tantannoodles.com/toolkit/photo-album/”>Flickr Photo Album</a> plugin for WordPress.
</div>
<?php endif; ?>
</div>
</div> <!– end secondary –>
<?php include (TEMPLATEPATH . ‘/sidebar-page.php’); ?>
</div> <!– end wrapper –>
</div> <!– end whitewrap –>
<?php get_footer(); ?>
In case you need more customization like hooking FPA up with Lightbox or any other display libraries, you can find out more info about how to customize this plugin here.
If you ever used a magazine-style theme, you must be familiar with the concept "custom field". In essence, it’s a key-value pair storing post data about what additional info to display in a specific page. In most cases, we take advantage of custom field to display an image related to the post.
