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.
Chapters
- 59 articles in the chapter Movable Type
- 17 articles in the chapter Design
- 11 articles in the chapter Social Networking
- 7 articles in the chapter Announcements
- 7 articles in the chapter CMS
- 7 articles in the chapter Journeys
- 6 articles in the chapter Code
- 5 articles in the chapter Writing
- 5 articles in the chapter Blogging
- 4 articles in the chapter Downloads
- 4 articles in the chapter CSS
- 3 articles in the chapter Reviews
- 3 articles in the chapter Projects
- 3 articles in the chapter App
- 2 articles in the chapter DIY
- 2 articles in the chapter Freebies
- 2 articles in the chapter WordPress
- 2 articles in the chapter Gadgets
- 2 articles in the chapter Plugins
- 2 articles in the chapter Apple
- 2 articles in the chapter SEO
- 2 articles in the chapter Accessibility
- 1 articles in the chapter Beginners
- 1 articles in the chapter Javascript
- 1 articles in the chapter Miscellany
- 1 articles in the chapter Users
- 1 articles in the chapter Standards
- 1 articles in the chapter Print
- 1 articles in the chapter Mobile
- 1 articles in the chapter Photography