Versions Compared

Old Version 19

changes.mady.by.user Nicole Keil

Saved on

compared with

New Version Current

changes.mady.by.user Elaine Foley

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

Code Block
languagejson
"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.

...

Fotoware Media imported into Optimizely are organized into a year-month folder structure to facilitate browsing and prevent issues with large media lists in the same folder, which Optimizely doesn't handle well. By default, folders are created based on the year and month when the media was imported. However, you can customize this structure. For example, you could base it on metadata within your solution.

2024/

|

---└── 06/

|

├── image01.jpg
└── video02.mp4

This customization is achieved by implementing the IFolderResolver interface.

...

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">