Adding new fields to the Set Media Attributes dialog

I recently emailed TERMINALFOUR with a feature request asking for the ability to add extra fields to the Set Media Attributes dialog box of images.

(By the way, the Set Media Attributes dialog box in TinyMCE, we recently discovered, appears only to be available when you double-click an image in the TinyMCE editor.)

Imagine my delight when they emailed back saying that I could do this now.

Existing

Here’s the Set/Edit Media Attributes dialog box that we have:

Set Media Attributes dialog box

This has editable options for:

  • Width
  • Height
  • Border
  • Padding
  • Margin
  • Float

But we wanted to add:

  • class
  • id

and if we were feeling really thorough the HTML specification also allows for:

  • hspace=”number
  • ismap=”ismap”
  • longdesc=”URL
  • lowsrc=”URL
  • name=”text
  • usemap=”URL
  • vspace=”number

What to do

It turns out that this can be updated by editing the media template formatter for Images (i.e. via TOOLS > TEMPLATES > Media : Click on the Edit Formatters button).

You then add your new attributes in this format:

id="<t4 type="media" editable="true" attribute="id" />"

Where attribute controls the label for the field.

Original

<img src="<t4 type="content" output="file" modifiers="nav_sections" name="Media" />" alt="<t4 type="content" output="normal" modifiers="striptags, htmlentities, nav_sections" name="Description" />" style="width : <t4 type="media" editable="true" attribute="width" />px; height : <t4 type="media" editable="true" attribute="height" />px; border : <t4 type="media" attribute="border" />; padding : <t4 type="media" attribute="padding" />; margin : <t4 type="media" attribute="margin" />; float : <t4 type="media" attribute="float" />;" />

Now

<img src="<t4 type="content" output="file" modifiers="nav_sections" name="Media" />" alt="<t4 type="content" output="normal" modifiers="striptags, htmlentities, nav_sections" name="Description" />" style="width : <t4 type="media" editable="true" attribute="width" />px; height : <t4 type="media" editable="true" attribute="height" />px; border : <t4 type="media" attribute="border" />; padding : <t4 type="media" attribute="padding" />; margin : <t4 type="media" attribute="margin" />; float : <t4 type="media" attribute="float" />;" id="<t4 type="media" editable="true" attribute="ID" />"media" editable="true" attribute="Class" />" />

What it looks like

Amended Set Media Attributes dialog with new fields: ID and Class

Amended Set Media Attributes dialog with new fields: ID and Class

You can see from the screenshot above that the new fields have now been included in the Set Media Attributes dialog box.

Observations

  • It would appear that the field labels have to be in lowercase.  If you enter “attribute=”ID” then Site Manager converts it to all-lowercase.
  • You have a certain degree of control over the placement of the new fields in the dialog box.  Enter them at the start of the output code and they’ll appear at the top of the dialog box, enter them at the end of the code and they appear at the bottom of the form.

Conclusion

I’m not sure whether this functionality has been in Site Manager for long but I really wish we’d known about it sooner, which is why I’m blogging it for you lovely folks.

Update

Further information, I’ve just discovered, can be found on the T4 Extranet: Media Attributes.  It looks like this functionality has only been available since Site Manager 6.2.  Very useful.

About these ads

About Gareth J M Saunders

Hi, I'm Gareth J M Saunders, 6' 4", married to Jane, father of 3 boys (twins and singleton), I'm a priest in the Scottish Episcopal Church, employed as the Web Architect at the University of St Andrews. My main interests are HTML, CSS (inc. frameworks), jQuery, Information Architecture and Agile development.
This entry was posted in SiteManager and tagged , , , , , , , , , , . Bookmark the permalink.

One Response to Adding new fields to the Set Media Attributes dialog

  1. James says:

    When I added extra attributes to a media item with a custom made media template, if the template included a tag, everything is ok until you open the edit attributes box, upon closing it there is a javascript error and the attribute values are not saved. I am using SM6, I imagine this works ok in SM7 (hopefully!).

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s