Gallery of Doodles in Lightbox 2

NerdStarGamer now has a new Gallery page that features my doodles:

Screenshot of Doodle Gallery

All of the images have been set up as a list of thumbnails which use Lightbox 2 to display large versions.

I spent a little extra time to set up Lightbox on this blog without using a plugin. I’ve been on a steady crusade to get rid of most of my plugins for quite some time. Setting up Lightbox in WordPress was fairly straightforward.

After downloading the Lightbox 2 files, I created a new directory in my template directory called lightbox and dropped all of the lightbox files into it. I then put a function call into the header.php file right before the line that reads <?php wp_head(); ?>.

<head profile="http://gmpg.org/xfn/11">
    ...some other tags...

    <?php AKM_include_lightbox(); ?>
    <?php wp_head(); ?>
</head>

The AKM_includ_lightbox(); function is just a short little function that I wrote and put in the functions.php file of my template. Here is the function:

function AKM_include_lightbox() {
    $lbDir = get_bloginfo('template_directory') . "/lightbox";

    // Echo out some file path variables for images used lightbox JS
    $output = '<script type="text/javascript">' . "\n";
    $output .= "\t" . 'var tplDir = "' . $lbDir . '";' . "\n";
    $output .= '</script>' . "\n";

    // Echo links to js and css for lightbox
    $output .= '<script type="text/javascript" src="' . $lbDir . '/js/prototype.js"></script>' . "\n";
    $output .= '<script type="text/javascript" src="' . $lbDir . '/js/scriptaculous.js?load=effects,builder"></script>' . "\n";
    $output .= '<script type="text/javascript" src="' . $lbDir . '/js/lightbox.js"></script>' . "\n";
    $output .= '<link rel="stylesheet" href="' . $lbDir . '/css/lightbox.css" type="text/css" media="screen" />' . "\n";

    echo $output;   
}

This first line of the function sets up a variable that includes the path to the Lightbox files inside my template directory. This is necessary because the lightbox.js file needs to reference the images included in the Lightbox folder. Without this part, the previous, next and close images will not show up because the link will be going to your WordPress uploads directory.

That second chunk of text in the function echos out a small bit of JavaScript into your header that simply declares the variable tplDir and sets it to the path to your LightBox installation. The last chunk of text inserts all of the necessary Lightbox JavaScript and CSS links into your header. I could have written all of this directly into the header.php file, of course, however I felt that my file was getting a bit messy and that this approach was much more clear.

We also need to make a small edit to the lightbox.js file which is going to use that tplDir variable we set. Find the line in the beginning of the file like this (around line 49):

fileLoadingImage:        'images/loading.gif',     
fileBottomNavCloseImage: 'images/closelabel.gif',

Simply change those two lines to this:

fileLoadingImage:        tplDir+'/images/loading.gif',     
fileBottomNavCloseImage: tplDir+'/images/closelabel.gif',

That completes the Lightbox 2 setup in WordPress without using a plugin. Now all you have to do is add the rel="lightbox" tag to any link you want to use Lightbox. For example, if you have a thumbnail image that links to a larger image like this:

<a href="images/full-size-image.jpg"><img src="images/thumbnail" /></a>

To add the Lightbox effect, just add in the attribute like this:

<a rel="lightbox" href="images/full-size-image.jpg"><img src="images/thumbnail" /></a>

Be sure to check out the Lightbox 2 page for more information on what you can do with it.

WordPress 2.3.1 Plugin Incompatibility

I upgraded to WordPress 2.3.1 last week and for the most part, all seemed to go well. Even though I’m not actually displaying any tags for my posts yet, I wanted to get upgraded quickly so that I could start working on generating tags for new and old posts. It’s going to be a lot of back-breaking labor to get caught up (okay fine, slight exaggeration).

I noticed a couple of days ago that when I tried to post to the site using the Textmate blogging bundle, I was getting the following error at the top of the window.

Received exception:Missing return value!

Normally when you post successfully from TextMate, all sorts of metadata is appended to the top of you post in TextMate, including the permalink for the post. It also automatically opens a new tab to the post in your web browser.

When I started getting this error both the permalink appending and web browser page opening functions stopped working. Oddly enough, the entry was still actually posted to my blog. I immediately assumed that this error had something to do with the new tagging features and that maybe the TextMate blogging bundle wasn’t quite up to snuff. No problem, Google to the rescue.

Amazingly, my Google searches turned up almost nothing useful on the subject. Eventually, I recovered one tiny little detail using “wordpress 2.3 xmlrpc error” as my search term.

The solution appears in a comment by Daniel Jalkut on the Red Sweater Blog.

…my first reaction when I see that kind of vague error is that a plugin in your WordPress installation is incompatible with WP 2.3. By any chance are you running the Google Sitemap Generator plugin? It’s one that has been identified by a few users as needing update after going to 2.3. See:

http://www.red-sweater.com/forums/viewtopic.php?id=424

If you’re not running that, it could be another plugin. Generally the “XML-RPC Response Parsing Failed” happens when some plugin causes the entire fetch to fail, so WordPress just returns a blank response instead of an XML document.

While the error in question was actually somewhat different than mine, I do in fact use the Google Sitemap plugin. I disabled the plugin and tried posting again. Bingo, problem solved.

UPDATE: The version of the Google Sitemap plugin that was giving me this problem was 2.7.1. My WordPress install indicated that there wasn’t an update for this plugin, but when I actually went to the site I found that there was one. The new version is 3.0.1 and seems to work fine. The admin interface also looks much better.

Creating An Archives Page In WordPress

