Instructions for creating this photoblog

I've been asked a number of times how I created this photoblog in MT and having made some tweaks which simplify things no end I thought it was time to share. I daresay it could still be improved, so suggestions are welcome.

The album pages are created using the Category archive template (each album is stored in its own directory) which includes a javascript file to swap the images for the rollovers. The code to display the images is stored in two template modules which are incorporated by use of a plugin. I should say at this point that I'm guilty of the cardinal sin of having only tested it in IE, but feel free to let me know of your experiences in other browsers (nicely though�.)

STEPS
1. Create a new Weblog and update Weblog Config to save each album in its own directory
The entries broadly fall into two types, those with a Landscape or Portrait orientation. Each collection of photos is automatically saved in its own directory which means I can call each set PIC1-01, PIC2-01�etc. The thumbnails are PIC1-02, PIC2-02�and so on.

To achieve this you need to go to your Weblog Config and choose Archiving. Make sure Archive type �Category� is selected and in the Archive File Template box insert the text:

<$MTArchiveCategory dirify="1"$>/index.html

which will create a new directory using the category name (spaces will be replaced by an underscore) in your archives directory when each entry is saved. The entry in each directory will be named index.html.

2. Create javascript file for rollovers
Copy the following code into a file in Notepad, save as album.js and upload this to your archives directory.

var imga = new Image();
var img1 = new Image();
var img2 = new Image();
var img3 = new Image();
var img4 = new Image();
var img5 = new Image();
var img6 = new Image();
var img7 = new Image();
var img8 = new Image();
var img9 = new Image();
var img10 = new Image();
var img11 = new Image();
var img12 = new Image();
var img13 = new Image();
var img14 = new Image();
var img15 = new Image();

imga.src = "PICA-01.jpg";
img1.src = "PIC1-01.jpg";
img2.src = "PIC2-01.jpg";
img3.src = "PIC3-01.jpg";
img4.src = "PIC4-01.jpg";
img5.src = "PIC5-01.jpg";
img6.src = "PIC6-01.jpg";
img7.src = "PIC7-01.jpg";
img8.src = "PIC8-01.jpg";
img9.src = "PIC9-01.jpg";
img10.src = "PIC10-01.jpg";
img11.src = "PIC11-01.jpg";
img12.src = "PIC12-01.jpg";
img13.src = "PIC13-01.jpg";
img14.src = "PIC14-01.jpg";
img15.src = "PIC15-01.jpg";

function imgSwap1() {
document.imga.src=img1.src;
}
function imgSwap2() {
document.imga.src=img2.src;
}
function imgSwap3() {
document.imga.src=img3.src;
}
function imgSwap4() {
document.imga.src=img4.src;
}
function imgSwap5() {
document.imga.src=img5.src;
}
function imgSwap6() {
document.imga.src=img6.src;
}
function imgSwap7() {
document.imga.src=img7.src;
}
function imgSwap8() {
document.imga.src=img8.src;
}
function imgSwap9() {
document.imga.src=img9.src;
}
function imgSwap10() {
document.imga.src=img10.src;
}
function imgSwap11() {
document.imga.src=img11.src;
}
function imgSwap12() {
document.imga.src=img12.src;
}
function imgSwap13() {
document.imga.src=img13.src;
}
function imgSwap14() {
document.imga.src=img14.src;
}
function imgSwap15() {
document.imga.src=img15.src;
}

3. Create template modules
The next step, using the code below, is to go to Templates and create two new template modules, one for each picture orientation. Mine are imaginatively called Landscape (12 thumbnails) and Portrait (15 thumbnails)!

Note: If you modify the modules to display more than 15 images then you will have to add some extra lines to the javascript file.

Photo sizes incidentally for Landscape are 320x240 and 80x60 and 240x320 and 60x80 for Portrait. If these aren't suitable then just alter the sizes in the modules.

Code for Landscape module (12 thumbnails)

