Image CustomFields in Movable Type 4.1

Dilemma: Image Link Instead of Image

Many of the sites I build use CustomFields to place a masthead image at the top of an entry. This takes the hassle out of uploading and really just makes it easier for customers to have a consistent look and feel for their posts. Trouble is, when I upgraded to Movable Type 4.1 (see this post for details about how to upgrade from Arvind’s CustomFields plugin to the one that’s built in to MT Professional Pack), the image asset links were only showing up as text links. For example, using the code they suggested on the CustomFields screen:

 <mt:IfNonEmpty tag="EntryDataMastheadImage">
      <mt:EntryDataMastheadImage />
 </mt:IfNonEmpty>

Resulted not in a placement of the image, but rather the words “View Image” with a link to the photo. Not exactly what I had in mind. I want the actual photo itself.

Now, there are all sorts of cool new tags (like <mt:AssetLabel /> and <mt:AssetUrl />) that let you get at any part of your uploaded asset. The only trouble is, there’s no documented way to put the asset you want (in our case <mt:EntryDataMastheadImage />) in context. Sure, you can do an mt:Assets loop that lets you list the last however many assets; but we’re trying to get at mt:EntryDataMastheadImage, nothing else.

Solution: Create CustomField Container With -Asset Suffix

When you create a custom field in Movable Type, it creates two tags for you. The first is the one I listed before: <mt:EntryDataMastheadImage /> and it’s a single tag that’s used to call to the asset in question. There’s another, undocumented tag that’s created: <mt:EntryDataMastheadImageAsset />. This tag is a container tag that does exactly what we need: puts that particular CustomField data in context. Once it’s in context, we can use all of those nifty tags to get at whatever specific asset information we want. Here’s how I solved my particular problem:

 <mt:IfNonEmpty tag="EntryDataMastheadImage">
      <mt:EntryDataMastheadImageAsset>
           <img src="<mt:AssetURL />" />
      </mt:EntryDataMastheadImageAsset>
 </mt:IfNonEmpty>

A great big round of applause to Mark Carey for helping me discover this little undocumented nugget. Update: Arvind pointed out that it’s documented on his forums.

  • posted on 5 March 2008
  • by Jesse

InterAction:

9 March 20081. Dan Wolfgang:

Wow. Just, fantastic. Thanks to you and Mark for digging this up.

18 February 20092. Chris:

Do you have any Idea why people from Six Appart didn't noticed that? The function "custom fields" for images works only with yout Code-Tweak. Without i shows only linkt to the image. thanks, a lot, now i can organize my images at one place, format them, put borders ans so on. Great job.

13 September 20093. Erika:

That one doesn't seem to work anymore! I can't believe how much time I'm spending trying to make something so basic work.

24 September 20094. Josh Sadler:

Fantastic! Thanks for posting!


YourThoughts?



(Minutia)

  • Author:
    Jesse
  • Published:
    Mar 5, 2008
  • Chapters:

GetUpdated

ElseWhere

Find me on aim Find me on delicious Find me on digg Find me on dopplr Find me on facebook Find me on lastfm Find me on linkedin Find me on livejournal Find me on msn Find me on pownce Find me on skype Find me on technorati Find me on twitter Find me on vox Find me on yahoo Find me on youtube