Customize Flickr Photo Album Plugin to Fit Your Theme

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.


评论

《 “Customize Flickr Photo Album Plugin to Fit Your Theme” 》 有 2 条评论

  1. I just wanted to jot down the remark to be able to say thanks to you for all those fantastic hints you’re giving out only at that web site. My personal lengthy internet search offers at the end of the day been paid along with really good facts to switch with my personal visitors. We d report that many of us readers are undoubtedly endowed to dwell inside a notable web site along with very many wonderful experts with beneficial tips. I feel very fortunate to have come across the web pages and look forward to a lot more fascinating times reading through right here. Thanks once more for all the details.

  2. […] Updated: May 24, 2010: We need to modify something to the photoalbum-index.php file. Read this post […]

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注