Selectively Formatting an Entry


Published on February 23, 2007 at 7:53 AM EST
In the Tutorials category.

Why not try this treat in your restaurant?

With some creative use of Movable Type’s template tags it’s easy to create a differently-formatted page. For example, for short entries I just use the Entry Body field. For longer entries I use the Entry Body and Extended Entry, and the Entry Body serves as a lead-in to the full article.

How to do it is fine, but a visual is the key! Falsified examples follow:

Before

This is the Entry Body. It’s normal text, see?

And this is the Extended Entry. I could type even more here, but I don’t want to.

After

With no extended entry:

Here’s the Entry Body. This is a short post, so I won’t even both to use the Extended Entry field.

With an extended entry:

This is the Entry Body, with larger and heavier text.

It’s larger and heavier because the Extended Entry is used. My big, long story might go here.

What to Change

All you need to do is edit some templates. I changed the Individual Entry Archive a little bit, changing:

<div class="entry-body">
<$MTEntryBody$>
</div>

To this:

<div class="entry-body<MTEntryIfExtended> lead-in</MTEntryIfExtended>">
<$MTEntryBody$>
</div>

Adding <MTEntryIfExtended> lead-in</MTEntryIfExtended> simply outputs the lead-in class text if the Extended Entry field gets used. So, hop over to the stylesheet where you can define the lead-in class by adding something like this:

.lead-in {
   font-size: 1.1em;
   color: dark-gray;
   font-weight: bold; }

Other Options

The example above really just scratches the surface. There are plenty of other template tags you can play with (MTElse, MTIfCategory, and MTEntriesHeader, for example), as well as some plugins such as Compare.

This article is tagged as: CSS, Formatting, HTML, Template Tags, Tutorials