“Thanks again for doing this site — fantastic!”

“Just wanted to say thanks for creating such a great resource for the Philadelphia creative community!”

“Looking forward to the site expanding and growing even more!”

“Very cool. This may help me change my life!”

“It’s absolutely beautiful, and by far the best resource I’ve seen for connecting our community!”

In my portfolio, I describe this project as an experiment. What I mean by that is that I’m adopting an open source philosophy to the site by opening up the development process of the site. I will soon publish a public changelog so site users can see what is planned for the site, give feedback on the site, and how it has evolved. If you have any suggestions, do get in touch.

I’m really glad the site has already helped so many people and really hope it continues to help build our community. I couldn’t be more excited about this project.

So how-se work-se?

First grab jQuery and the Cycle plug-in.

Load ‘em up in the header as normal.

1
2

<script src='path_to/jquery.js' type='text/javascript' ></script>
<script src="path_to/jquery.cycle.js" type="text/javascript"></script>

And now the fun part.

Cycle has a built in trigger that can be used to target a DIV to cycle and additional triggers for DIV’s to be used as “buttons” for previous and next transitions. For multiple image only galleries, this is super easy place some images in the cycle DIV and add some Previous and Next DIV’s in your template. Then just tell Cycle which ones to use for which. But in our case we want to use a single template for single and multiple image galleries. So this won’t quite work — unless you think busted single image galleries or buttons that don’t work on a page is a good thing…

What we need to do is write some extra code that checks for the number of images on our page and then dynamically add our navigation.

The Check

jQuery has a built in core function called .length. Guess what it does? That’s right checks the number of elements in an object. All we need to do is create a variable to hold this number and then test it to see if it’s larger than 1.

Here we go.

1
2
3
4
5

var img_no = $('#gallery . *').length;
 
if( img_no >= 2 ) {
     $('#img-nav').append("<span id='prev'>Previous Image<\/span> / <span id='next'>Next Image<\/span>");
}

Here, I’ve created a variable called img_no and its value is set to the total number of all elements (* = all) within a DIV I’ve given the ID of gallery. I then take this number and first check to see if it is larger or equal to 2. If it is true, I then use another jQuery function called append to add a chunk of HTML to our page within an empty DIV called img-nav — one span with the ID of previous for our previous button and one span with the ID of next for our next button.

Wiring it all up

Now that we’ve got our check set in place all we’ve got left to do is tell cycle what to cycle and what to use as our buttons.

1
2
3
4

$('#gallery').cycle({
    next:   '#next', 
    prev:   '#prev'
});

The first part $('#gallery').cycle tells our page to to use the gallery DIV as our cycle. Next, I use the built previous and next functions using next: and previous: and tell each of them to trigger their respective ID’s.

And viloa, single template gallery. That simple.

Let’s have a look…

The WP function get_lastpostmodified() retrieves the last time a post was modified. But that’s it, it just retrieves the value. To get it to show up, just echo the function.

1

<?php echo get_lastpostdate(); ?>

You now should have something like this:

2009-11-10 11:38:47

That’s the raw date format from the database, but with a little more PHP we can take this value and make it pretty. As you probably can guess, we’re going to use the PHP Date function.

Here’s our code:

1

<?php echo date("F j, Y", strtotime(get_lastpostmodified())); ?>

Ok so what’s all that…

We call the PHP Date function with date — pretty obvious, I know. Next we tell it what format we want — I’m using F j, Y but there’s a lot more ways you can output this — check the function reference to find the format you want. Our example will give us a format like this: November 13, 2009. The important parts of this are the alphabetic characters; commas, dashes, spaces are optional.

Next we use the WordPress function get_lastpostmodified as a value for strtotime. The strtotime takes then takes our value, expects be a US English timestamp and then tries to parse it to a UNIX timestamp. The UNIX timestamp then can be formatted with our F j, Y and the date function tells it how to be handled.

No clunky plug-ins to manage, just a single line that does it’s thing. Pretty simple right?