Touch of Hope: A Technical Colophon

The Touch of Hope web site is powered by Movable Type. It's more than your average blog site though. Don't let it's blogging slant fool you-- MT is a budding CMS!

The architecture is like this:

  • 1 blog for the site's basic content: welcome page, about page, Art for Hope page, request a site page, make a donation page, contact us page and the news and updates content. All of this is in the same blog. The page content is separated into a category (1 per page). Separate index templates filter out the content by category and render it as needed.
  • Another blog is set up for defining each of the hosted sites. Thomas and Carly both have 1 entry in this blog. The entry contains details about them such as the first and last name, date of birth (used to calculate the age on the 'Touch a Life' directory) and the name of the directory their content is saved under.
  • Each hosted site has 4 blogs. These blogs are generated using a special script that builds out their initial site, ready to be filled in by the parent/guardian who will be maintaining the site. There is a blog for their 'story' page, another for their journal, their guestbook and finally the photo album. The parent or guardian has limited, but appropriate access to each of these (they can't change the blog configuration for example for security reasons). They have their own login to Movable Type and maintain their entire site through the Movable Type interface. Additional authors can be created and assigned to any of the 4 blogs for the hosted site.

While it would be possible to do pretty much everything in Movable Type, a few corners were cut with the help of PHP. The hurdle that Movable Type couldn't clear was paging the guestbook entries. A dated archive could have been used instead, but we felt the paged display looked best. Movable Type does not currently have a way to paginate entries across multiple pages like we were needing. So instead, we use PHP and connect to the MySQL database and gather the entries from there on the fly.

The site also uses PHP for templating. The headers and footers for the pages and the panels are all generated by PHP functions. The look and feel of the pages can be changed quite easily, even without the need to rebuild the site since the design is separated from the content.

The guestbook itself was an interesting challenge. When you sign the guestbook, you are actually creating a new Movable Type blog entry into the guestbook blog. We created a new Movable Type application class called that handles the guestbook data as it is posted from the form. It uses an account called 'guest' (who only has post privileges for the 'Guestbook' blog) as the author of the guestbook entries. Metadata such as address, city, state, etc., are stored in the additional entry text field in a "field=value" form. The message itself is stored in the entry text field. And by utilizing Movable Type for handling Guestbook entries, we were able to leverage the IP banning and notification features that a Movable Type blog supports already. An index template is used to build the sidebar navigation for the 'Guestbook' panel at left.

The journal part of a Touch of Hope site is your basic blog. Nothing special to write about there. A separate index is used to build the sidebar navigation for the 'Journal' panel at left.

The 'Story' page is also built using a blog. For Thomas's story page, there are 3 entries: "Who is Thomas", "Mesenchymal Chondrosarcoma", and "All About Thomas". The entries are all simply output to the page. A separate index is used to build the sidebar navigation for the 'Story' panel at left.

The fun blog for the site was the photo album. To make it easy for people to upload pictures to this blog, we had to extend the Movable Type interface a bit. The "Upload Files" link was there, but it offered too many options. And we wanted to restrict the user to just images. So we added a new button called "Upload Image" and created a new template for Movable Type to use in the interface:

Custom upload button     Custom upload window

When the image is uploaded, it's checked to make sure it's one of the valid image types. It is stored in an 'upload' directory underneath the site's index directory. Details about the uploaded image are pre-populated into a new entry (which is displayed upon completing the upload). The image's filename, size, type, etc., are all stored in the 'additional entry text' field in the format "field=value". A plugin was written (MTEmbedImage) for use in the photo blog templates to take the images and automatically generate the thumbnail versions you see in the sidebar and 'Photo Album Index' page.

That's about it-- it was a great project to work on. Using Movable Type as a basis for the site saved a lot of development time. And the end users have a capable and professional interface for maintaining their child's web site.


Listed below are links to weblogs that reference Touch of Hope: A Technical Colophon:

» please visit this special website from Al-Muhajabah's Islamic Blogs
children [Read More]

» please visit this special website from Al-Muhajabah's Islamic Blogs
Touch of Hope - Helping children with serious illnesses such as cancer. When I read the stories of little kids [Read More]

» MT Uses from ecrosstexas: the texas blog
Brad Choate provides a look inside. the Touch of Hope web site. It is a great reference for making your Moveable Type site stand out.... [Read More]

» Inspiration for Mark's Photo Site from Jenn's Blog
Brad Choate created an entire site powered by Moveable Type. It's basically what I want to do with Mark's... [Read More]

» Just passing through from Transient Random Noise Bursts with Announcements
From looking at my logs (which I do a lot, very narcissistic) I’ve noticed that when people come here from... [Read More]

» Beyond the Blog from A Whole Lotta Features
Powering an entire site with Movable Type [Read More]

» Movable Type as a CMS from X-infoModeL
Brad Choate’s recent post on constructing entire websites with Movable Type is one of a series of thoughts on this... [Read More]

» MT and beyond from RANTISSIMO
Reading up on the possibilities to extend MT. Great article on how to extend MT titled "Beyond the Blog" (with... [Read More]

» Movable Type Conversion from
I've done my first conversion of a non-blog website over to using Movable Type. First I read up on it: Beyond the Blog Doing your whole site with MT Touch of Hope: A Technical Colophon Results first: Previous, non-MT version... [Read More]

» Movable Type CMS from Teldar Feed
Beyond the blog Stanford Law Brad Choate [more] Adaptive Path Stop design[more]... [Read More]


sie yin said:

it would be great to have the upload image functionality available for everybody.

i've always thought it was a great miss in mt itself.

i'm also trying to make use of MT power as a CMS from a-z pages on my site.. though still in the thought process the article above does provide some headaway

Deane Barker said:

After looking at the site, there's no denying it Brad -- you're just a big softie.

Nancy said:

How do I donate time? How would you like this publicized? I don't have money, but I know MT fairly decently and have several hostees on it, including my daughter's site (she has Cerebral Palsy). Please let me know if I can do anything, thanks!

Donald said:

Man, that's really great! I'm really impressed.

How do you think new MT-based products like TypePad and Movable Type Pro will impact the creation of sites like this?

Brad Author Profile Page said:

Donald: The more tools to draw from the better. TypePad will probably not offer much in the way of customization compared to what you can accomplish with a standalone MT installation. But MT Pro will provide more features and more abilities to customize.

Mean Dean said:

You've been blogged.

And thanks for all you do!


This article was published on August 21, 2002 12:58 AM.

The article previously posted was Anti-spam Haiku.

The next article is Winamp3.

Many more can be found on the home page or by looking through the archives.

Powered by Movable Type