<< kingdom of squirrels

A PHOTOLOG IN FIVE EASY STEPS
(or at least, my version of it)

This little MovableType photo-weblog ("photolog") tutorial is the result of a request (gentle prod?) from another Minnesota weblogger who was curious how I did my implementation. I am sure there are many ways to do a photolog, this is merely one of them and it came about after much searching of other weblogs and hanging out in the MovableType Support Forums. Thanks to all who came before me!

There is a method of working with MT that goes along with these instructions. It is not hard to do, just follow along and you'll be zipping around in no time.
To summarize the method: Main image goes in Main Entry Text. Description or photo information goes in Additional Entry Text. Thumbnail (preview) image goes in Excerpt.

Note that I use my photolog as a portion of my main weblog (the right side column) and I incorporate it via Server Side Includes (SSI). I will assume you know what SSI is and how to use it. If not, search Google or visit your library or book store. You do not need to do your photolog with SSI and you can skip the last two steps safely.

This tutorial does not deal with design or CSS. That is up to you.

Finally, before we get to the juicy bits, make sure you have all the extras installed for MovableType. You should have Image::Magick available for use. It will make your life easier and quicker by creating image thumbnails for you when you upload.


Step One:
Create a new weblog in MovableType. I'll make an assumption that you know how to do this already. If not, read the MT manual. It really is an enjoyable read and is one of the better software manuals I have seen. Set your preferred archive type (in Configuration/Preferences) to Individual.

Step Two:
Set up your templates for your photolog. Ooops, it just got harder (at least from a design angle). Don't worry, just tweak the existing templates if necessary.
Since our method involves putting images in certain locations (Main, Excerpt) we need our templates to be updated accordingly. Note that in the main index template we are not showing the full-size image, only the thumbnail, so we don't use the <MTEntryBody> tag anywhere. Instead we use the <MTEntryExcerpt> tag. Once the viewer clicks on the thumbnail or the individual entry link they see the full-size image.

Main Index template should contain code that looks something like this (note lines 09-14):
<MTEntries>
<MTDateHeader>
<div class="date">	
<$MTEntrydate format="%B %d, %Y"$>
</div>	
</MTDateHeader>
<div class="blogbody">
<a name="<$MTEntryID pad="1"$>"></a>
<div class="thumb"><a href="<$MTEntryLink$>#<$MTEntryID pad="1"$>"><$MTEntryExcerpt$></a></div>
<div>
<span class="title"><$MTEntryTitle$></span>
<MTEntryIfExtended>
<span class="extended"><$MTEntryMore$></span>
</MTEntryIfExtended>
</div>
<div class="posted">posted by <$MTEntryAuthor$> at <a href="<$MTEntryLink$>#<$MTEntryID pad="1"$>">
<$MTEntryDate format="%I:%M %p"$></a>
<MTEntryIfAllowComments> | <a href="javascript:OpenComments(<$MTEntryID$>)">Comments 
(<$MTEntryCommentCount$>)</a></MTEntryIfAllowComments>
</div>
</div>
</MTEntries>
Save after editing your templates, of course.

Individual Entry Archive template should contain code that looks something like this (note we are not using the Excerpt/Thumbnail here):
<span class="title"><$MTEntryTitle$><br /></span>
<br />
<$MTEntryBody$><br />
<a name="more"></a>
<$MTEntryMore$>
<br />
<span class="posted">Posted by <$MTEntryAuthor$> on <$MTEntryDate format="%B %e, %Y"$></span>
</div>
<MTEntryIfAllowComments>
Save and rebuild.


Step Three:
Upload a file. This is the easiest part. Pick your image and upload it to your [local site] or [archive path] area according to your whims.


Step Four:
upload.gif

Click "Create a new entry..." in the pop-up window. This is an important little trick: make note of the image dimensions in the thumbnail section. This is the width/height of the image you just uploaded. As soon as you click the "Create a thumbnail..." button and enter a number, those numbers go away. You need to know them (to code proper HTML, that is. You can ignore them as you wish). Ok, remember the numbers? Click "Create a thumbnail..." and then click the "Constrain Proportions" button as well. Enter your desired width (I like 96 pixels, in case you were wondering). Now click the "Embedded Image" button.


Step Four-dot-one:
Your Main Entry Text will look something like this:

imgcode.gif

Since you're making an embedded image, you don't care about the <a href...></a> tags. Delete 'em. Leave the <img...> tag as it is. Copy the resulting code and then paste it into the Excerpt box.


Step Four-oh-two:
Go back to your Main Entry Text and remove the "-thumb" from the filename. Replace the thumbnail dimensions (width/height) with the full-size image dimensions. You did remember them, right? If not, a quick way to find them is to copy your img src URL, open a new browser window and paste in the URL. The browser title will show the width and height of your image.


Step Four-and-three-quarters:
Enter some descriptive text or photo information into the Additional Entry Text area or just leave it blank.


Step Five:
I knew we could do it in just five steps! Set the other entry options as desired and save your entry! Your screen should look something like this:

fullentry.gif


Congratulations! If everything worked as expected, you should now a have a photolog of your own. Now you just need to go in and tweak the design/code to make it look the way you desire.

photoblog.jpg

What about that SSI stuff I mentioned in the beginning? Oh yeah...

If you want to incorporate your most current thumbnails into your main weblog you need to do a few more things.

Step Six:
Create a new Index Template and call the output file, say, "photolog.txt"
In that template, enter the following code (yes, it is only six lines):

<MTEntries lastn="10">
<a name="<$MTEntryID pad="1"$>"></a>
<span class="preview">
<a href="<$MTEntryLink$>"><$MTEntryExcerpt$></a>
</span>
<br />
</MTEntries>
Change the <MTEntries lastn="10"> to be however many thumbnails you want to see.


Step Seven:
In your main weblog index (the one with all the words in it, probably), enter the following code in the desired location:
<!--#include virtual="path/to/this/file/photolog.txt"-->
Save and rebuild your index and make sure your index has the ".shtml" extension or make sure your webserver will parse non-shtml files.

Voila! Photolog pictures in your main weblog that are clickable and take you to the Individual Entry of each picture.

Enjoy!
If this helps you out, send me a cool postcard or burn me a mix CD of your favorite songs (and tell me why they are). And let me see your photologs!

Thanks.
-jeremy (at) minnescoota (dot) com