Easy image insertion in MT

February 8, 2007 4:22 PM

Movable Type: is there a plugin/hack that would make it easy to insert a different line of code depending on a selection from a pull-down menu?

What I'd like to do is replicate an old format on my blog posts seen in earlier posts here.

For all those posts, I was simply inserting the IMG tags in the actual title line of the post. That's obviously both cumbersome and bad coding.

What I'd like to do is have some kind of option in my edit window where I can select an item from a dropdown menu, or write in a keyword or something, and then the corresponding icon graphic appears in the post. As the page I linked to shows, I'd prefer it to be able to have "no icon" as an option, as well as possibly different sizes. (The former is a much bigger deal though)

The closest I came was CustomFields, but it didn't seem to be doable as it's not complex enough to correspond image tags to a selection field.

I guess the best comparison would be those weird "current mood" things on LiveJournal, etc. Except instead of selecting the mood and having it display the mood I'm in, a corresponding picture would be there.

I have this nagging suspicious this is a simple thing to do and the answer is right under my nose but I've tried unsuccessfully for a month now to come up with an idea.

posted by XQUZYPHYR to computers & internet (4 answers total)

My plugin RightFields let you define a field (either one of the standard MT fields you don't happen to be using, or an extra field) as a select menu, where you can define the list of options that will appear in the menu. So you might have an "icon" field with a set of options like this:

x1
x2
popcorn
whatever
somethingelse
etcetera

Then in your MT template code, you'd simply use something like:

<MTIfExtraField field="icon">
<div class="floating-icon">
<img src="/myimages/<$MTExtraFieldValue field="icon"$>.gif" />
</div>
</MTIfExtraField>

That would take care of the "no icon" issue as well151;you simply wouldn't select an icon.

You can do this with CustomFields, too, but I'm not sure of the syntax offhand.

If you do want to use RightFields for this and have questions about template code details, my plugin forums are at your disposal.
posted by staggernation at 4:54 PM on February 8, 2007

as well151;

OK, I'll preview next time. That should have been an em dash.
posted by staggernation at 4:55 PM on February 8, 2007

(Is there some reason you're not asking this in the MT forum?)

My immediate reaction is that you're overthinking this. You don't need CustomFields(or RightFields) to handle the entire image tag, just what you want the tag to represent.

1. Create your custom field and define the options
2. In your template, put the following:

   <h3 class="title">
       <MTIfNotEmpty tag="CustomFieldName">
           <img src="/PATH/TO/IMGS/<$CustomFieldName$>.gif" />
       </MTIfNotEmpty>
       <$MTEntryTitle$>
   </h3>

   (extra line breaks to avoid wraps and make it obvious what's going on; consolidate as you like)(also, that's CustomFields code. RightFields' is conceptually similar)

(I personally wouldn't put the image right inside the h3 like that, but I'm not going to define your semantics.)

If those images directly relate to something already in your content(think Slashdot's category images) the concept is the same, though it'd save you a little time to just use that instead.

If the images are completely arbitrary, you might think about Icon-o-matic instead.
posted by Su at 5:00 PM on February 8, 2007

Su, that little bit of code you mentioned did it. I'm getting a weird javascript error that doesn't seem to affect the site now that CustomFields is reenabled, but the tag structure is where I was messing up before. It seems to be working now and I'll play around with it some more over the weekend. Thanks!
posted by XQUZYPHYR at 6:43 PM on February 8, 2007