gregriley.net

Titles on lightbox slides in tumblr

I have now added titles to the slides in the lightbox effect used on this site. Thanks to Brant for asking me about it on a comment he made on one of my previous posts about using lightbox in tumblr, as it was something I had not considered previously, and I love a challenge.

It turned out to be pretty easy once I referred back to the lightbox2 and tumblr theme documentation. You just have to add title="{PhotoAlt}" where the {PhotoAlt} tumblr tag is derived from the caption for a photo type post.

So the new code looks like this:

The slides will now show a title at the bottom of them similar to this:

I have set up a Flickr account

I have set up a Flickr account for storing images on that I might want to publish to a Tumblr non-photo post using MarsEdit, like this:

I have previously achieved this by hosting any images I wanted to use with my domain host, by using FTP and then hand coding the links to them within the post. Using flickr is much quicker and simpler both to upload images and to use them in the posts, because MarsEdit allows for linking to a flickr account which enables drag and drop of the images into posts.

This solution is not ideal as I would have prefered either the facility to set up an external upload location for images when configuring a tumblr type weblog. Or the ability to connect to my MobileMe photo gallery from within MarsEdit.

Scripts and css files for Lightbox in tumblr themes

As I have had a lot of interest in my previous posts about adding the light box effect to a tumblr theme using LightBox2 I thought it might be worth pointing out that the Javascript and CSS files that are needed to make this run can be hosted on tumblr using their static file uploader if you do not have access to some alternate web hosting space and the ability to FTP the files to this location.

Lightbox now does slide shows in tumblr theme

Having previously added the lightbox 2 effect to my tumblr them to display individual photo post images. I wondered about adding the slide show functionality so that all the photo post images on a tumblr page could be displayed. reading through the instructions for lightbox2  it turned out that it is really simple to achieve by adding a group name to the images. The way the tumblr system loops round means that by adding the group name to the theme html once, all photos on the generated page will have the same group name. The group name is added along with the lightbox trigger like this rel=”lightbox[group_name]”

<a href=”{PhotoURL-HighRes}” rel=”lightbox”><img src=”{PhotoURL-500}” alt=”{PhotoAlt}”/>{LinkCloseTag}

<a href=”{PhotoURL-HighRes}” rel=”lightbox[photo_post]”><img src=”{PhotoURL-500}” alt=”{PhotoAlt}”/>{LinkCloseTag}

Tumblr Site Additions

Here is a list of the additions that I have integrated into this Tumblr powered site.

• Light Box effect on photo posts using lightbox2 already discussed here.
• Comments system from disqus excellent instructions on their site.
• Social networking share and bookmark tools from ShareThis.
• Creation of day pages for the Tumblr theme, linked from the little calendar dates.
• Addition of tags to the posts again using the Tumblr theme manual.
• Creation of a tag cloud using tumblr tag clouds v2 with custom css.