Feature
Post

Category
Code


Keep a Featured Post at the Top of Your MT Blog

Whenever I blog something good — a long tutorial that I’m really proud of, for example — I’m often tempted not to blog for a while. I want that great article to stay at the top of my home page for as long as possible. It’s not just about vanity, though. This can be useful when you make an announcement and want to be sure people see it. Plus, featuring your best work in a prominent position can help keep new visitors exploring your site. And if these “featured posts” usually have photos, they can improve the first impression someone gets from your home page.

For this tutorial we’re using our default Movable Type index template. The code below would replace the <MTEntries> block at the top of the template:

<mt:entries lastn="1" tag="featured">
    <div class="headliner">
        <h2>Featured Post:</h2>
        <mt:entryassets type="image" limit="1">
            <img src="<mt:AssetThumbnailURL width="450" square="1" />" alt="<mt:assetlabel>" />
        </mt:entryassets>
        <p><a href="<mt:entrypermalink>"><mt:entrytitle></a></p>
        <mt:setvarblock name="featured_entry"><mt:entryid></mt:setvarblock>
    </div>
</mt:entries>

<MTEntries>
    <mt:unless tag="entryid" eq="$featured_entry">
        <$MTEntryTrackbackData$>
        <$MTInclude module="Entry Summary"$>
    </mt:unless>
</MTEntries>

Now, instead of one <MTEntries> block, we have two. The first one finds our most recent featured post and displays it. The second is our default list of entries for the home page, with a check to make sure we don’t repeat the featured post.

Let’s take a closer look at how we’re doing that. We’ll start with our search for a featured entry:

<mt:entries lastn="1" tag="featured">

This will bring back our most recent entry that was tagged with the word “featured.” If that entry has an image attached, we want to display it:

<mt:entryassets type="image" limit="1">
    <img src="<mt:AssetThumbnailURL width="450" square="1" />" alt="<mt:assetlabel>" />
</mt:entryassets>

Our <mt:entryassets> block will only bring back the first image it finds in the entry. The <mt:AssetThumbnailURL> tag will generate a thumbnail for us, if one that size hasn’t already been created.

We then output a link to the entry, and end the block by storing the ID of the featured entry in a variable:

        <mt:setvarblock name="featured_entry"><mt:entryid></mt:setvarblock>

We then check that variable when we output the rest of our entries, to make sure we don’t display the featured post again:

<MTEntries>
    <mt:unless tag="entryid" eq="$featured_entry">

Maybe it would look something like this:

Featured Entry on home page

For this to work, you will need to tag an entry with the word “featured” — ideally it will have an image embedded in it. Now republish your main index, and add some styling to the content of div.headliner to set it apart from your regular posts. Now, whatever you consider your latest and greatest post can always have an eye-catching position at the top of your blog.


  1. By Guin posted on March 6, 2009 at 9:06 pm
    Want an avatar? Get a gravatar! • You can link to this comment

    Awesome tutorial! For some reason the image displayed is the last one instead of the first in the post. Any thoughts as to why?

  2. By Trackback - Cheap Internation Call >> How to make cheap international call posted on November 19, 2009 at 10:00 pm
    Want an avatar? Get a gravatar! • You can link to this comment

    ,..] http://www.devlounge.net is one another great source of tips on this topic,..]

  3. TrackbackMovable Type Monday: Movable Type 4.2, Pro, Mid Century Theme, Tutorials Galore! | The Blog Herald