Created: 24 Sep 2019, last update: 30 Jan 2022
Building a Sitecore DAM connector
Recently I was involved with building a Sitecore DAM Connector, for Adobe AEM Assets. I found out how easy it is to create a DAM connector where the media data stays on the DAM server. I call it a WebDam. Like the Stylelabs, Sitecore Connect™ for Sitecore DAM
There are two ways how a DAM connector can work. First one is copy the asset to Sitecore and keep it in sync. Or make a reference to the media an use the DAM system for media Content delivery. For cloud based DAMs with an excellent public media delivery services, like Stylelabs and Adobe is the reference option, a WebDam a good way.
You need these changes in Sitecore for a Web DAM connector that store a reference to the media:
- Adjust the render Field Pipeline for showing the DAM media
- Adjust the Image Field to show the DAM media in the Content Editor
- Add browse/select button to Image Field
- Add browse/select button to Webedit Image Field
- Optional add a button to RichText Field
Creating the buttons and write the logic to the DAM system is commonly and DAM specific. I explain in this blog only how to adjust the Sitecore Pipelines.
The Image Field.
Sitecore stores and image in an image field in XML. You can see and edit in View, Raw values, example:
<image mediaid="{1D8648E3-A526-4CED-BAE7-62C287401390}" />
For media from the connector we add some extra attributes and leave the mediaid empty, example:
<image mediaid=”” src=”http://www.stockpick.nl/media/1201/serverless-sitecore-forms.jpg” thumbnail="http://www.stockpick.nl/media/1201/serverless-sitecore-forms.jpg?crop=0.030478944719700033,0.0000000000000001656007460037,0.28374479908704919,0&cropmode=percentage&width=645&height=246&rnd=132114731440000000" test="ok" mediaid="" webdam-content-type="image" />
To make this working in Sitecore you need to adjust the renderField pipeline and accept this kind of value and remove the for internal use attributes. And patch the config to place this control in the pipeline.
Example code for a WebDam
using System;
using System.Collections.Generic;
using System.Linq;
using System.Xml.Linq;
using Sitecore.Pipelines.RenderField;
namespace WebDam
{
public class GetWebDamImageRenderField
{
private static readonly string[] DontshowParameterList = new string[5]
{
"thumbnail",
"mediaid",
"webdam-content-type",
"language",
"version"
};
public void Process(RenderFieldArgs args)
{
string fieldValue = args.FieldValue;
if (!(args.FieldTypeKey.ToLower() == "image") || string.IsNullOrWhiteSpace(fieldValue))
return;
XElement xelement = XElement.Parse(fieldValue);
XAttribute xattribute2 = xelement.Attribute((XName)"mediaid");
if (xattribute2 != null && !string.IsNullOrWhiteSpace(xattribute2.Value))
return;
foreach (var key in DontshowParameterList)
{
if (xelement.Attribute(key) != null)
{
xelement.Attribute(key).Remove();
}
}
args.Result.FirstPart = xelement.ToString();
}
}
}
Config patch:
<configuration xmlns:patch="http://www.sitecore.net/xmlconfig/" xmlns:set="http://www.sitecore.net/xmlconfig/set/">
<sitecore>
<pipelines>
<renderField>
<processor patch:after="processor[@type='Sitecore.Pipelines.RenderField.GetImageFieldValue, Sitecore.Kernel']" type="WebDam.GetWebDamImageRenderField, WebDam"/>
</renderField>
</pipelines>
</sitecore>
</configuration>
With this piece of code you have a minimal variant of a webDam, you can edit an Image field in Raw values. And of course you should build the other items a DAM connector should have to look and work nice.
