Nov 23, 2008 - PHP, Wordpress    6 Comments

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.

In my footer.php file code, I placed in a DIV element. So, it looks somewhat like this:

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.

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.

If you want to show 8 random Flickr photos, add code like this:

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:

Here is the CSS to make them looking like a thumbnail gallery:

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.

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.

6 Comments

  • Wow, this is the best (and most flexible) implementation I have seen for a long time — thanks so much for the detailed explanation on config’ing, as well!

    One thing I haven’t been able to figure out yet though is how to adjust the spacing on the thumbnails in my mini-gallery — I have 12 thumbnails in a single, horizontal row at the bottom of our home page…

    Is there a style statement that I can adjust so that they appear closer together? If I can shave off a pixel or two in the padding between the items (or maybe to present them with no padding?) would be perfect.

    Again, many thanks for so much legwork here; this is going to be the gravy on our school’s new site.

    Here’s the temporary URL while I debug our new layout:
    http://rbai.biz.previewdns.com/

    When we go live, it’s just http://RBAI.biz/ .

  • @ Dan

    Yes. You are right.
    There is a style statement for this.
    Please check “Step Four: Customize CSS coding for custom look” one more time.

    Increasing or decreasing padding or margin around the image will help you to make the images appear closer.

    You know you can also decrease the size of the image somewhat using CSS. In “Step Four”, you will see how I am setting image size and margin around them using CSS.

  • Many thanks — I played around with the padding a bit (CSS is very new territory for me, so I sweated it a little); but in the end, defining the thumbnail size as one pixel less in each direction (74×74) worked well enough. Great flexibility!

  • @ Dan

    I am happy to know that you came up with a solution finally.
    🙂

  • Great post! I managed to get falbum to work now, but I have a little problem customizing the random image widget. Is it possible to give me a helping hand? Hope I hear from you! Thanks!

  • @ leli,

    I am happy to know that it worked for you.
    But I am sorry to say that I am very busy and cannot offer a helping hand to you.

    Rather my suggestion is: see the manual and you can figure out how to do that.

    Wishing you all the best.

Got anything to say? Go ahead and leave a comment!