This article was originally published on September 8th, 2007. It's being republished, now, because I found myself using the article's method again last night:
Yesterday's decision to switch this blog over to a "mixed media" layout lasted for less than five minutes. I'm not sure why TypePad would make mixed media layouts available, with no viable way to organize content, unless these layouts were designed exclusively for photo bloggers. (Which may be the case, as these layouts were the result of a partnership with Nokia. You can also see examples of mixed media layouts on this page.) For anyone with multiple TypeLists, and a concern for the layout of his or her blog's template, mixed media layouts are not a workable option. But a simple simulation is!
First, the basics: a mixed media layout puts thumbnails (and, sometimes, full-size images) of blogged photos into your blog's sidebar. There are several variations on this theme, including one that places thumbnails into a calendar based on the dates that images were posted, but for this simulation, we're going to keep it simple. This guide is best-suited to those who are HTML-challenged, TypeList-challenged, or both.
In addition to the ability to add images directly to blog posts, TypePad users can create photo albums. Users also have the ability to select from four different layouts (including one with no cover) for their TypePad photo album cover pages. When an album cover page layout uses thumbnails, those thumbnails are automatically generated whenever a photo is published to said album. This is very useful for simulating a mixed media layout!
Once your photo albums are set up, and your images are uploaded and published, look at your cover pages. Some of the thumbnails are going to look better than others, due to the centering and selection that TypePad uses to generate the thumbnails. In a separate browser tab, go to "TypeLists" within your TypePad admin. Create a new TypeList, and call it whatever you want to call it. On the photo album cover page, choose a thumbnail that you want to appear in your sidebar. Click on it to go to the page for the full-size image. Copy the address in your address bar. Go back to the TypeList you are creating, and type this: <a href="COPIED ADRESS">
Now, go back to the thumbnail for the chosen image. Right-click the thumbnail, and select "View image". When the image loads, copy the address in the address bar, just like you did for the full-size image. Go back to your TypeList. Type this: <img src="COPIED ADDRESS"></a>
Repeat both steps for every image you want to include in your sidebar. After each </a>, except for the last one, type <br />
This will place each successive image below the one before it. If you want your images centered, simply type <center> at the beginning of your TypeList, and </center> at the end.
When you've finished adding images and formatting the list, click "Save". Then go to the TypeList's "Publish" tab. Select the pages where you want the TypeList to appear, and click "Save Changes". View those pages. If the TypeList isn't positioned the way that you want it, click on the design tab for the weblog you're working on. Click on "Order Content", and arrange things the way that you want them. Save those changes, then republish your weblog, because the changes won't show up until you do.
This method has both advantages and disadvantages to using TypePad's mixed media layouts. The disadvantage is lack of automation. Unlike using a mixed media layout, this simulation will not automatically update your sidebar thumbnails every time you publish a new image to your blog. But the advantage -- being able to control the positioning of your TypeLists -- is vastly more important for any blogger with lots of sidebar content.
