One of the big new features that came in Movable Type 4 was the Asset Manager — a central location for maintaining the files you upload to your blog. Asset Manager gives you an admin for uploading, tagging, labeling, and deleting your files. It also comes with a rich set of template tags for publishing your assets. Combined with a bit of JavaScript, the Asset Manager can easily produce a beautiful photo gallery.
There’s any number of JS or Flash photo galleries you can use. For this example, I’ve chosen Galleria, a jQuery-based photo gallery. It degrades well in the absence of JavaScript or CSS, allows linking to individual files, and looks beautiful out of the box.
To get started, download Galleria (it includes jQuery) and upload the CSS file, the jquery.min.js file and the jquery.galleria.js file to your server. Create a new index template, name it whatever you want, and populate it with this template code. You’ll likely have to modify the CSS <link> and the <script> tags to point to where you uploaded your files, and of course change the titles and text to whatever you want.
This template is based on the example that comes with Galleria. If you’re comfortable with JS and want to customize the look and behavior of your gallery, I recommend you read the Galleria options documentation, then take a look at the JS code in the template. There’s almost no end to the ways you could modify the transitions, thumbnail appearance, and other details.
Towards the end of this template is where the Asset Manager does it’s work. Let’s look at those lines:
[html]
title=”
[/html]
The classes and ids we use here are for the benefit of Galleria. You can change those, as long as you also change them in the script code earlier in the template. The code is pretty simple: create an unordered list, then loop through our assets:
[html]
This is where we start our assets loop. We’re saying we want up to the last 20 assets of type “image” that have the “historical” tag. Of course, you’ll want to change that to whatever tag you’ve used for your photos. Or you can leave it off to get all images in your asset manager. Other assets attributes allow us to filter based on author or file extension, or sort by various settings.
Each iteration of the loop creates a list item:
[html]
Here, we’re using a loop meta variable — __first__ — to add a class to the first list item we output. That will make the photo show up as the main photo when someone first visits the page.
Then we output our <img> tag:
[html]” title=”
And that’s it. Put in an output path for your template, then save and publish it. If the template is finding the CSS and JS files, you should get a gallery like this one.
As I mentioned before, you can use MT’s Asset Manager with any number of existing photo galleries, or you could create your own from scratch. There are many asset-related template tags that give you access to all your files’ data. MT can also generate thumbnails on the fly and cache them for future use.
Have you created your own photo gallery with the MT Asset Manager? Tell us about it in the comments.
