Brainstorms and Raves

Notes on Web Design, Development, Standards, Typography, Music, and More

Wed

3

SEP

2003

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 amazon.com book covers. That’s fine except that over 250 images is far too much bandwidth on the amazon.com 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">
<MTEntries>

Other template markup here.

</MTEntries>
</MTMacroApply>

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

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 ·

  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 ·

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

top


Visit iStockPhoto - Royalty-free stock images. Click Upload Earn, Click Download Create 

I Wrote a Book

Deliver First Class Web Sites: 101 Essential Checklists  Via amazon.com: Deliver First Class Web Sites: 101 Essential Checklists, by Shirley Kaiser. SitePoint Books (July 2006). 

Available now via: SitePoint Books, Amazon.com, Amazon.ca (Canada), Amazon.co.uk (UK), Amazon.fr (France), Amazon.de (Germany), Amazon.co.jp (Japan), Tower Books U.S. and elsewhere! You'll also help support this site and its owner if you purchase via any of these links.

Learn more at SKDesigns - Deliver First Class Web Sites and via SitePoint Books.

Recommended Books

Web Style Guide - Basic Design Principles for Creating Web Sites, 2nd Ed., by Patrick J. Lynch, Sarah Horton. Yale University Press, March 2002.

Cover: HTML for the World Wide Web with XHTML and CSS: Visual QuickStart Guide, Sixth Edition. By Elizabeth Castro. Pub. Peachpit Press August 2006.

Hand-picked best book recommendations for Web site design, CSS, graphics, Photoshop, color, accessibility, more

In association with
 In Association with Amazon.com 
http://brainstormsandraves.com/archives/2003/09/03/mt_replace_image_with_alt_text/
Page last modified 14 July, 2007 - 10:20pm PDT Page load time: 0.009894 seconds.