Feature
Post

Category
Code


Creating a Photo Gallery Using jQuery and the MT Asset Manager

Movable Type Asset Manager

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:

<div class="demo">
<div id="main_image"></div>
<ul class="gallery_demo_unstyled">
<mt:Assets lastn="20" type="image" tag="historical">
<li<mt:if name="__first__"> class="active"</mt:if>>   
      <img src="<mt:AssetURL>"
           alt="<mt:AssetLabel escape="html">"
           title="<mt:AssetLabel escape="html">" />
   </li>
</mt:Assets>
</ul>
<p class="nav"><a href="#" onclick="$.galleria.prev(); return false;">&laquo; previous</a> | <a href="#" onclick="$.galleria.next(); return false;">next &raquo;</a></p>
</div>

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:

<mt:Assets lastn="20" type="image" tag="historical">

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:

<li<mt:if name="__first__"> class="active"</mt:if>>

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:

<img src="<mt:AssetURL>" alt="<mt:AssetLabel escape="html">" title="<mt:AssetLabel escape="html">" />

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.


  1. By Eric Anderson posted on July 7, 2008 at 11:03 pm
    Want an avatar? Get a gravatar! • You can link to this comment

    Great tutorial – this will come in very handy indeed! Thanks!

  2. By ant0ine posted on July 8, 2008 at 10:08 am
    Want an avatar? Get a gravatar! • You can link to this comment

    Great tutorial, thanks! An interesting variant can be loop over the assets with mt:Entries and mt:EntryAssets. This way every photo get a permalink with comments and trackbacks, and the categories become the photo albums.

  3. By A posted on July 10, 2008 at 4:00 pm
    Want an avatar? Get a gravatar! • You can link to this comment

    ant0ine, could you explain how to do that?

  4. By ant0ine posted on July 11, 2008 at 3:38 am
    Want an avatar? Get a gravatar! • You can link to this comment

    On my photoblog (http://blog.ant0ine.com/photos/), I create an entry for each photo, and then for the index page, I use mt:entry to loop over the entries, and for each entry mt:entryassets to get the photo included in the entry. But for now it’s all static, no javascript effect, I’ll see if I can use jQuery.

  5. By gossard posted on July 11, 2008 at 11:31 pm
    Want an avatar? Get a gravatar! • You can link to this comment

    Great tutorial, thanks! An interesting variant can be loop over the assets with mt:Entries and mt:EntryAssets. This way every photo get a permalink with comments and trackbacks, and the categories become the photo albums.

  6. By Andrea Asti posted on July 20, 2008 at 10:10 pm
    Want an avatar? Get a gravatar! • You can link to this comment

    I am new to MT4; i made page one of the gallery as above, but i do not know how to add other sections to the gallery in the same blog. i.e. another similar gallery for ‘portraits’ which would be linked from the first page.

  7. By Billy Mabray posted on July 24, 2008 at 12:31 pm
    Want an avatar? Get a gravatar! • You can link to this comment

    Andrea, this particular technique uses an index template. To create another, you would need to copy that template to a new index template and change the tag used to “portraits” (or whatever else you want to use) . You’ll then need to add your own link to the other gallery.

  8. By Q posted on July 24, 2008 at 10:12 pm
    Want an avatar? Get a gravatar! • You can link to this comment

    Is there a way to add numbered pagination instead of thumbnails? I.e. 1 2 3 4 5 6 … n links under main image?

  9. By Flüge Miami posted on August 7, 2008 at 6:16 am
    Want an avatar? Get a gravatar! • You can link to this comment

    Very well then! This is a really nice peace of work you have done. It opens many possibilities for our website. Thank you!

  10. TrackbackMovable Type Monday: Poll Position, Photo Galleries and TinyMCE : The Blog HeraldMovable Type Monday: Poll Position, Photo Galleries and TinyMCE : The Blog HeraldMovable Type Monday: Poll Position, Photo Galleries and TinyMCE : The Blog Herald