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

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