CMP DAM Asset Picker in CMS
Describes how to set up a template site to use Optimizely Digital Asset Management (DAM) UI integration packages.
Package prerequisites
- EPiServer.CMS.Core 12.8.0 or later
- EPiServer.CMS.UI 12.9.0 or later
Install the Optimizely CMP integration package
- Enter the following command to install the Optimizely Content Marketing Platform (CMP) integration package.
$ dotnet add package EPiServer.CMS.WelcomeIntegration.UI
- In
Startup.cs
add following line:services.AddDAMUi();
Configure the Optimizely CMP integration
See also Integrate CMP DAM Asset Picker in CMS.
You can customize the integration in theEPiServer\Cms
section of application.json
:
{
"DAMUi" : {
"Enabled" : true,
"Settings" : {
"Welcome" : {
"IconClass" : "dijitNoIcon",
"AvailableTypes" : "episerver.core.imagedata",
"StoreName" : "episervercmsdamcontentcreation",
"Endpoint" : "https://app.welcomesoftware.com",
"PathAndQuery" : "/cloud/library-picker?assetTypes=image"
}
}
}
}
IconClass
– Choose an icon class. Default:dijitNoIcon
.Availabletypes
– Specify the new editor command that is added only if it is (or inherited from) one of the available image types. Default:episerver.core.imagedata
so properties that let you add an image have the new command.StoreName
– Specify the server side code (with your new store) into which you can add your business logic. Default:episervercmsdamcontentcreation
.EndPoint
– Specify the end point to transform the root DAM domain for each environment you have (inte, preprod or prod) Default:app.welcomesoftware.com
.PathAndQuery
– Specify the path and query so that you can add default filters for the DAM library picker by image, video or all. Default:image
.
Configure the connection to CMP
Prerequisite
Install
Optimizely.Cmp.Client
.
An optional parameter to the AddDAMUi
method lets you provide credentials.
services
.AddDAMUi(
o => o.Enabled = true,
o =>
{
o.ClientId = "YourApplicationClientId";
o.ClientSecret = "YourApplicationClientSecret";
}
);
You can also provide the Client ID and Client Secret via appsettings.json
, as the second parameter in an Options
configuration: CmpClientOptions
.
Note
Available only in CMS 12, Optimizely supports images, videos and some files, such as PDFs, Word Documents, Excel Spreadsheets, Zip and 7Zip files. In the case of files, an anchor tag is rendered to link to that specific file.
You have the following options to use this feature:
- Use the provided C# service to get the metadata from CMP by injecting the
IDAMAssetMetadataService
where you want to use it.
TheIDAMAssetMetadataService
contains one method,GetAssetMetadata(Guid id)
, which retrieves metadata from CMP using the GUID of a specific asset. This GUID can be found within the information dialog of any asset in CMP. - Use the
HtmlHelper
extension method,RenderTagWithMetadata
which renders an appropriate HTML tag, based on retrieved asset.
To use it, import@using EPiServer.Cms.WelcomeIntegration.UI.Helpers;
inside a .cshtml page of choice, and use the page model that contains aContentReference
property.
Then, call@await Html.RenderTagWithMetadata(x => x.YourWelcomeContentReference)
with an expression that provides aContentReference
. You should link thisContentReference
to a CMP Asset.
Your page should now render either an image, a video or a link to the supported file with the respective metadata attached to the HTML tag. - Use the
TagHelper
calledDAMAssetTagHelper
, which does the same thing as above but is used a bit differently.
To use it:- Add the tag helper in your
\_ViewImports.cshtml file:@addTagHelper \*, EPiServer.Cms.WelcomeIntegration.UI
. - Add
\<dam-asset content-reference="@Model.YourWelcomeContentReference"/>
to your .cshtml page of choice.
Your page should now render either an image, a video or a link to the supported file with the respective metadata attached to the HTML tag.
- Add the tag helper in your
The following example shows HtmlHelper
and TagHelper
on Alloy site:
@using EPiServer.Cms.WelcomeIntegration.UI.Helpers;
@model PageViewModel<StandardPage>
Using HtmlHelper
@await Html.RenderTagWithMetadata(x => x.CurrentPage.WelcomePageImage)
Using TagHelper
<dam-asset content-reference="@Model.CurrentPage.WelcomePageImage"/>
The result is shown in the following image.
Configure security headers
If your site uses content security policy (CSP) headers ensure that https://app.welcomesoftware.com
is included to prevent errors in the CMS UI when selecting assets.
Related topics
Looking for installation on CMS 11?
See Install the Optimizely DAM Asset Picker (for CMS 11).
Updated 15 days ago