One of the most common technical questions I get regarding my photoblog is how I went about setting up the "b-list" entries. The b-list is a supplemental section of my photoblog that acts as a repository for my out takes, and a convenient place to post gallery-style entries with multiple embedded photographs. Instead of setting up separate gallery software for this task, I decided to keep things integrated and do it entirely with Movable Type.
There were several reasons why I decided to do this. First was the convenience factor -- I can manage everything using one piece of software instead of multiple, disparate interfaces. It also allows me to easily (and automatically) associate each gallery with a particular photoblog post. There is no need to learn a new templating system, and comments and trackbacks are preserved site-wide.
In this article, I'll describe the basics of setting this up. This technique can be used to create an independent"gallery-style" photoblog, or can be integrated with a typical "one image, one entry" blog as a repository for supplemental images that you would like to group together in a single post. This article covers only the gallery blog itself -- integration can be accomplished in a variety of ways, and is beyond the scope of this document. If there is enough demand, I'll write a follow-up article in a future issue detailing how I did it.
This article makes a couple of assumptions -- first, you should already have Movable Type installed, and have created a new blog. You should also have some basic knowledge of MT templates and installing MT plugins. Basic MT setup, plugin installs, and templating is beyond the scope of this tutorial. You should also have FTP access to your server, so you can upload your images in batches
Once you've got MT installed and a new blog created, you're going to need at least two plugins to make this all possible. The first is Brandon Fuller's awesome MTPhotoGallery plugin (download, install instructions). This tutorial is based on, and expands upon the techniques described in his examples. The second is Brad Choate's MTEmbedImage plugin (download, install instructions).
Optionally, if you would like to spread your images across multiple pages within a single post (example), you'll also need Stepan Riha's MTPaginate plugin (download, homepage) and have your page extensions set to .php. Also, if you would like to free up your "Excerpt" field (hint: this can then be used later for integration as I mentioned above), you'll want to get Dave Dribin's handy MTEntryShortTitle plugin (download, homepage) as well.
1. Once your blog has been set up and the plugins installed, open up your blog in Movable Type. Go to Weblog Config -> Archiving and make sure you have Individual archives selected. Then change the Archive File Template for your Individual entries to:
<$MTEntryShortTitle dirify="1"$>/index.php
or alternatively, if you do not have MTEntryShortTitle installed, you can use the excerpt field instead:
<$MTEntryExcerpt$>/index.php
The reason we're doing this is because we're going to store our uploaded images and the entry's HTML in the same directory. That way you can just create the directory on your server with your FTP client, and upload the files in to that directory. Then when the post is built, the plugins will scan the post's directory and automatically create the gallery for that post.
2. Create your basic individual archive template (Templates -> Archive-Related Templates -> Individual Entry Archive) and customize it to suit the design of your site. In addition to your usual MTEntryTitle, MTEntryBody, and comments code, incorporate the following code in to your template:
<MTPaginate> <MTPaginateContent max_sections="12"> <MTPhotoGallery exclude=".THUMB" path="[MTEntryShortTitle]"> <MTEmbedImage basename="[MTPhotoGalleryImagePath]/[MTPhotoGalleryImageFileName]" width="170" thumbsuffix=".THUMB"> <a href="http://yoursite.com/photoblog/show.php?src=<MTPhotoGalleryImageLink>" onclick="window.open('http://yoursite.com/photoblog/show.php?src=<MTPhotoGalleryImageLink>','popup', 'width=<MTEmbedImageWidth>,height=<MTEmbedImageHeight>,scrollbars=no,resizable=no, toolbar=no,directories=no,location=no,menubar=no,status=no,left=0,top=0'); return false"> <img src="../<MTEmbedImageThumbFilename>" border="0" width="<MTEmbedImageThumbWidth>" height="<MTEmbedImageThumbHeight>" alt="<MTEmbedImageFilename>" class="gallery-thumbnail" /></a> </MTEmbedImage> <$MTPaginateSectionBreak$> </MTPhotoGallery> </MTPaginateContent> <MTPaginateIfMultiplePages> <div class="paginate"><$MTPaginateNavigator style="links" format="Page %d" $></div> </MTPaginateIfMultiplePages> </MTPaginate>
You can modify the number of thumbnails to appear on each page by changing the max_sections value in the MTPaginateContent tag.
The white and blue MTPaginate tags are optional. Paginating your gallery across multiple pages can be handy if you plan on having many photographs in a single entry. However, if you aren't planning on paginating your gallery (and are confused over which code to remove) here's what the gallery code would look like without pagination:
<MTPhotoGallery exclude=".THUMB" path="[MTEntryShortTitle]"> <MTEmbedImage basename="[MTPhotoGalleryImagePath]/[MTPhotoGalleryImageFileName]" width="170" thumbsuffix=".THUMB"> <a href="http://yoursite.com/photoblog/show.php?src=<MTPhotoGalleryImageLink>" onclick="window.open('http://yoursite.com/photoblog/show.php?src=<MTPhotoGalleryImageLink>','popup', 'width=<MTEmbedImageWidth>,height=<MTEmbedImageHeight>,scrollbars=no,resizable=no, toolbar=no,directories=no,location=no,menubar=no,status=no,left=0,top=0'); return false"> <img src="../<MTEmbedImageThumbFilename>" border="0" width="<MTEmbedImageThumbWidth>" height="<MTEmbedImageThumbHeight>" alt="<MTEmbedImageFilename>" class="gallery-thumbnail" /></a> </MTEmbedImage> </MTPhotoGallery>
I use a css class called "gallery-thumbnail" to put a nice border around the thumbnails and make sure they wrap to the next line. This will only work if your template encapsulates the above code within a fixed-width css box (or table cell). Depending on the width of your box/cell, you may have to change the spacing or size of the thumbnails to suit your design. My gallery-thumbnail class looks like this:
.gallery-thumbnail {
float: left;
width: 175px;
border: 1px solid #000;
margin: 0 3px 5px 2px;
padding: 4px;
background-color: #FFF;
}
Assuming your container box is 760 pixels wide, this will give you four thumbnails across, each 170 pixels wide with a 5 pixel border. If you're not using a fixed-width container, then you may have to explore alternate methods for formatting your thumbnails (such as Brandon Fuller's example of using MTPhotoGallery with the Grid plugin) instead.
3. Create your Index, date-based, and/or category templates next. Again, your basic template tags should be in place for all of these. You could just incorporate the above code in to your index template, and that would be it. I have not tried this out however.
Instead, I like to display the last ten posts, accompanied by a random thumbnail from each on the main index. This can be accomplished thanks to the sort_order attribute of MTPhotoGallery. Here's how I do it (minus the css):
<$MTEntries lastn="10">
<$MTEntryTitle$>
<MTPhotoGallery sort_order="random" extension="THUMB.jpg" path="[MTEntryShortTitle]">
<a href="<MTEntryLink>"> <img src="<MTPhotoGalleryImageLink>" alt="<$MTEntryTitle$>" width="175" class="gallery-thumbnail" /></a>
</MTPhotoGallery>
<$MTEntryBody$> </MTEntries>
You could also add your comments links to each entry if felt like it.
4. Now that your templates are set up, you're pretty much ready to get started with your gallery blog. You just need to add the image viewer popup to your site. This is just a simple javascript page from the MTPhotoGallery site to display the full-size images in a separate window. Just copy this code and save it to your blog's root directory as show.php (or show.html if you don't use php).
Next, you just have to upload some photographs and create your first entry.
Now that the templates and full-size image viewer are in place, you can get ready to post your first multi-image entry.
1. First, you should decide on the title of your post and any entry text as you normally would. Here's an example entry I put up on my site:
2. You should also think of a simple one-word title for the post. This will be used for the name of the directory you will upload your images in to, as well as the "MTEntryShortTitle" for the post's URL.
If you are using the MTShortTitle plugin for your Archive File Template, you can simply add the directory name in the keywords field using square brackets. Here's an example for the above post.
If you decided not to use the Short Title plugin and used the Excerpt for your Archive File Template, then simply add the single-word title in the Excerpt field:
3. Don't submit your post yet, as you don't have any photographs uploaded! Instead, open up your FTP client and connect to your server. Create a directory that has the same name as the short title you used in step 2 (in this case, the directory would be called "shower").
Then just upload all of the images you would like to be in the gallery in to that directory.
4. When you submit your post, the MTPhotoGallery plugin will work its magic. MTEmbedImage will automatically create the thumbnails for you, and MTPaginate will split your single post across multiple pages (if required) to keep things clean.
5. Each time you want to create a new gallery, just create the directory and upload your pics. Then when you go to post your entry, just enter the directory name in the ShortTitle or Excerpt section of the post form. The plugins take care of the rest, quick and easy.
To see the results of the above steps, click here.
Assuming you've already got some proficiency with MT templates, you should now have a decent, easily updated gallery-style photoblog. With a little extra tweaking, you could even integrate this with a traditional "one image, one entry" photoblog, or regular text blog.
If you found this tutorial useful, let me know so I can see your site. And feel free to link back to me of course. ;) If you have any questions, you can contact me at jon at groundglass dot ca.
Finally, and most of all, if you use the plugins mentioned in this article, please consider making a donation to their respective authors.
