Art Saint James

Art Saint James is finally live after all this time. It took a long time for the artist Katie James and I to get this together between deciding on the design and photographing all the work. I’m very pleased with the result!

 

The final result is a very light and airy design. The typeface I used fits great this.  Josephin Sans is used for the titles and Josephin Slab for the sparse body copy. Both are designed by Santiago Orozco and available via Fontdeck, Typekit and Google Webfonts. The point of the website of course, is to showcase the artist work.

Speaking of the artist’s work; Katie James has a show of her sewing machine drawings at Aviary in Jamaica Plain, MA on April 5 from 6-8pm. Stop by if you’re in the area!

Robots and Monsters

I’d like me a handful of these amazingly adorable little guys.

Robots and Monsters

Full website is here: http://robotsandmonsters.org/gallery/

You can also see the complete set of Robots and Monsters on Flickr.

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.

Moleskine Drawing of a Warrior

I thought that this drawing from the Moleskine Project was fantastic:

A drawing of a Warrior from the Moleskin Project

Then I read that an eight-year-old did it. That must say something about my aesthetic.

Rotring Isograph Pen Drawings

I really do like these technical drawings of Rotring pens.

A Technical drawing of a Rotring pen



appointive
appointive
appointive
appointive