Plugin: Icon-o-matic Documentation

I created Icon-o-matic to “scratch an itch.” (Actually, I have several itches this plugin scratches.)

  • It’s an easy way to reuse icons in multiple posts, without looking for the URI or uploading yet another copy of the image. And with a handful of images available, reusing fun little icons could be a nice addition to I believe this is the typical use most will be interested in, and the screenshots here reflect it.
  • I have a few Scouts who are authors for Scouting Stories. They want to insert some clip art to go with their stories, but don’t have much (or any) knowledge of HTML, resizing images, graphics formats, or similar topics. I can create and add some clip art to that Icon-o-matic/MT installation to let them do this easily. (And maybe that will encourage them to actually write something! But I digress.) Icon-o-matic doesn’t have any file size or dimention limits, so I can give them larger art—100 × 300 or 250 × 250 pixels, for example.

Basically, if you want to re-use any images of any size on your MT-powered site, Icon-o-matic will meet your needs!

Movable Type 3.2 or 3.31 and the File::Find Perl module are required. File::Find is a standard module, and should be a part of any Perl installation. Be sure to read the Plugin Version Notes for some important details.

  1. Purchase Icon-o-matic. The cost is $10. Download and extract.

  2. Upload the contents of the plugins/ folder to your installation.
  3. Create a directory to hold your icons. This must be a web-accessible directory with permissions of 755. Upload your favorite icons into this folder, and create additional directories inside this folder to organize your images. You can use the icon-o-matic/ directory and supplied icons if you like. The supplied icons come from the FAMFAMFAM Silk Icons collection. There are many more available than I included—all free!

Log into Movable Type and find Icon-o-matic’s listing in your Plugins screen. Icon-o-matic will work at the system or blog level. Click the Show Settings option and fill in some required information:

  • If you want to set Icon-o-matic’s options at the system level, be sure to check the box labeled Override weblog-specific settings with the settings below.
  • The icon directory path is the absolute path to your icon directory. If you’re not sure what to enter here, look at your weblog’s Publishing Paths Site Root setting—chances are it should be the same as this with your icon directory appended to it.
  • The icon directory URI is the web address you would use to get to the icon directory.
  • I believe the palette position checkbox is fairly self-explanatory, but you can compare the screenshots to see the difference. Placing the palette on the right-hand side will work best at screen resolutions of 1024 × 768 or larger—otherwise, you’ll need to scroll horizontally to get at the pallette. (It’s really not that technical, tough: if you see white space on the right of your entry-editing screen, it’ll work fine.)
  • The Show & Hide checkbox will simply provide a link on your Edit Entry page that lets you show and hide the palette. It’s just an easy way to get it out of the way. The default option below it lets you control its behavior.
  • The HTML wrapper is an easy way to consistently format your icons. The wrapper is simply inserted around the icon when you click it. The included HTML will simply remove the border from around the image. A better use might be to use something like <span class="iconomatic"> and add an .iconomatic { } definition to your stylesheet, but it’s certainly not necessary.

At this point, if you try creating a new entry (or editing an existing one) you should see the icon bar and your icons. If you don’t, have a look at the Activity Log. It’ll tell you if it couldn’t find the directory you specified, which is mostly likely the problem.

Adding Icon-o-matic to the Comment Textarea

I know the following seems like a lot of steps and detail, but it’s a lot easier than it probably looks.

  1. If you’d like to give your commenters separate icons to use when leaving a comment, create a comments/ directory within the icons directory you just created, as above. The comments/ folder must also have permissions of 755. Add icons to this directory.
  2. You’ll want to use the <MTCommentIcons> tag to add the icons to the text area. In the Individual Entry Archive, just above the comment textarea, add something like “<MTIfAllowCommentHTML> <div class="commenticons"><MTCommentIcons></div> </MTIfAllowCommentHTML>.” Because Icon-o-matic inerts the img HTML tag, you must have Allow HTML in your weblog’s Settings Feedback screen checked.

    You might also want to use the form and textarea attributes with the tag (as in <MTCommentIcons form="commentsform" textarea="boxforcomments">) if your form and textarea are not the default. (The default name for the form is comments_form, for the textarea it’s text.) If you’re using the default—and you probably are—you don’t need to worry about these options.

    • Personally, I would recommend creating a separate Index Template for this tag rather than placing it inside your Individual Entry Archive. The reason is simple: every time you add/remove icons you’ll have to rebuild the Individual Entry Archives to update the textarea icons.

      Create a new Index Template named icon-o-matic.php, for example. Inside that enter “<div class="commenticons"><MTCommentIcons></div>.” In the Individual Entry Archive put “<MTIfAllowCommentHTML> <?php include_once( $_SERVER["DOCUMENT_ROOT"]."/icon-o-matic.php" ); ?> </MTIfAllowCommentHTML>.”

    • Dynamic publishing is not currently supported, so the above method is going to be the best way for dynamic-publishers to use the MTCommentIcons tag.

    After adding the code to your templates be sure to save and rebuild them.

  3. Lastly, in your weblog’s General Settings you’ll need to update the Sanitize settings to include img src. If you haven’t changed these before, you’ll probably want the Use My Settings field to read “a href,b,i,br/,p,strong,em,ul,ol,li,blockquote,pre,img src,” maintaining the existing Sanitize functionality.

Purchase a copy of Icon-o-matic now for only $10!

Movable Type version 3.2 and 3.31 each require a different version of Icon-o-matic. Both are included in your purchase, but it’s important to note that there are differences.

Icon-o-matic will be actively developed for the most recent release of Movable Type only, currently 3.31. If you require the latest features of Icon-o-matic, you’ll need to upgrade to the latest version of Movable Type. Refer to the Changelog timeline below for release details.

Version History Summary
Icon-o-matic 2.08 is required for Movable Type 3.31
Icon-o-matic 2.06 is required for Movable Type 3.2

January 31, 2007: version 2.09

  • Icons are now sorted alphabetically, rather than the random hodge-podge that resulted with previous versions.
  • Those who use the Firefox browser will be able to insert an icon at the cursor position, rather than always appending to the end of your entry.

July 16, 2006: version 2.08

  • Added the “Show & Hide” feature, to make it easy to hide the palette if it’s in your way.
  • Made some minor formatting adjustments to better support large images.
  • Icon-o-matic was updated for Movable Type version 3.31. MT 3.31 is required for this release. Version 2.06 is still available for users of MT 3.2, but new features—such as Show & Hide—will not be added.

May 9, 2006: version 2.06

  • Fixed a warning that showed up in the server logs.

February 8, 2006: version 2.05

  • Organization comes to Icon-o-matic, by supporting subdirectories.

January 2, 2006: version 2.04

  • Added the closing quote mark to the img tag’s alt attribute.
  • The Icon-o-matic palette for the Extended Entry textarea is now correctly hidden if you aren’t using that textarea.

December 30, 2005: version 2.02

  • Made the right-hand palette option the default and fixed where on the page it is attached, meaning it works for everybody now.
  • Fixed the documentation link.

December 25, 2005: Initial release, version 2.0. Requires Movable Type version 3.2. The successor to Smilies.