Six Apart News & Events

Using Movable Type for slideshows

Last week, CSS guru Eric Meyer posted his system called S5, a simple and elegant way to publish an XHTML file that can be displayed by any modern browser as a slideshow.

Using his primer and a little bit of custom templating in Movable Type, it's easy to create a template that can show your recent blog posts as a slideshow. (If you just want to jump to a live example, you can view the Professional Network blog as a slideshow.)

The key to making S5-compatible slideshows in Movable Type is to create a template that generates output with the appropriate markup to work with the CSS and Javascript that S5 requires. Here's the simple template we're using on the Professional Network:

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "">
  2. <html xmlns="">
  3. <head>
  4. <title><$MTBlogName encode_html="1"$></title>
  5. <meta name="version" content="S5 1.0" />
  6. <link rel="stylesheet" href="ui/slides.css" type="text/css" media="projection" id="slideProj" />
  7. <link rel="stylesheet" href="ui/opera.css" type="text/css" media="projection" id="operaFix" />
  8. <link rel="stylesheet" href="ui/print.css" type="text/css" media="print" id="slidePrint" />
  9. <script src="ui/slides.js" type="text/javascript"></script>
  10. </head>
  11. <body>
  12. <div class="layout">
  13. <div id="currentSlide"></div>
  14. <div id="header"></div>
  15. <div id="footer">
  16. <h1><$MTBlogName$></h1>
  17. <h2><MTEntries lastn="1"><$MTEntryAuthorNickname$></MTEntries></h2>
  18. <div id="controls"></div>
  19. </div>
  20. </div>
  21. <div class="presentation">
  22. <div class="slide">
  23. <h1><$MTBlogName$></h1>
  24. <h3><MTEntries lastn="1"><$MTEntryAuthorNickname$></MTEntries></h3>
  25. <h4><$MTBlogURL$></h4>
  26. </div>
  27. <MTEntries>
  28. <div class="slide">
  29. <h1><$MTEntryTitle$></h1>
  30. <div class="slidetext"><$MTEntryBody$></div>
  31. <MTEntryIfExtended>
  32. <div class="handout">
  33. <$MTEntryMore$>
  34. </div>
  35. </MTEntryIfExtended>
  36. </div>
  37. </MTEntries>
  38. </div>
  39. </body>
  40. </html>

We've also added a simple style sheet as well, but you might want to check out the themes that Eric has collected.

Once you've added this template to your Movable Type install and uploaded the supporting CSS and Javascript (either by publishing them as templates or just by uploading them to your server), you're set.

Some of the more advanced ideas you might want to try would include limiting the posts being displayed to just those in a particular category (only "Important" posts would be viewable as a slideshow) or by giving permission to others in your organization to edit your posts, so that the whole group can collaborate on editing the text in a slideshow. This might be even easier if you use a text formatting plugin like Textile or Markdown to add bullet points to your posts.

And Movable Type generates static HTML pages by default, so you can take the generated output from this template and throw it on a USB disk or burn it to a CD for presentations from anywhere that you can access a web browser. These tools are pretty good at publishing to a web server too, of course, so there should be a number of ways to show your presentation skills off to your audience.

Who knows, by using a slideshow, maybe you can even get your marketing staff to start reading your blog.