Branding your Messages: New Template Tags

In yesterday's post I remarked that Gawker's sites were using our standard template capabilities to customize their emails and subscriber landing pages. I also mentioned that we'd added a few new tags to the template; as promised here's a description.

What's a template again?

The template controls the layout (styles, fonts, logos etc.) of your content. It controls how your articles are formatted. This is contrast to the newsletter settings links in the newsletter center, which control what goes into the article in the first place. So the newsletter settings control things like tracking, truncation, comments and forward to a friend settings. The template takes the results and makes it all pretty for you.

The template editor is found in the graphic design area of your newsletter center. The template controls the layout by using custom tags inside HTML; the custom tags act as variables, substituting content such as your blog's title, content or time stamp into the HTML that becomes your newsletter or subscription form.

New Tags

There are several new tag options, now available to everyone, that we built for Gawker and a couple of other premium clients. The three main new tags are:

• <$BlogFloatImagesLeft$>
• <$BlogFloatImagesRight$>
• <$Date format="formatstring"$>

OK, so what do these do?

<$BlogFloatImagesLeft$> and <$BlogFloatImagesRight$>

The "FloatImage" tags take any image they find in the content and do their level best to force it to the left or right margins, wrapping your article text around it. They make the text more pleasing to the eye, and save space as well.

Look at Lifehacker's (one of the Gawker sites) newsletter preview, and now look at the RSS feed the newsletter is built from. In the RSS, the image floats all alone, above the text. It wastes a lot of space. In the newsletter, without the <$BlogFloatImagesLeft$> tag, it would behave exactly the same way, which is not how Gawker wanted things to look. With the tag in place, you get what you see now - the image on the left, and the text all cozied up to it, nice and friendly. If you use this tag, know that it works on all images that emerge from the content engine. So it works well if you only have one image, or their well spaced apart. If you use lots of pictures in each article, things can get bunched up and ugly. So preview it before you take it live!

<$Date format="formatstring"$>

This ought to be a popular one! You can now control the date formatting FeedBlitz puts in (still English and still US eastern, one thing at a time, people...). Programmers will know what to do with this, and you can see the results in the Lifehacker newsletter. The date in the mast head, under the logo, is the time the newsletter was generated (so that's now in the online preview). 3 letter day name, 3 letter month, date, year. Now, if you look at each article, you'll see the time it was posted (FeedBlitz pulls this information from the RSS). Hours and minutes are added. (Both are upper case because of the styles that are applied to the dates once generated).

Both dates use the new <$Date$> syntax, but with different format strings. Here are some format strings and what they do for the time February 9, 2008, 2:45 PM

Date Tag	Output
<$Date format="%m/%d/%Y"$>	02/09/2008
<$Date format="%d.%m.%Y"$>	09.02.2008
<$Date format="%Y-%m-%d"$>	2008-09-02
<$Date format="%a, %b %d %Y, %I:%M %p"$>	Sat, Feb 09 2008, 2:45 P.M.
<$Date format="%B %d %Y, %H:%M"$>	February 09 2008, 14:45
<$Date format="%A - %H:%M"$>	Saturday - 14:45

There are a couple more new tags but I suspect they'll be rarely used; you can find them all listed under the template editor itself. Access your template editor using the "graphic design" link in your Newsletter Center.