...

The plugin provides a decorator for the existing content selector or a button in the TinyMCE toolbar, enabling users to choose content from the DAM. Once selected, the content (Or or a shared embedingembedding) is downloaded and imported into the default Optimizely 's media management system.

Examples

...

To get started with the plugin, you need to install it from the Optimizely NuGet feed.

The Nuget package named `Fotowareis called Fotoware.ContentPlatform.Plugins.Optimizely`Optimizely, and is available on [ at: https://nuget.optimizely.com/package/?id=Fotoware.ContentPlatform.Plugins.Optimizely]()

Dependencies:

• EPiServer.CMS.UI >= version 12.18.0

• EPiServer.CMS.TinyMce >= version 4.2.0

Register in Startup.cs

Navigate to the Starup Startup.cs file and add the following code to the ConfigureServices method to register the plugin with the solution's service collection.

...

"PreviewContentSelectionName": "Preview"

}

]

}

```

Implementing the model interface

You need to must implement the `IFotowareMedia` IFotowareMedia interface on a content type that inherits from the Optimizely `MediaData` MediaData class in your solution. This enables additional fields used by the addon that the add-on uses to maintain synchronization with the original media.

...

Example implementation of `IFotowareMedia`IFotowareMedia

```cs

[ContentType(GUID = "0A89E464-56D4-449F-AEA8-2BF774AB8730")]

...

set => this.SetPropertyValue(p => p.Description, value);

}

}

```

The `ModifiedDate` 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.

...

To add a button for inserting media from the DAM, include *contentplatform-insert-media* in the TinyMCE configuration.

...

"styleselect blocks | alignleft aligncenter alignright alignjustify | removeformat | table toc | code"

, "");

});

```

By default, the button is added to the default tinymceTinyMCE, but if you have custom tinys for blocks with other configsconfigurations, you can apply the following (*: .AddFotowareContentPlatformToTinyMCE(serviceCollection)*):

```

services.Configure<TinyMceConfiguration>(config =>

...

Decorating the Optimizely property with the `UIHint` UIHint attribute will replace the Optimizely built-in content selector with an extended version that supports selecting content from both DAM and Optimizely content.

Example of using the image `UIHint`UIHint

```cs

[Display(Name = "Content Reference (Optimizely)", GroupName = "Content Reference", Order = 10)]

...

public virtual Url ImageAsUrlOptimizely { get; set; }

```

The `UIHint` UIHint attribute can be applied to `ContentReference` ContentReference and `Url` Url property types.

FotowareConfiguration`FotowareConfiguration

You can use the `FotowareConfiguration` FotowareConfiguration attribute to add settings for rendering in the frontend. This should be used together with the `UIHint` UIHint attribute.

• `DisableDefaultMediaSelector` DisableDefaultMediaSelector - To turn off the default Optimizely Media Selector, set the property to `true` true. The default value is `false` false.

• `QueryParameters` QueryParameters - An additional query string appended to the media URL, i.e., format=webp&quality=75.

• `ImageWidth` ImageWidth - The default width of the image imported into TinyMCE. This is does not applicable for apply to video or PDF filefiles.

Disable the plugin in Optimizely Commerce Asset list

To disable the plugin in the Optimizely Commerce Asset list, set the `PreventCommerceEditorIntegration` PreventCommerceEditorIntegration setting to true.

```json

"ContentPlatform": {

...

The plugin has a number of logging information that can be used for information and debugging the integration. Update `appsettingsappsettings.json` json as the following.

```json

"Logging": {

...

You can configure the plugin to run with Optimizely multi-site scenario by specifying the site ID for each site in the `Sites` Sites collection in appsettings.json.

```json

"ContentPlatform": {

...

"PreviewContentSelectionName": "Preview"

}

]

}

]

}

```

`SiteId` SiteId - The ID of the site, which you can find in the Admin > Manage Websites.

Customization

Controlling the structure of downloaded assets in Optimizely

...

This customization is achieved by implementing the `IFolderResolver` IFolderResolver interface.

Customize the TinyMCE HTML template

You can create custom HTML input when inserting media into TinyMCE, such as filling in the alt text or adding CSS classes.

To achieve this, implement and register an `IFotowareTinyMceTemplate` IFotowareTinyMceTemplate where you implement the `GetHtmlGetHtml(ContentReference contentReference, InsertTinyMceMedia insertTinyMceMedia)` method.

Event handling with Fotoware events

Example of how to register event handlers for the Fotoware events in an `InitializationModule` InitializationModule

```cs

[ModuleDependency(typeof(InitializationModule))]

...

// Handle content downloaded event here

}

}

```

`OnContentDownloading` OnContentDownloading - Raised before downloading an a media with the possibility to cancel the action.

`OnContentDownloaded` OnContentDownloaded - Raised after the media has been downloaded.

How to use in the frontend

Using

...

PropertyFor

```

@Html.PropertyFor(m => Model.CurrentPage.ImageAsContentReference)

...

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

...

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

...

<img alt="image01.jpg" src="/globalassets/fotoware/2024/6/image01.jpg?format=webp">

```###4.

Adding query parameters

```

@Html.PropertyFor(x => Model.CurrentPage.ContentReferenceOptimizely, new { QueryParameters = "format=webp&quality=80" })

...