T4 tags: Media (type="media")

Last Modified:: 20 Dec 2024
User Level:: Power User

Available from the Content Type and Page Layout tag builder. The "media" tag type is used for outputting content from the Media library, and to add Media attributes within the Media content layout.

Outputting content from the Media Library

The tag can be used within Content Types, Page Layouts, CSS and JavaScript files.

When you use it for a Content Type, it does not allow a user to select a file from the Media Library in content, but rather insert a media file (image, file) into the Content Type Layout.

Example media tag generated from the tag builder

In the T4 Tag, the type is "media", the id is the media file's id and the formatter is the Media Layout to be used (a Content Type Layout on the Media Content Type).

Media attributes within the Media Content Layout

Media Attributes can be used within the Media Content Type Layout to allow an end-user to specify further information about the Media Item or override values populated within the Media Library when using Media in an HTML element.

As an example, the default alt text could be the Description from the Media Library. This would be with the option to define a different alt text for a particular instance of the Media through a Media attribute. Another example might be that the default text for linking to File Media is the Name element, but with the option to define a different link text for this particular instance of the Media through a Media attribute.

Standard attributes

There are four standard attributes used with media located in the Media library. These attributes all have a default value, defined in the Media Library and users can modify them for their particular instances of the media if they have been configured to allow it. This could be used to resize images or change the text used to link to file Media.

Attribute	Description
name	The name of the Media Item
description	The description of a Media Item
width	Dimensions only apply to image files
height	Dimensions only apply to image files

User-defined attributes

Additional Media attributes can be set by inserting the T4 tag into the Media Content layout. These Media attributes are optional for users and are blank by default.

Do not rename User Defined Media attributes after content has been added using these attributes. Renaming the attributes can cause loss of data

Attributes

The following are specified:

Attribute	Description	Example
type	This should always be media.	type="media"
attribute	Name of the attribute.	attribute="description"
editable	To determine whether or not this attribute is editable by the user. This attribute is only applicable to the four standard attributes (name, description, width and height). If not specified within the T4 tag, the default is true. Values are true or false.	editable="false"
format	Used to output text and a value for the attribute.	format="width: $value"

Examples

Allow users to specify a different alt text

The alt text for image media is populated with the Description from the Media library (in a standard installation). This does allow users to specify a different alt text for this instance of the media. NOTE: this does not update the Description in the Media library.

In this example, the editable attribute is not specified, and therefore the default value of true is assumed, making it editable by users.

Do not allow users to specify a different alt text

The alt text for image media is populated with the Description from the Media library making users unable to modify this when editing media attributes.

Allow users to resize images

The width and height for image media is populated by the size of the image within the Media library. Users are able to resize the image in the editor by specifying an alternative height or width, or both.

<img src="<t4 type="content" name="Media" output="file" modifiers="" />" alt="<t4 type="media" attribute="description" />" style="height: <t4 type="media" attribute="height" editable="true" />px; width: <t4 type="media" attribute="width" editable="true" />px;" />

The following code is generated when a user enters a height of 80px and a width of 40px. As a result, file name of the image is changed because the published file is resized to different dimensions.

By default, the size of the published image file on the server is resized during publish and is not resized purely by the browser.

From 8.4.0 you can add the attribute client-resize="true" to File elements to ensure that the Publish engine does not resize the image and instead leaves the resizing to be done by the browser client-side.

<img src="<t4 type="content" name="Media" output="file" client-resize="true" />" alt="<t4 type="media" attribute="description" />" style="height: <t4 type="media" attribute="height" editable="true" />px; width: <t4 type="media" attribute="width" editable="true" />px;" />

Allow users to specify a class for an image

A user defined attribute can be added to allow users to specify an optional class for an image. When modifying Media attributes, users have the option for class where they can type the required class. If this is not specified, the default value would be blank.

Allow users to specify the link text used for a file

When file media (such as, PDFs and Word Documents) are inserted into the WYSIWYG, the text used to link to the file is populated by the Name in the Media library (default installation), but users can modify the link text by editing Media attributes.

<a href="<t4 type="content" name="Media" output="file" modifiers="" />"><t4 type="media" attribute="name" editable="true" /></a> (<t4 type="meta" name="Media" meta="filesize" />kB)

Allow users to output media attributes as text

A user defines the attributes which they want to be output as text, in this case, the height and width of the image. They also need to add a format tag that formats the text being output; adding $value outputs the value of the selected attribute. When there is no value for that attribute, nothing is output.