Flickr Gallery in WordPress: Integration with FAlbum plugin
Hello!
Recently I added a gallery in wordpress blog that displays photos from a wordpress plugin FAlbum. This plugin is very nice one and works very smoothly with wordpress. Installing and configuring it with wordpress is somewhat tricky and time consuming. Once you set it up, it will be your great tool.
OK. Now let me share my experience in setting up, configuring and integrating the FAlbum Flickr plugin with wordpress blog.
Integrating a small gallery in wordpress
Before we start, please take a look at what we are going to do. Check the following link.
Click here to see a small gallery with 6 photos at the bottom of the page.
Step One: Download and install the FAlbum plugin
First of all, download the FAlubum plugin from the following link:
http://www.randombyte.net/blog/projects/falbum/
Now unzip the file and make sure that you unzip the file in a folder named as falbum. A common error is unzipping the files in a folder named as FAlbum-0.7.1 and uploading it in the plugins folder of wordpress. Make sure that your files are located as follows:
instllation_directory/wp-content/plugins/falbum/falbum.php
instllation_directory/wp-content/plugins/falbum/FAlbum.class.php
instllation_directory/wp-content/plugins/falbum/wordpress-falbum-plugin.php etc
Step Two: Activate the FAlbum plugin
Log in as admin in your wordpress system and activate FAlbum under the Plugins tab.
Step Three: Configure and setup the FAlbum
Now from the Settings tab, go to FAlbum tab as like Settings –> FAlbum.
Here you will find two steps, complete both of them.
Step Four: Set the options and the (dot)htaccess file
Next, you come to FAlbum Options. Now set there everything as per your preference. Remember one important thing. It is about your (dot)htaccess file. If it is not writable, make it writable. Otherwise, you will get a message that your (dot)htaccess file is not writable and the plugin will request you to copy and past some code. Do either way you like.
Just for your information, I am using the the default settings without change any of them.
Step Five: include and add album code in your theme file
I am showing 6 (six) Flickr photo files at the bottom. So I have add the following code in my footer.php file.
<?php require_once(ABSPATH.'/wp-content/plugins/falbum/falbum.php'); global $falbum; echo $falbum->show_recent(6); ?>
In my footer.php file code, I placed in a DIV element. So, it looks somewhat like this:
<div id="footerFlickrPhotos"> <div id="title">Photos on flickr</div> <?php require_once(ABSPATH.'/wp-content/plugins/falbum/falbum.php'); global $falbum; echo $falbum->show_recent(6); ?> </div>
Step Six: creating falbum.php file from index.php file
Now we will go to our theme directory. Here you see several files like index.php, header.php, footer.php etc. Now copy the index.php file and paste it as falbum.php. Open the falbum.php file and add FAlbum code and a sample is as follows.
<?php /* Template Name: FAlbum */ ?> <?php get_header(); ?> <!-- FAlbum Start --> <script type="text/javascript" src="<?php bloginfo('url'); ?>/wp-content/plugins/falbum/res/falbum.js"></script> <script type="text/javascript" src="<?php bloginfo('url'); ?>/wp-content/plugins/falbum/res/overlib.js"></script> <script type="text/javascript" src="<?php bloginfo('url'); ?>/wp-content/plugins/falbum/res/prototype.js"></script> <div id="overDiv" style="position:absolute; visibility:hidden; z-index:1000;"></div> <div id="content" class="narrowcolumn"> <?php $falbum->show_photos(); ?> </div> <!-- FAlbum End--> <?php get_footer(); ?>
Upload this new falbum.php file to your theme directory in the server.
Please remember that there are two different falbum.php files in two different locations. So, pleaes do not confuse with one another.
instllation_directory/wp-content/plugins/falbum/falbum.php
instllation_directory/wp-content/themes/theme_name/falbum.php
We have created the second one from our theme’s index.php file.
Step Seven: Check the output
Go to your website, refresh it twice and click on the thumbnail of any flirkr image.
So, you are done. Huh?
Integrating a complete gallery in wordpress
Well. You may want to keep a single page as your album home and in that page you may want to keep some Flirkr photos in thumbnail so that it looks gallery homepage. Fine!
Now let us see how we can do this.
Step One: Read the above part “Integrating a small gallery in wordpress”
Check the above part thoroughly since you will need the knowledge from the above part titled as Integrating a small gallery in wordpress. Since many things are common, I have avoid the repeated description.
Step Two: create a file and link it to wordpress
First of all, create a file and link it with wordpress. You can follow my another article to do this. The another article is here:
http://www.tanzilo.com/2008/11/02/wordpress-how-to-add-and-link-static-or-custom-pages/
Step Three: add the album code to your page
You can add photos in several ways. For example, if you want to add latest or recent 8 photos, add the following code.
<?php echo $falbum->show_recent(8); ?>
If you want to show 8 random Flickr photos, add code like this:
<?php echo $falbum->show_random(8); ?>
You will find more details on how to customize your page in the following link:
http://www.randombyte.net/wiki/falbum/functions_and_variables
Step Four: Customize CSS coding for custom look
Remember that each thumbnail photo will be placed in a list element. So, if this is the PHP code where we place the album:
<?php require_once(ABSPATH.'/wp-content/plugins/falbum/falbum.php'); global $falbum; echo $falbum->show_recent(6); ?>
Here is the CSS to make them looking like a thumbnail gallery:
#footerFlickrPhotos { width:323px; margin:23px 0px 0px 48px; float:left; } #footerFlickrPhotos UL { margin:0px; padding:0px; } #footerFlickrPhotos LI { list-style:none; float:left; margin:0px; padding:0px; background:none; } #footerFlickrPhotos IMG { width:75px; height:75px; border:#FFFFFF 2px solid; float:left; margin:5px 15px 10px 0px; }
Next, the bigger photo and all other things like next, previous buttons and tags etc will be displayed in a DIV element named as content.
#content { width:580px; } #content A { color:#0B4B93; text-decoration:none; } #content A:hover { text-decoration:underline; }
Step Five: Check your site
Now you are done! Go to your site, refresh the site twice and check you album.
So, we are done!
These following two links will be helpful and you can visit them for more information:
http://www.randombyte.net/wiki/falbum/functions_and_variables
http://www.randombyte.net/wiki/falbum/incorporating_falbum_into_your_own_theme
Thank you for reading.