DFS 11.0 - 3 Render DAM for Sitecore Field Types

DAM for Sitecore extends Sitecore's field controls for Web Forms and Sitecore's field helper for Sitecore MVC to render the three field types in a Sitecore page.

The key information for rendering most asset types is the AssetItemId and the quality. This information is stored in the field data.

Videos are a bit more complex because they use an external video player, but they are still executed the same way.

3.1 Register control tag

For Sitecore MVC:

@using DFS.Data.Fields

For Web Forms:

<%@ Register assembly="DFS" Namespace="DFS.Web.UI.WebControls" TagPrefix="dfs" %>

3.2 How to render an asset

The field render is used to render an asset as a visual output if possible. It supports some optional attributes that can be used to control which quality is outputted.

For Sitecore MVC:

@Html.Sitecore().Field("MyAssetMediaField")
@Html.Sitecore().Field("MyAssetMediaField", new {quality="QualityId"})

For Web Forms:

<dfs:Asset runat="server" Field="MyAssetMediaField" />
<dfs:Asset runat="server" Field="MyAssetMediaField" Quality="QualityId"/>

This will render any asset type. Depending on the asset of type, the appropriate HTML is rendered.

These are the parameters that can be used for the field type Asset.

NOTE: all another not known parameters will be added to the html without any validation.

@Html.Sitecore().Field("MyAssetMediaField", new {quality="QualityId", width=60, height=60})

<dfs:Asset runat="server" Field="MyAssetMediaField" quality="QualityId" width="60" height="60"/>

@Html.Sitecore().Field("MyAssetMediaField", new {quality="QualityId", keepAspectRatio=true})

<dfs:Asset runat="server" Field="MyAssetMediaField" quality="QualityId" keepAspectRatio="True"/>

@Html.Sitecore().Field("MyAssetMediaField", new {quality="QualityId", upscaleAllowed=true})

<dfs:Asset runat="server" Field="MyAssetMediaField" Quality="QualityId" upscaleAllowed="True"/>

@Html.Sitecore().Field("MyAssetMediaField", new {style="color:red;"})

<dfs:Asset runat="server" Field="MyAssetMediaField" style="color:red;"/>

@Html.Sitecore().Field("MyAssetMediaField", new {class="myColor"})

<dfs:Asset runat="server" Field="MyAssetMediaField" class="myColor"/>

3.3 How to render an asset link

The syntax to render a link of an asset.

For Sitecore MVC:

@Html.Sitecore().BeginField("AssetLink", Model.Item, new {haschildren=true})
@Html.Sitecore().Field("LinkTextField", Model.Item)
@Html.Sitecore().EndField()

For Web Forms:

<dfs:AssetLink runat="server" Field="AssetLink">
	<sc:Text ID="linkTextField" runat="server" Field="LinkText" />
</dfs:AssetLink>

There are a number of parameters that can be used.
NOTE: all another not known parameters will be added to the html without any validation.

3.4 How to render a list of assets

DAM for Sitecore extends Sitecore with a field type, allowing to register multiple assets in one list. The assets in the list can be of any asset type.

To render a AssetList:

For Sitecore MVC:

@Html.Sitecore().Field("AssetListField")

For Web Forms:

<dfs:AssetList runat="server" Field="AssetList" ListClass="MyListClass" ItemClass="MyItemClass" />

This will render the assets in a list of this type:

<ul class="MyListClass">
	<li class="MyItemClass"> Assets will be rendered here based on Asset Type </li>
</ul>

Experience Editor

In order to make the assetlist editable in Experience Editor, use Sitecores EditFrame.

For Web Forms:

<sc:EditFrame ID="editAssetList" runat="server" Buttons="/sitecore/content/Applications/WebEdit/Edit Frame Buttons/DFSSample"></sc:EditFrame>

For Sitecore MVC:

@using (Html.BeginEditFrame(Model.Item.ID.ToString(), "/sitecore/content/Applications/WebEdit/Edit Frame Buttons/DFSSample")) {}

Add your button to Core under Edit Frame Buttons – /sitecore/content/Applications/WebEdit/Edit Frame Buttons/ and remember to update the field Fields - pipe-separated list of field names to be edited by the Field Editor on the button item.  

3.4.1 Iterating an Asset List

While the field render extension for the AssetList field will be useful for many general cases, there will also be a need for more specific handling of individual items. You can get the assets as a list, and iterate over each asset.

AssetlistField assetList = Sitecore.Context.Item.Fields["AssetList"];
if (assetList != null)
{
	foreach (var asset in assetList.Assets)
	{
		//To request the rendering html for the asset you call the RenderAsset method.
		//It returns an RenderFieldResult object
		var renderResultItem = asset.RenderAsset();


		var title = asset.AssetMetadata.Name;
		var id = asset.AssetMetadata.AssetId;
		var assetTypeIde = asset.AssetMetadata.AssetTypeId;
		var assetTypeName = asset.AssetMetadata.AssetTypeName;
		
		//Get dynamic metadata
		var someDynamicMetadata = asset.AssetMetadata["50343"];
	}
}

You can also pass an AssetListItemAtt object to RenderAsset. This will allow you to set the attributes of each AssetListItem 

RenderFieldResult RenderAsset(AssetListItemAttributes assetListItemAttributes)

3.5 Rendering html templates

The rendering html for each asset type is located at: Sitecore → System → Modules → Digizuite → MetadtaRoot → AssetTypeOutputRoot. In the section HTML, there are 5 fields:

• Rich Text Editor Media
• Rich Text Editor Link
• Asset Field Type
• Assetlink Field Type
• Content Editor Asset

Each field correspond to different context. In these fields you can use known tags (stampvalue), which will be replaced in a pipeline called DFS.GetAssetFieldValue. 

stampvalue-asset

See this table for possible values, that can be used.

stampvalue-selected

stampvalue-config

3.6 Overriding asset field renders

All renderings are processed using pipelines, and the pipelines can be changed to accommodate specific needs. The pipelines can be found in the DFS.Settings.Config file.

Just be aware that upgrades of the module might change or overwrite custom changes to the pipeline.