...
| Code Block | ||
|---|---|---|
| ||
"ContentPlatform": {
"BaseTenantUrlBaseCdnUrl": "https://yourdomain.preview-picturepark.com",
"RootFolderId": 102,
"EnableOnAllMedia": true,
"DisableDefaultMediaSelector": false,
"DefaultTinyMceImageWidth": 600,
"UseImageCdnUrlInTinyMce": false,
"MediaTypes": [
{
"Name": "Image",
"FileExtensions": ".jpg,.jpeg,.jpe,.gif,.bmp,.png,.gif",
"DownloadContentSelectionName": "Original",
"PreviewContentSelectionName": "Preview",
"PreferredDownloadWidth": 1200
},
{
"Name": "Video",
"FileExtensions": ".mov,.mp4",
"DownloadContentSelectionName": "VideoSmall",
"PreviewContentSelectionName": "Preview"
},
{
"Name": "Pdf",
"FileExtensions": ".pdf",
"DownloadContentSelectionName": "Original",
"PreviewContentSelectionName": "Preview"
}
]
} |
Value | Description |
|---|---|
BaseTenantUrlBaseCdnUrl | The base URL of the picker. |
RootFolderId | The Optimizely media folder ID where the media is downloaded and stored. |
EnableOnAllMedia | When set to true, all media properties will have the DAM picker capability. |
DisableDefaultMediaSelector | When set to true, the default Optimizely media selector behavior will be disabled. |
DefaultTinyMceImageWidth | The default width for displaying images selected from the DAM in TinyMCE. |
UseImageCdnUrlInTinyMce | When enabled, the image URL in TinyMCE will use the CDN URL instead of the Optimizely image URL. |
MediaTypes | Configuration for the supported media types in the plugin. |
MediaTypes.Name | The name of the media type. The supported media types are Image, Video, and PDF. |
MediaTypes.FileExtensions | The file extensions of the media type, separated by a comma. |
MediaTypes.DownloadContentSelectionName | Refers to the content variant name used for downloading and importing into Optimizely media. |
MediaTypes.PreviewContentSelectionName | Refers to the content variant name used for previewing purposes. |
PreferredDownloadWidth | Specifies the preferred image width for downloading. This option is supported only for the Image media type. |
...
The ModifiedDate property is used to track when the media was last changed in the DAM. The plugin uses it to determine whether to download the media.
Configure TinyMCETin
yMCE
To add a button for inserting media from the DAM, include contentplatform-insert-media in the TinyMCE configuration.
...
How to use in the frontend
Using PropertyFor
...
@Html.PropertyFor(m
...
=>
...
Model.CurrentPage.ImageAsContentReference)
Output
...
<img
...
alt="image01.jpg"
...
src="/globalassets/fotoware/2024/6/image01.jpg"
...
/>
Adding a HTML attribute
...
@Html.PropertyFor(x
...
=>
...
Model.CurrentPage.ContentReferenceOptimizely,
...
new
...
{
...
Attributes
...
=
...
new
...
{
...
@class
...
=
...
"fotoware-image"
...
}
...
Output
...
<img
...
alt="image01.jpg"
...
class="fotoware-image"
...
src="/globalassets/fotoware/2024/6/image01.jpg">
Adding a query string
...
@Html.PropertyFor(x
...
=>
...
Model.CurrentPage.ContentReferenceOptimizely,
...
new
...
{
...
QueryStrings
...
=
...
new
...
{
...
format
...
=
...
"webp"
...
}
...
})
Output
...
<img
...
alt="image01.jpg"
...
src="/globalassets/fotoware/2024/6/image01.jpg?format=webp">
Adding query parameters
...
@Html.PropertyFor(x
...
=>
...
Model.CurrentPage.ContentReferenceOptimizely,
...
new
...
{
...
QueryParameters
...
=
...
"format=webp&quality=80"
...
})
Output
...
<img
...
alt="image01.jpg"
...
src="/globalassets/fotoware/2024/6/image01.jpg?format=webp&quality=80">
Use CDN URL
...
@Html.PropertyFor(x
...
=>
...
Model.CurrentPage.ContentReferenceOptimizely,
...
new
...
{
...
MediaOptions
...
=
...
new
...
{
...
UseCdnUrl
...
=
...
true
...
}
...
})
Output
...
<img
...
alt="image01.jpg"
...
src="https://optimizely.preview-picturepark.com/v/TBVACNY3/">
Use CDN URL with the specified width
...
@Html.PropertyFor(x
...
=>
...
Model.CurrentPage.ContentReferenceOptimizely,
...
new
...
{
...
MediaOptions
...
=
...
new
...
{
...
Width
...
=
...
600,
...
UseCdnUrl
...
=
...
true
...
}
...
})
...
Output
...
<img
...
alt="image01.jpg"
...
src="https://optimizely.preview-picturepark.com/v/TBVACNY3/fit-in:600x100000">