The wonders of regex_replace
Web design
regex_replace is one of Movable Type's tag modifiers. The new layout of alexome.com, completed in January 2008, is based largely on the power of this tag. I am quiet happy about it. It gives this blog something that is quiet unlike the usual blog experience.
A prelude is due: The release of Movable Type 4 in August 2007 has carried along lots of enhancements that enable greater flexibility in both website design and publishing. MT templates are now characterized by a higher level of modularity and granularity. This has a quietening effect on me, as I don't experience any edges into which you can bump. The space of options is so vast that you're floating through the code. Using MT 4 feels like mixing chemicals - it's that smooth. In comparison, the previous version now feels more like molding with clay.
Three years ago, I was looking at my weblog and knew I wanted to have only one main column and no sidebars at all. There are so many tempting things to put into a sidebar that it's frightening. To keep things simple and focused I let the sidebar go - take a look at this screen shot. I didn't put on a party though to celebrate this move, like the more snooty type of me would do. Gosh- did you see that sidebar go?! It was such a drama …
End of prelude. The sidebar is back, but kept to a minimum. So what does regex_replace do for the current layout employed at alexome.com? It makes previews possible by swapping a large size of an image against the same image of smaller size. Why is this good? Because I also vary the width of the column containing an entry.
A blog typically contains a long list of entries in an index page from where you call up the page of an individual entry. See psfk.com for example.The entry is usually displayed identically on the index page and on the entry archive page, unless you put some part of your entry into the exended body. In the latter case you can let readers preview or skim the upper part of an entry first, before they call up the full content of any entry of interest.
The layout that I apply differs as I also control the width of the main column in the entry archive page. I decide on a case by case basis how narrow or wide the main column containing an entry should be, depending on how much text the entry contains and on how large I want to display an image.
The main column of this weblog has a flexible width. It can be as narrow as 340 pixels and as wide as 570 pixels. The idea is that entry summaries are presented in a narrow 340-width column. The purpose of entry summaries is to preview content, as seen on the home page, and on all other pages with the exception of entry archive pages, where the flexibility of width plays out.
When jumping from the entry summary to the full entry, the column expands to either 430 pixels or to 570 pixels, or it remains unchanged at 340 pixels - anyway I see fit. The entry you are reading here is placed in a 430-width column. When the column expands, I also want the image to be displayed larger. The images in the entry summaries are always of the same, standardized size and serve as previews. These are actually the images which regex_replace inserts in place of the same image of larger size.
As a result, an entry can contain an image in three different sizes, if I want: (1) the preview image only shown in entry summaries, (2) a larger thumnail image on the entry archive page, and (3) the full-sized image.
The preview effect is thus accomplished by simply uploading a second copy of an image which serves as the preview image. regex_replace then determines when to display which of the two.
I do the same with videos. Embedded videos are previewed with a video still image, which is then swapped out against the actual video. This is the code for it:
<mt:EntryBody regex_replace="/<span.+id=\x22video\x22.+/span>/","">
Whenever the id attribute of the preview image has the value "video", it will be stripped out. The embedded video is placed in the extended body of an entry and is revealed when you jump from the entry summary to the entry archive page.
Before discovering regex_replace, I never used regular expressions. This is one of those things you don't know you need until you have tried it. Now I also use regular expressions in File List and in Smultron.
Published: January 13, 2008
Tags
This is alexome.com by the hands of Alexander Schneider. It is dedicated
to his future, and to his alone.
