A Switch On - Switch Off PhotoBlog/Gallery within Movable Type

Disclaimer. This method works for me but it may not work for you depending on your server or the settings of your Movable Type installation. You will need to know how to use Movable Type, its plug-ins, templating system, and a little PHP. Secondly, I am not a professional programmer, only a professional designer (who has to make far too many compromises for his clients - hence this slightly experimental site) so everything written here should be taken with a pinch of salt, so if it does not work - don't panic! Backstep and try again - which leads on to my last point: back up everything prior to beginning any modifications to your site regardless of complexity.

So here's my additions to the Movable Type templates, with a few plug ins which keeps Movable Type as it is, and allowing you to create a PhotoBlog posting.

To see working examples of this technique - just have a look at my own Photoblog entries.

Contents
Step 1 - Custom Entries
Step 2 - Create Module
Step 3 - Modify Template
Step 4 - Add CSS
Step 5 - Create Image Viewer
Making a PhotoBlog Post
How it all Works
When it don't work - Errors

Note: I was going to release this a short while back - but what with the festive season, work & what-not, the best laid plans of mice.. So this is a revised method, even simpler than before thanks to Arvind Satyanarayan's newly released Custom Entry Fields 1.2.

Prerequisites:

Assuming that you have Movable Type installed, (I'm using MT3.2 at the time of writing) you will require the following plug ins:

• MT-PhotoGallery by Brandon Fuller
• Embedimage by Brad Chaote
• Compare by Kevin Shay
• Custom Entry Fields by Arvind Satyanarayan

I'll put my thanks in now - without the talents of these guys none of this is possible, and I've spent many many hours getting this technique to work - many hours ;-)

Step 1

As in most web projects, you have to work backwards to achieve your end result - so the first thing we need to do is set-up the custom entry fields for us to post with. You can either add them on a system wide level for all blog's set-up on your MT install [go to the root of your blog and into Plug ins], or on a per blog basis [at the bottom of the individual blog's welcome message] as per Arvind's instructions.

Create a 'Checkbox' entry called PhotoBlog (this can be any name you like actually, just be sure to remember it!) And I usually add a helpful description, in case it's the morning after or you have other authors - something like: Switch on the PhotoBlog - be sure to have uploaded the images first!

Next a 'Single-Line Text' entry called Folder Name , with a descriptive reminder like: Name of folder within upload folder.

Finally I have a 'Multi-Line Textfield' entry called Extra Content, again with a descriptive reminder: Additional text. e.g.. © Copyright notice.

None of them should be compulsory I might add!

Step 2

Go into the templates section of MT and into the Modules area.
Create a new template module with the name PhotoBlog-Block - you can use any name again as long as you remember the name, I just like to keep things obvious.

Inside this, you can add the following code:

I'll explain how it works roughly at the end - on with the cut and paste!

Step 3

Next we modify the Individual Entry Archive template - I prefer my PhotoBlog-Block to appear after the extended entry part of a post, so depending on your template insert the following code between:

Step 4

Add the following to the end of your style sheet template:

If you are using the style catcher plug in, you can add the CSS just after the short block which calls the saved template - though if you change the template you will need to add it again.

So that the thumbnails tile across the page, I've avoided any hard-coded tables within the step 2 code, since they are not being used correctly as per Web Standards advice. So my method is a simple float left using CSS within a containing DIV. Floats only really work once the height and width have been set - in this case 120px by 130px - if you want smaller or bigger thumbnails then adjust these sizes along with the height width settings in step 2 currently set to 110 px.

Step 5

Creating a picture viewing page - I've gone with a simple php page that will accept the variables we have sent along with the link in step 2 - they go:

index.php?imgN="the picture name"&imgH="picture's height"&imgW="picture's width"&imgD="picture's name"&imgN="name of the post that the picture came from"

Once in the main templates area, Create a New Index Template called Picture Viewer and its output file should be saved as imgview.php

Copy the following into the new template:

