Please note, I no longer use or contribute to FAlbum. This page is left purely for information purposes. I can not and will not be able to offer any help

The problem of integrating Falbum into your own themes seems to come up a lot in the Falbum forums. Whilst Eli's details make sense, they are a bit too complex and don't use the full functionality of Wordpress and it's Templating features. I personally believe Falbum shouldn't be providing an "out the box" solution that is does now. At the moment, Falbum provides a solution that only works well in the Wordpress default theme (Kubrick). It should rather just supply the required plugin, details on how to integrate it and an example CSS file. Until then, these steps should get you up and running quickly.

Assumptions:

  • You are using Falbum 0.5.3 or later and it has already been activated
  • You are using Friendly URLs within Wordpress and FAlbum - if you are not using Friendly URLs, you should only need to perform step 1.

How To

  1. Create a Wordpress Page Template.

    Create a template file (falbum-wp.php*) in your theme directory and add to it the template name, the header call, footer call, the Falbum javascript calls and the fa_show_photos() function call. At it's simplest, this file will look as follows:

    Remember, this is the template in it's simplest form. You may want to add other stuff like a call to your theme's sidebar or maybe you want to use your own header and footers just for this page.


    * Due to the way Falbum is currently coded, you will need to use the filename falbum-wp.php. This requirement will be removed in the future, but these details should take this into account.

  2. Create a Wordpress Page

    Login to Wordpress and go to Manage -> Pages -> Create New Page. Set the page title to what ever you want. It's not important as it's not used by Falbum in anyway.

    Under the "Page Options", select your new Falbum template from the "Page Template" drop down box and set the "Page slug" to something simple, like "photos" or "gallery". This part is important as this is the path you will be using for the Falbum, so take note of exactly what you have written for the page slug. For this example, I used "gallery".

    Save your page by clicking "Create New Page".

  3. Configure Falbum

    Now we've got the basic page setup, it's time to configure Falbum to use this page. To do this, just change your "URL Root", within the Falbum options tab, to be the "Page Slug" you used above. So, as I used "gallery" for my Page Slug, the URL Root will be /gallery/. Be sure to include the slashes.

    Save your Falbum settings, and that's it. If your .htaccess file is not writable, you will need to manually update it with the info displayed on the Falbum options page once you've saved your changes.

    This step isn't necessary, however it just makes sure your URLs are all consistant.

Now, assuming you are using Friendly URLs within Wordpress and Falbum, you should now be able to go to the slug directory of your site, eg https://colinseymour.co.uk/gallery/ and your album should be there with your custom theme.

Known Problems

  • Thumbnails are Tiny when using the K2 theme

    NOTE: If you are using the Michael Heilemann's brilliant K2 theme (as I am), you need to make a change to the style.css file supplied with K2. It has the following bit of code that breaks Falbum's thumbnail view:

    .primary img {
	margin-left: -5px;
	padding: 4px;
	border: 1px solid #ccc;
	max-width: 100%;
	}

    Just comment out the max-width: 100% line and the thumbnails will appear correctly.

    Update: The above bit about K2 may no longer apply if you use Falbum 0.5.6 and later as Eli has added an extra div to get round this problem. I don't like this div as it makes the page look crap when drop shadows are disabled, so I've commented out these lines.

  • 404 Error on Album Pages

    You may get 404 errors if you use the paging within Falbum, friendly URLs and this method. This is caused by the following line which Wordpress adds to your .htaccess file:

    RewriteRule ^(photos)/page/?([0-9]{1,})/?$ /blog/index.php?pagename=$1&paged=$2 [QSA,L]

    Just comment this out and the 404 errors in paging will stop.

  • Get "Warning: Invalid argument on line 378. in sidebar with K2 theme

    Once again, this is due to the following code in K2 sidebar.php:

    <?php /* Creates a menu for pages beneath the level of the current page */
	if (is_page()) {

    You can get rid of the error by changing it to look as follows:

    <?php /* Creates a menu for pages beneath the level of the current page */
	if (is_page() && !is_paged()) {

    I have no idea what other effect it'll have as I haven't tested the change much, but it clears the error. I also don't use the K2 sidebar on this site, instead I call a custom sidebar file when viewing my album, which I'm slowly enhancing.

  • Tab Highlighting Doesn't Work with K2 Theme

    Once again K2 is at fault here. It bases the tab highlighting on what Wordpress knows about the different pages/sub-pages. As Falbum doesn't implement Wordpress style pages or sub-pages, the tab highlighting tends to work on the album listings, but then goes back to the default tab.

    I've solved this by changing the tab selection code in the K2 header.php to the following:

    <li class="page_item <?php if ( ( (is_home()) && !(is_paged()) ) &&
    !(strpos($_SERVER['REQUEST_URI'], 'gallery')) ) { ?>
current_page_item <?php } ?>">
      <a href="<?php echo get_settings('home'); ?>">Blog</a></li>
      <?php $menu = wp_list_pages('sort_column=menu_order&depth=1&echo=0&title_li=');
          $lines = split("\n", $menu);
          foreach ($lines as $line) {
             $url = split('/', $line);
             if (substr($_SERVER["REQUEST_URI"], 1, 5) == substr($url[3], 0, 5)) {
                 $line = str_replace('page_item', 'page_item current_page_item', $line);
             }
             echo $line."\n";
         } ?>

    The only thing you'll have to change in the above code is the word gallery. You'll need to change this to the name of the tab you have implemented Falbum on, eg photos. The same excert of code can be adopted by other themes and should work as it bases the tab selection on the URL.

    Alternatively, you can add the following just above the get_header() in the file above:

    $page_id = none;    /* Change "none" to the page number for the page created above */

/* Force the page tab selection */
global $wp_query;
global $post;
if ($page_id != none) {
  $post->ID = $page_id;
  $wp_query->is_home = false;
  $wp_query->is_page = true;
  $wp_query->queried_object->ID = $page_id;
  $wp_query->queried_object_id = $page_id;
}