MT: Replace Image with ALT Text

One of the features I added to my website when I recently converted to Movable Type is a Cited Links listing. This archive is generated with Staggernation’s fantastic Collect Plugin for Movable Type. In essence, I’ve set up this plugin to collect the links within all the entries and then create an archive page for each of the websites linked. That way I can click on a colleague’s site in the archive, for example, and see all the posts that have linked to that site, including the actual links. I use this almost every single day. What I’m doing is based on one of the Usage Examples, Archiving Entries by Linked Site.

Not only does it collect the text that’s hyperlinked, it also collects images surrounded by hyperlinks, such as book covers. That’s fine except that over 250 images is far too much bandwidth on the archive page, in addition to overlapping each other and becoming quite a mess amidst the bulleted lists on many of those pages. This was a detail that I knew I needed to straighten out but wasn’t a top priority.

Mark Pilgrim’s Mobile Macros strips out images and other markup for the Mobile version of my site. His macros, while stripping out the images, also replace the images with their corresponding ALT attribute text. Last night it finally dawned on me that I could probably extract a snippet from that macro and apply it to my cited links archive pages to replace the images with their ALT text.

I looked through Mark’s Mobile Macros script and found exactly what I was looking for, so I proceeded to set up my cited links archives in a test area to try it out. It worked beautifully.

How To Replace Images with Corresponding ALT text

I’m sure there are many ways to do the same thing, but this approach is so incredibly simple to do, thanks to this helpful plugin and a snippet from Mark’s script.

You’ll need Brad Choate’s MTMacro plugin for this to work. Additionally, you must have included ALT text with your images, of course, so that the images will be replaced with hypertext links instead.

Here’s the code snippet from Mark’s Mobile Macros. This snippet gives directions to strip the image tag from the page and replace it with its corresponding ALT attribute text.

<MTMacroDefine name="stripimg" tag="img">
<MTMacroAttr name='alt'></MTMacroDefine>

You’ll need to place that snippet somewhere before the text area where you want this applied.

Then you’ll need to apply the macro to the specific area of your page. For my purposes I used it only in the template for my cited links archive pages, placing it around <MTEntries> as shown below:

<MTMacroApply macro="stripimg">

Other template markup here.


Note: For clarity I’ve added carriage returns to the above snippets. I suggest removing the carriage returns before saving your page.

Then rebuild your pages so the macro is applied. As I mentioned above, I suggest trying this out with a test site first. Always back up your pages and your work before implementing something new, too.

09:19 am, pdt 3 September, 2003 Comments, Trackbacks (2) ·';}?>

Categories: Colophon, Development, Movable Type


Comments, Trackbacks: 2 so far. Add yours!

  1. Hi! How do I use MTMacro to replace "br /" (new break tags) with the old break tag "br"?

    I’ve tried to follow the example and it didn’t work....

    11:32 pm, pdt 4 June, 2004Comment by AcidZero

    comment #1 permalink ·'; else echo '·'; ?>

  2. Regarding your question about how to use MTMacro to replace "br /" (new break tags) with the old break tag "br"—If you want to replace your BR tags you can use Movable Type’s global find and replace to do that. It’s very simple and works great. See Movable Type’s instructions for that if you’re not sure how to use it: Movable Type Manual: Search and Replace.

    09:19 am, pdt 5 June, 2004Comment by Shirley Kaiser

    comment #2 permalink ·'; else echo '·'; ?>

This discussion has been closed. Thanks to all who participated.

*/ ?>