In the future I may get creative with this page, since it's a linked index template it will use the Movable Type engine, when you create updates to posts or menus this page will be updated and stay in line with the rest of the site.

Making a post.

Using either an ftp program or MT's built-in Upload File capabilities, create a folder inside your photo folder.

e.g. photos/test/

...and then upload a bunch of pictures suitable for web viewing - what I mean by suitable is making sure that they fit onto an 800x600 screen when viewed - though if you give fair warning, you can make them bigger and also longer to download; just remember not everyone has super-duper download speeds yet or screen resolutions over 800x600 pixels.

I would also recommend saving an index.html file into the same directory that uses meta-refresh to boot people back to the root of the site if they go nosing.

Now create a new entry - since the PhotoBlog-Block appears only inside an article, be sure to add something in the Extended Entry box so the Read More link activates, depending on how you've configured you blog templates of course (if you haven't set post titles to be active links).

At the end of the post, you should see the Extended Options for the PhotoBlog - if not, click customise the display of this page (one of the things I forgot to do the first time) and switch on Show Custom Fields.
Ticking PhotoBlog switches it on obviously (hopefully).
Now enter the folder name that you just uploaded - e.g.. test
And finish with any extended text, such as © Me - All my own work. The © turns into © symbol when viewed.

Click save. Now when you view the post it should have made a nice array of image thumbnails - if not, check out the errors section.

How it works

Here's how it all works - based on example 5 at Brandon's site.

In the module template PhotoBlog-Block, the first thing that I did is create a <div> area, which is using the MT style class pkg, which keeps things neat since it's using the built in functionality of creating a clearing area after the thumbnails have formed - which stops them stopping halfway across a page and the text wrapping into the spare space - I've also added an ID called photogallery which you can add to your style sheet to allow individual styling.
Next the MTPhotoGallery plug in is being activated which is ignoring any files with -THUMB in it's name and sort ordering ascending. For it's path comes the first clever bit - using the custom entry field Folder Name MTPhotoGallery now knows where to look to begin it's run cycle. One of the biggest stumbling blocks I kept running into when developing this technique was if I got the path wrong, the PhotoBlog-Block code would scan the entire site of images and embed them into the page - and I do mean the entire site!
So it's vitally important to put path="photos/ before [MTEntryDataFolderName] - the path name can be anything you like, but try and make it relevant to the type of images and away from actual content - otherwise it gets very messy if you make a mistake and need to clean up.

Next as MTPhotoGallery does it's loop through the folder we've specified it uses the code before it's close tag </MTPhotoGallery> - in this case I've enclosed each image in a classed div called photoimage, which is explained in styling.

As the PhotoGallery loop starts, it uses the MTEmbedImage plug in which does an awful lot of work for us - it is the one responsible for creating the thumbnail (who's size we've stated in my example is 110x110)

and eventually passing on useful information to the picviewer.php page such as the original picture's height and width.

Errors - reasons to be cheerful...

Zillions of pictures:
The main problem you'll encounter is if you get the folder name wrong, the MTPhotoGallery plug in and the way it's set up will scan the entire blog for images to embed, so if it's in the root it'll find pictures from the MT install, plug ins and your templates. Which is why I put the path argument as "photos/" to act as damage limitation, since we'll only end up with everything inside there.

If you "tweak" your Custom Entry Fields (or an update changes something) then you may see this error.

Fix:
Check the Folder Name(s) in the post and rebuild.

Red box warning after I cleaned up something:
I've noticed if you delete a folder with some images in and do a site rebuild, the post that was referencing the folder will crash out the rebuild with an error.

Fix:
Modify the post before deleting the folder.

It's just not working!:
You've copied and pasted everything from here and typed in what was required.

Fix:
Double check case of Custom Entries calls - the worst is MTEntryPhotoblog. When Entries makes a new name, it only capitalises the first letter of each individual word.

Any others that people find, please let me know for inclusion here.

Revision history:

Version 1 - January 2006