Hello! ☞ This is an archived version of Al Shaw's personal website. The current site is http://shaw.al.
The cafe feature section
A busy week in newsgathering draws to a close. The masses converged on Washington to witness Change™ come to America, and TPM launched a new blog. TPMDC, the successor to TPM Election Central opened its doors on Monday, and with it a new feature/headline section. We also deployed a version of this feature section on TPMCafe.
Here’s a little bit about how I designed this section, and how it is integrated into our CMS, Movable Type.
The HTML/CSS/JS
The inspiration for the new TPM feature sections came from Khoi’s excellent work at NYTimes.com, specifically the politics page. I wanted to create something similar, where text would hover over a darkened semi-transparent field on top of a picture. I knew I’d have to create something easily updatable by editors with only a rudimentary knowledge of HTML or no code knowledge at all. To accomplish that, I used MT’s Custom Fields plugin in conjunction with inline styles in order to inject a user-inputted image link into a CSS background-image declaration.
I started, though, by laying out the code statically. I’d fill in the variables later. The result was something like a sandwich. Each feature box is a div with a background image. On top of that is a black relatively-positioned overlay div, which I lightened using CSS 3’s opacity declaration (and the filter:alpha declaration for IE). This, though, presented problems for the text, since if I enclosed it within the same overlay div, it would then also be subject to the opacity shift, rendering it unreadable. To solve this, I created yet another div, and fooled it into laying on top of the overlay div by floating it left and setting a negative margin. Altogether, it forms a coherent package, and I only had to use a smidgen of javascript (to make the whole div linkable).
The Cafe feature section with “halfsies”
For TPMCafe, I also created subfeatures for promoting the Book Club, which would either be one long box under the three features, or two “halfsies” boxes if there was both a Book Club and Special Feature that week. The final piece of the sandwich for these boxes was a label for either TPMCafe Book Club or Special Feature. These are PNGs with transparent backgrounds (sorry IE, couldn’t compromise here), floated right and positioned with negative top margins.
The MT Templating
To make these contraptions editable by noncoders, I used a combination of vanilla MT templating, and two excellent plugins: Custom Fields (to fill in variables) and SqueezePlay, a plugin built for TPM by Six Apart née Apperceptive that allows you to move blog posts around on a page.
To start out, I created a new blog called DC Headlines, because each feature box would actually be a “blog entry” that could be moved around with SqueezePlay. The whole DC Headlines blog would be included into the TPMDC main index with PHP so that changes would show up immediately without the DC index having to be rebuilt. I used Custom Fields to create entry screen fields for background image and link. Since Custom Fields allows you to create your own MT template tags, I just had to fill in the variables with the new field tags. For the Cafe features, I had to use a little bit more logic for the subfeatures— I set a radio button for which label would show up (Book Club or Special Feature), and a checkbox for whether or not a small 
“myTPM” pixel icon would show up (denoting a featured reader post). (N. B.: I set the MyTPM pixel icon in Underware’s Unibody 8 and Kottke’s Silkscreen to create a cute miniature version of the myTPM logo.) Movable Type’s fantastic <MTIf> logic helped out a lot here.
Entry screen options
Finally, I used SqueezePlay to make the headlines easily movable. In the plugin, each spot was assigned a position (1,2,3 for the top features, 4 for the long subfeature and 5,6 for the halfsies subfeatures). MT’s fabulous <MTIfNonEmpty> tag helped me alternate between the long subfeature and the halfsies when one of them wasn’t in use.
Manage Homepage in SqueezePlay
Here’s some of the template code for one of the “halfsies” features for an example of how it all comes together (if you’re curious, the CSS is here):
<MTSqueezePlayStory position="5">
<MTIfNonEmpty tag="EntryBody">
<div style="background-image: url('<MTdatafeature_photo>');" class="halfsiesubf" onclick="javascript:location='<MTentrydatacafe_story_link>'">
<div id="overlaybookclub"></div>
<p class="overlaytextsubf"><$MTEntryBody$></p>
<MTIf tag="entrydatabanner_type" eq="Book Club">
<img class="halfsieoverlaybug" src="http://www.talkingpointsmemo.com/images/bookclub-halfsie-bug.png">
<MTElse>
<img class="halfsieoverlaybug" src="http://www.talkingpointsmemo.com/images/specialfeature-halfsie-bug.png">
</MTIf>
</div>
</MTIfNonEmpty>
</MTSqueezePlayStory>The result was a system that is usable by someone who only needs to have knowledge of <a> tags, for putting individual post links within the subfeature. The added bonus, though, is that if one doesn’t link the individual stories, the whole box will be clickable anyway because of the javascript attached to the div.
Hopefully people enjoy these new feature sections— and to the Times design team, what was that line about good artists and great artists?