<img align="left" hspace="10" src="PIC1-01.jpg" alt="Move the mouse over the thumbnails on the right..." NAME="imga" WIDTH="320" HEIGHT="240"><!--img1 //--><a onMouseOver="imgSwap1(); return false;" onMouseOut="imgSwap2(); return false;" name=""><img src="PIC1-02.jpg" border="0" width="80" height="60"></a> <!--img2 //--><a onMouseOver="imgSwap2(); return false;" onMouseOut="imgSwap3(); return false;" name=""><img src="PIC2-02.jpg" border="0" WIDTH="80" HEIGHT="60"></a> <!--img3 //--><a onMouseOver="imgSwap3(); return false;" onMouseOut="imgSwap4(); return false;" name=""><img src="PIC3-02.jpg" border="0" WIDTH="80" HEIGHT="60"></a> <!--img4 //--><a onMouseOver="imgSwap4(); return false;" onMouseOut="imgSwap5(); return false;" name=""><img src="PIC4-02.jpg" border="0" WIDTH="80" HEIGHT="60"></a> <!--img5 //--><a onMouseOver="imgSwap5(); return false;" onMouseOut="imgSwap6(); return false;" name=""><img src="PIC5-02.jpg" border="0" WIDTH="80" HEIGHT="60"></a> <!--img6 //--><a onMouseOver="imgSwap6(); return false;" onMouseOut="imgSwap7(); return false;" name=""><img src="PIC6-02.jpg" border="0" WIDTH="80" HEIGHT="60"></a> <!--img7 //--><a onMouseOver="imgSwap7(); return false;" onMouseOut="imgSwap8(); return false;" name=""><img src="PIC7-02.jpg" border="0" WIDTH="80" HEIGHT="60"></a> <!--img8 //--><a onMouseOver="imgSwap8(); return false;" onMouseOut="imgSwap9(); return false;" name=""><img src="PIC8-02.jpg" border="0" WIDTH="80" HEIGHT="60"></a> <!--img9 //--><a onMouseOver="imgSwap9(); return false;" onMouseOut="imgSwap10(); return false;" name=""><img src="PIC9-02.jpg" border="0" WIDTH="80" HEIGHT="60"></a> <!--img10 //--><a onMouseOver="imgSwap10(); return false;" onMouseOut="imgSwap11(); return false;" name=""><img src="PIC10-02.jpg" border="0" WIDTH="80" HEIGHT="60"></a> <!--img11 //--><a onMouseOver="imgSwap11(); return false;" onMouseOut="imgSwap12(); return false;" name=""><img src="PIC11-02.jpg" border="0" WIDTH="80" HEIGHT="60"></a> <!--img12 //--><a onMouseOver="imgSwap12(); return false;" onMouseOut="imgSwap1(); return false;" name=""><img src="PIC12-02.jpg" border="0" WIDTH="80" HEIGHT="60"></a>

Note that the onMouseOut for the last image should always =imgSwap1(), if you alter the number of images displayed make sure you adjust this accordingly.

Code for Portrait module (15 thumbnails)

