Leadin Macro

Lead-ins are an eye-catching mechanism usually found in print publications. Recreating that effect for the web is easy to do, but it could be easier. Wouldn't it be nice if there were a 'leadin' tag that you could use to identify the word or phrase you want to style like that? Well...

MT-Macro to the rescue! Actually, the technique described here utilizes 3 of my Movable Type plugins. All functioning in perfect harmony.

Here's how the opening paragraph looks as I typed it:

<leadin>Lead-ins are an eye-catching
mechanism</leadin> usually found in
print publications. Recreating that effect for
the web is easy to do, but it could be easier.
Wouldn't it be nice if there were a 'leadin'
tag that you could use to identify the word
or phrase you want to style like that?
Well...

Here's what it produces after my 'leadin' macro is done with it:

<span class="leadinDropCap">L</span><span
class="leadinPhrase">ead-ins
are an eye-catching
mechanism</span> usually found in
print publications. Recreating that effect for
the web is easy to do, but it could be easier.
Wouldn't it be nice if there were a 'leadin'
tag that you could use to identify the word
or phrase you want to style like that?
Well...

...Now, I know-- that's not doing all that much you say. But... it does handle punctuation properly (at least to my tastes). Opening punctuation such as quotes, dashes, periods, etc. are also made part of the 'dropcap' part. Also, the macro will utilize an images you might have created for your letters. It does this by checking for an '/images/(style)/(letter).gif' file underneath your blog's output directory. The 'style' part defaults to 'a'. If you have multiple styles, just specify the style attribute for the leadin tag. For example:

<leadin style="b">This demonstrates</leadin> style B.

With that leadin tag, the macro will look for /images/b/t.gif (or /images/b/t.jpg). If it finds it, that graphic will be used in place of the letter 'T'. If the graphic can't be found, 'T' will be used instead.

The following steps will walk you through setting this up for your blog.

Step 1: Install MT-Macro, MT-EmbedImage and MT-PerlScript.

Step 2: Alter your styles-site.css template (or whatever file has your CSS stylesheet rules). Add the following to it (feel free to customize the styling once you see how they're used):

.leadinDropCap {
  float: left;
  font-size: 400%;
  line-height: 100%;
  font-weight: bold;
  font-family: Impact, "Arial Black", Arial, sans-serif;
}
.leadinPhrase {
  text-transform:uppercase;
  font-weight: bold;
}

Step 3: Create a new template module named "macros" and add this to it:

<MTMacroDefine ctag="leadin" script="PerlScript">
  $first = q{<MTMacroContent remove_html="1">};
  $match =
    qr/^\s*                # ignore leading whitespace
      (                    # select any symbol prefix:
        (?:\&[a-z]+\;) |   # named html entities
        (?:\&\#[0-9]+\;) | # numeric html entities
        (?:[^A-Za-z0-9]+)? # non alpha-numerics
      )
      ([A-Za-z0-9])        # select first alpha-numeric
    /x;

  ($sym, $firstchar) = $first =~ $match;
  $rest = $MTMacroContent;
  $rest =~ s/$sym$firstchar//s;
  $style = $MTMacroAttr{style} || 'a';
  print q{<span class="leadinDropCap">};
  print $sym if $sym;
  if ($style) {
    $lcfirst = lc($firstchar);
    print compile(q{<M}.
      qq{TEmbedImage basename="images/$style/$lcfirst"
      default="$firstchar"><img align="top"
      src="<MTBlogURL><M}.
      q{TEmbedImageFilename>" height="<M}.
      q{TEmbedImageHeight>" width="<M}.
      qq{TEmbedImageWidth>"
        alt="$firstchar" border="0" /></M}.
      q{TEmbedImage>});
  } else {
    print $firstchar;
  }
  print qq{</span><span
    class="leadinPhrase">$rest</span>};
</MTMacroDefine>

Step 4: Change your index and archive templates to use the above template module. Wherever you output entries that use the macro, the macro definition has to be loaded so it can process your data. Add this to the top of the templates:

<MTInclude module="macros">

You'll also need to add an "apply_macros='1'" attribute to any MT element that outputs the 'leadin' macro. For example, change your <MTEntryBody> tag to look like this:

<$MTEntryBody apply_macros="1"$>

That's it. If all went well, you can now use a the <leadin> custom tag to markup your entries.

TrackBack

TrackBack URL for this entry:
http://bradchoate.com/mt/feedback/tb/358

Listed below are links to weblogs that reference Leadin Macro:

» Leadin Macro from vsbabu.org
MTPerlScript plugins are a great way to enhance MT's functionality. [Read More]

» Leadin Macro from vsbabu.org
MTPerlScript plugins are a great way to enhance MT's functionality. [Read More]

» Leadin Macro from . cynics' laments .
Add this new macro that allows you to create "lead-ins" that are usually found in publications. This tip can be [Read More]

» Leadin Macro from . cynics' - /mak'in-trash`/ .
Add this new macro that allows you to create "lead-ins" that are usually found in publications. This tip can be [Read More]

» Leadin Macro from . cynics' - /mak'in-trash`/ .
Add this new macro that allows you to create "lead-ins" that are usually found in publications. This tip can be [Read More]

» Leadin Macro from . cynics' - /mak'in-trash`/ .
Add this new macro that allows you to create "lead-ins" that are usually found in publications. This tip can be [Read More]

» Leadin Macro from . cynics' - /mak'in-trash`/ .
Add this new macro that allows you to create "lead-ins" that are usually found in publications. This tip can be [Read More]

» gebruikte plugins from gw's virtuele 3M Post-It (tm)(r)
Een groot deel van deze site komt "straight out of the box". Een aantal bijzondere functies zijn er door mijzelf... [Read More]

About

This article was published on August 22, 2002 1:12 PM.

The article previously posted was Winamp3.

The next article is See- this is how you contract West Nile.

Many more can be found on the home page or by looking through the archives.

Powered by Movable Type