In my most recent blog design I’ve created a single page for all of my post archives. Previously, I had links to my monthly archive pages in the sidebar. After blogging for about 14 months, this list became a little bit unwieldy. My solution was to move the entire archives section out of the sidebar, and into its own page. The archives page is now more prominently linked from the main navigation bar.

Unfortunately, doing all of this in WordPress is not quite as straightforward as one might hope. Now that I have mine all set up, I figured I’d post a walkthrough of how to set up something like my archive index page.

Get A Plugin To Do the Dirty Work

Unless you’re interested in writing the PHP code and MYSQL queries to retrieve all of your archives in an organized fashion, a plugin is the way to go. After a quick Google search, I found the SRG Clean Archives plugin. This plugin is quite nice I’ve found. It’s realatively easy to implement and also (and importantly), it’s also very easy to modify to fit your site design.

The plugin will give you a list of all your post titles, organized by month. There is also the nice feature where the post titles begin with a post date. Check out the clean archives demo page for an example.

Simply install the plugin like any other normal plugin and then activate it.

Set Up the Archive Page In WordPress

The next step is to set up the actual archive page in WordPress. There is a tutorial in the WordPress codex about how to do this called Creating An Archive Index. I’m just going to briefly outline the steps here.

archives.php

Open your archives.php file. If you’re using a basic template, then this file probably already exists. If you’re using the default Kubric theme, your archives.php file will look like this:

<?php
/*
Template Name: Archives
*/
?>

<?php get_header(); ?>

<div id="content" class="widecolumn">

<?php include (TEMPLATEPATH . '/searchform.php'); ?>

<h2>Archives by Month:</h2>
    <ul>
        <?php wp_get_archives('type=monthly'); ?>
    </ul>

<h2>Archives by Subject:</h2>
    <ul>
         <?php wp_list_categories(); ?>
    </ul>

</div>

<?php get_footer(); ?>

As always, I would suggest making a backup of this file before changing anything. Now modify the archives.php file to look like this:

<?php
/*
Template Name: Archives
*/
?>

<?php get_header(); ?>

<div id="content" class="widecolumn">

</div>

<?php get_footer(); ?>

If you’re using your own template (like I am), then you may need to either update or create the archives.php file to make sure it is consistant with your blog design. A good starting place for this is to simply copy your single.php file to your archives.php. Now, delete the entire “loop”.

Note on Page Templates You can create any kind of page template you want. All you need to do is insert the following code at the very top of your PHP file.

<?php
/*
Template Name: template-name
*/
?>

Make sure your archives.php file starts with these lines, or else you’ll be banging you head against the monitor trying to figure out while ‘Archives’ isn’t listed as an option in the Page Template dropdown menu. Believe me, I speak from experience.

Create A Page In WordPress

Now have to set up a plain old page in WordPress.

  1. Login to the WordPress Admin area
  2. Go to Manage -> Pages
  3. Click Create a new page
  4. Enter an appropriate title. This will be the title of your archive index page.
  5. Leave the content area blank
  6. In the Page Template box, select Archives.
  7. In the Page Slug box. Type something suitable as this will be the permalink for your archives page (http://www.your-blog-name.com/page-slug/).
  8. Click Save.

Now obviously, you have to create a link to your new archives page. We already set it up, complete with the URL. Yours should be in the form of http://www.your-blog-name.com/page-slug/. Just make a link to it somewhere on your site.

Call the Plugin

As you’ll notice, our fancy Archive Index is empty. In order to get all of our archives in there, we have to use a simple PHP function to call the SRG Clean Archives plugin.

Open your archives.php file again. Find this section of the page:

<div id="content" class="widecolumn">

</div>

Now add the following PHP function to call the plugin:

<div id="content" class="widecolumn">
    <?php srg_clean_archives(); ?>
</div>

Save the archives.php file and refresh your browser. You should now see a nice list of all of your archives.

Customization

As I noted earlier, the SRG Clean Archives plugin is nice because it’s easy to modify if you want to. The Clean Archives website is well documented and the plugin contains a readme file explaining this as well.

The default style for SRG Clean Archives is to output the month and year, surrounded by <strong> tags. You might want something else, like a list or header tags.

To change this, open the srg_clean_archives.php file in your plugins folder and find the following line:

 echo get_archives_link($url, $text, '','<strong>','</strong>');

Modify the strong tags to suit your needs. For example, mine now looks like this:

 echo get_archives_link($url, $text, '','<h2 class="archivemonth">','</h2>');

You can find more information about this on the SRG Clean Archives plugin website.

SRG Clean Archives also provides you with class names so that you can style list however you want in your CSS. I’ve added the following styles to mine:

/* For Archive page */
h2.archivemonth {margin:30px 0 0 0;padding:0;}
    h2.archivemonth a:visited {color:#9db550;}
ul.archivelist {border-bottom:1px #ddd solid;list-style:none;margin:0;padding:0;}
    ul.archivelist li {border-top:1px #ddd solid;}
        ul.archivelist li a {display:block;padding:2px 0 0 20px;}
        ul.archivelist li a:link, ul.archivelist li a:visited, ul.archivelist li a:active {color:#000;}
        ul.archivelist li a:hover {background-color:#eee;color:#000;text-decoration:none;}

 

Note: I changed SRG’s default class name from ‘postpermonth’ to ‘archivelist’.

That’s All

Well, that’s pretty much it. I hope you guys find this useful. Feedback and corrections are always appreciated.

Update 2/25/09: This method was tested and works on SRG Clean Archives version 2.1. This version is old! Please check out all of the feature upgrades for the plugin from it’s home page. If you still want to proceed with my method, you can download the plugin here:



appointive
appointive
appointive
appointive