<img align="left" hspace="10" src="PIC1-01.jpg" alt="Move the mouse over the thumbnails on the right..." NAME="imga" WIDTH="240" HEIGHT="320"><!--img1 //--><a onMouseOver="imgSwap1(); return false;" onMouseOut="imgSwap2(); return false;" name=""><img src="PIC1-02.jpg" border="0" width="60" height="80"></a> <!--img2 //--><a onMouseOver="imgSwap2(); return false;" onMouseOut="imgSwap3(); return false;" name=""><img src="PIC2-02.jpg" border="0" WIDTH="60" HEIGHT="80"></a> <!--img3 //--><a onMouseOver="imgSwap3(); return false;" onMouseOut="imgSwap4(); return false;" name=""><img src="PIC3-02.jpg" border="0" WIDTH="60" HEIGHT="80"></a> <!--img4 //--><a onMouseOver="imgSwap4(); return false;" onMouseOut="imgSwap5(); return false;" name=""><img src="PIC4-02.jpg" border="0" WIDTH="60" HEIGHT="80"></a> <!--img5 //--><a onMouseOver="imgSwap5(); return false;" onMouseOut="imgSwap6(); return false;" name=""><img src="PIC5-02.jpg" border="0" WIDTH="60" HEIGHT="80"></a> <!--img6 //--><a onMouseOver="imgSwap6(); return false;" onMouseOut="imgSwap7(); return false;" name=""><img src="PIC6-02.jpg" border="0" WIDTH="60" HEIGHT="80"></a> <!--img7 //--><a onMouseOver="imgSwap7(); return false;" onMouseOut="imgSwap8(); return false;" name=""><img src="PIC7-02.jpg" border="0" WIDTH="60" HEIGHT="80"></a> <!--img8 //--><a onMouseOver="imgSwap8(); return false;" onMouseOut="imgSwap9(); return false;" name=""><img src="PIC8-02.jpg" border="0" WIDTH="60" HEIGHT="80"></a> <!--img9 //--><a onMouseOver="imgSwap9(); return false;" onMouseOut="imgSwap10(); return false;" name=""><img src="PIC9-02.jpg" border="0" WIDTH="60" HEIGHT="80"></a> <!--img10 //--><a onMouseOver="imgSwap10(); return false;" onMouseOut="imgSwap11(); return false;" name=""><img src="PIC10-02.jpg" border="0" WIDTH="60" HEIGHT="80"></a> <!--img11 //--><a onMouseOver="imgSwap11(); return false;" onMouseOut="imgSwap12(); return false;" name=""><img src="PIC11-02.jpg" border="0" WIDTH="60" HEIGHT="80"></a> <!--img12 //--><a onMouseOver="imgSwap12(); return false;" onMouseOut="imgSwap13(); return false;" name=""><img src="PIC12-02.jpg" border="0" WIDTH="60" HEIGHT="80"></a> <!--img13 //--><a onMouseOver="imgSwap13(); return false;" onMouseOut="imgSwap14(); return false;" name=""><img src="PIC13-02.jpg" border="0" WIDTH="60" HEIGHT="80"></a> <!--img14 //--><a onMouseOver="imgSwap14(); return false;" onMouseOut="imgSwap15(); return false;" name=""><img src="PIC14-02.jpg" border="0" WIDTH="60" HEIGHT="80"></a> <!--img15 //--><a onMouseOver="imgSwap15(); return false;" onMouseOut="imgSwap1(); return false;" name=""><img src="PIC15-02.jpg" border="0" WIDTH="60" HEIGHT="80"></a>

When creating the entries the relevant module name (eg Portrait) is entered in the Keywords field. Using this method obviously allows you to create any number of modules to accommodate different displays. For example, if occasionally you want an entry with less than your standard number of images then you should create an additional module to avoid empty image boxes showing.

4. Install plugins
Storing the module name in the Keywords field means you cannot use the MTInclude tag to call in the module (MT does not allow you to nest tags as I found out) therefore you will need to install Stepan Riha's TagInvoke plugin (it's just one file which you copy into your plugins directory). The piece of code in the Category Archive template (see Step 5) which includes the module you specify in Keywords is:

<MTTagInvoke tag_name="MTInclude"> <MTTagAttribute name="module"><MTEntryKeywords></MTTagAttribute> </MTTagInvoke>

For additional flexibility, if you install Kevin Shay's Compare plugin, you can wrap the code in an MTIfNotEqual tag which then allows you to have some entries without keywords.

<MTIfNotEqual a="[MTEntryKeywords]" b=""> <MTTagInvoke tag_name="MTInclude"> <MTTagAttribute name="module"><MTEntryKeywords></MTTagAttribute> </MTTagInvoke></MTIfNotEqual>

Note: the sample code below assumes the Compare plugin has been installed. If you don't want to use it then remove the MTIfNotEqual tags.

5. Edit the Category Archive template
In the head section place the following code:

<script language="javascript" src="../album.js"> </script>

Replace the body section of your Category Archive template with the following code:

<body>

<table width="779"><td width="599" valign="top">
<div id="content">

<div class="blog">
<MTEntries lastn="1" sort_order="descend">
<$MTEntryTrackbackData$>

<div class="blogbody">

<a name="<$MTEntryID pad="1"$>"></a>
<span class="title"><$MTEntryTitle$></span>

<$MTEntryBody$>

<MTEntryIfExtended>
<$MTEntryMore$>
</MTEntryIfExtended>

<MTIfNotEqual a="[MTEntryKeywords]" b="">
<MTTagInvoke tag_name="MTInclude">
<MTTagAttribute name="module"><MTEntryKeywords></MTTagAttribute>
</MTTagInvoke></MTIfNotEqual>

<div>Move the mouse over the thumbnail images to see a larger version. </div>
</div>

</MTEntries>
</div>
</div></td>
<td valign="top" width="180"><br /><div class="sidetitle">Photo albums</div>
<div class="side">
<MTCategories>
<a href="<$MTCategoryArchiveLink$>" title="<$MTCategoryDescription$>"> <$MTCategoryLabel$></a>
<br />
</MTCategories></div>

<div class="powered">
All pictures � Xxx Xxxxxx
</div>
</td>
</table>
</body>

6. Edit your index template
To include a list of your albums on your index page insert the following code:

<div class="side"> <MTCategories> <a href="<$MTCategoryArchiveLink$>" title="<$MTCategoryDescription>"><$MTCategoryLabel$></a><br> </MTCategories></div>

7. Stylesheet
In your stylesheet make the following changes:

#content { background:#FFF; margin-right:0px; margin-left:0px; margin-bottom:0px; }

.blog {
padding:0px;
background:#FFF;
}

Rebuild your site.

8. Resize your photos
You will need two versions of each photo. Make landscape main photos 320w x 240h and thumbnails 80w x 60h. Portrait main photos are 240w x 320h and thumbnails are 60w x 80h. I try and keep the thumbnails to around 2k each for optimum loading. Main photos are around 15k each. For speed I use a droplet in ImageReady to batch produce the thumbnails.

Name the main photos PIC1-01.jpg, PIC2-01.jpg etc and the corresponding thumbnails PIC1-02.jpg, PIC2-02.jpg and so on.

Note: See next step before uploading the photos.

9. Creating the entries
Creating the individual album pages is now simplicity itself. You simply create a new entry, assign it a new category, add any descriptive text in the entry body and simply put the relevant module name (eg Portrait or Landscape) in the Keywords field.

Note: If you can't see the Keywords field on the New Entry screen then select Customise the display of this page and choose Custom. Click the Keywords box and save. Similarly if you can't see the Category field.

Save it, upload your photos and voila! If you are displaying a list of the albums (ie the Category titles) then you will need to rebuild your site afterwards in order to update each existing album page with the new category.

While you can upload your photos in MT, I ftp the photos into the relevant directory. If you have created the entry first (the easiest option), then it will already exist. If you upload the photos first via ftp, then you will need to create the directory. Just be careful to insert an underscore if the category name contains spaces.

One drawback is that because the photos are displayed using a common default module, you cannot add titles to the images, however, reading Stopdesign's piece on extending the uses of MT, I daresay all you php wizards could use the extended entry fields to store variables containing titles if you wanted. Don't forget to let me know if you crack it ;-)

Update: I have since installed Brad Choate's Key Values plugin which allows the titles to be loaded in the Extended Entry field eg T1="Title text for PIC1-01.jpg", T2="etc, etc..." and have modified the img alt attribute in the modules accordingly.

10. And that's it!