...

• Easy to add to both new and existing Optimizely solutions.

• The integration can be removed without affecting utilized assets.

• Automatically synchronize media from the DAM with Optimizely's default asset management system, simplifying the process for developers.

• Possible It is possible to configure content display to show only local media, media from the DAM CDN, or both.

• Allow developers to configure custom media models containing metadata synchronized from the DAM.

...

Installing the package

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

...

Known issues

• When using DXP and Cloudflare, you sometimes need to whitelist the "/EPiServer/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 Startup.cs file and add the following code to the ConfigureServices method to register the plugin with the solution's service collection.

using Fotoware.ContentPlatform.Plugins.Optimizely;
services.AddFotowareContentPlatformPlugin();

Configure appsettings.json

...

...

• /api/picturepark" URL in ALL ENVIRONMENTS.
  To do this, please contact Optimizely support.
  

• To create any WAF bypass rule, you will need a WAF bypass agreement signed by the customer. Additionally, a custom domain must be connected to the site; the generic *.episerver.net domain will not work.

Installation and usage

Installing the package

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

The Nuget package is called Fotoware.ContentPlatform.Plugins.Optimizely, and is available 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 Startup.cs file and add the following code to the ConfigureServices method to register the plugin with the solution's service collection.

using Fotoware.ContentPlatform.Plugins.Optimizely;
services.AddFotowareContentPlatformPlugin();

Configure appsettings.json

"ContentPlatform": {
  "BaseCdnUrl": "https://yourdomain.preview-picturepark.com",
  "RootFolderId": 102,
  "EnableOnAllMedia": true,
  "DisableDefaultMediaSelector": false,
  "DefaultTinyMceImageWidth": 600 600,
  "UseImageCdnUrlInTinyMce": false,
  "UseImageCdnUrlInTinyMceDisableAssetPane": 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"
    }
  ]
}

...

[ContentType(GUID = "0A89E464-56D4-449F-AEA8-2BF774AB8730")]
[MediaDescriptor(ExtensionString = "jpg,jpeg,jpe,ico,gif,bmp,png")]
public class ImageFile : ImageData, IFotowareMedia
{
    [UIHint(UIHint.Textarea)]
    public virtual string Description { get; set; }

    public virtual string AltText { get; set; }

    // IFotowareMedia properties
    [Display(GroupName = FotowareGroupNames.Fotoware)]
    public virtual string FotowareUrl { get; set; }

    [Editable(false)]
    [Display(GroupName = FotowareGroupNames.Fotoware)]
    public virtual string FotowarePreviewUrl { get; set; }

    [UIHint(UIHint.Textarea)]
    [Editable(false)]
    [Display(GroupName = FotowareGroupNames.Fotoware)]
    public virtual string FotowareJson { get; set; }

    [Editable(false)]
    [Display(GroupName = FotowareGroupNames.Fotoware)]
    public virtual DateTime? FotowareModifiedDate { get; set; }

    [ScaffoldColumn(false)]
    public string FotowareAltText
    {
        get => this.GetPropertyValue(p => p.AltText);
        set => this.SetPropertyValue(p => p.AltText, value);
    }

    [ScaffoldColumn(false)]
    public string FotowareDescription
    {
        get => this.GetPropertyValue(p => p.Description);
        set => this.SetPropertyValue(p => p.Description, value);
    }
}

The ModifiedDate property is used to track tracks when the media was last changed in the DAM. The plugin uses it to determine whether to download the media.

Configure Tin
yMCETinyMCE

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

...

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

If you want to save the image to "For this page", register this in startup.

services.AddScoped<IFolderResolver, ForThisPageFolderResolver>();

Customize the TinyMCE HTML template

...

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

...

...

InitializationModule

[ModuleDependency(typeof(InitializationModule))]
public class FotowareContentEventsInitializationModule : IInitializableModule
{
    public void Initialize(InitializationEngine context)
    {
        var events = context.Locate.Advanced.GetRequiredService<FotowareEvents>();
        events.OnContentDownloading += OnContentDownloading;
        events.OnContentDownloaded += OnContentDownloaded;
    }

    public void InitializeUninitialize(InitializationEngine context)
    {
        var events = context.Locate.Advanced.GetRequiredService<FotowareEvents>();
        events.OnContentDownloading +-= OnContentDownloading;
        events.OnContentDownloaded +-= OnContentDownloaded;
    }

    publicprivate void Uninitialize(InitializationEngine contextOnContentDownloading(object sender, FotowareContentEventArgs e)
    {
        var events = context.Locate.Advanced.GetRequiredService<FotowareEvents>();
 // Handle content downloaded event here
    }

    private events.OnContentDownloading -= OnContentDownloading;
 void OnContentDownloaded(object sender, FotowareContentEventArgs e)
    {
 events.OnContentDownloaded -= OnContentDownloaded;     }// Handle content downloaded event here
private void OnContentDownloading(object sender, FotowareContentEventArgs e)
    {
        // Handle content downloaded event here
    }

    private void OnContentDownloaded(object sender, FotowareContentEventArgs e)
    {
        // Handle content downloaded event here
    }
}

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

OnContentDownloaded - Raised after the media has been downloaded.

How to use in the frontend

Using PropertyFor

...

}
}

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

OnContentDownloaded - Raised after the media has been downloaded.

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 { Attributes = new { @class = "fotoware-image" } QueryParameters = "format=webp&quality=80" })

Output

<img alt="image01.jpg" class=" fotoware-image" src="/globalassets/fotoware/2024/6/image01.jpg?format=webp&quality=80">

...

Use CDN URL

@Html.PropertyFor(x => Model.CurrentPage.ContentReferenceOptimizely, new { QueryStrings MediaOptions = new { format UseCdnUrl = "webp" true } })

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

...

/optimizely.preview-picturepark.com/v/TBVACNY3/">

Use CDN URL with the specified width

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

Output

<img alt="image01.jpg" src="https:/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">/optimizely.preview-picturepark.com/v/TBVACNY3/fit-in:600x100000">

Change log

 ## 2.0.0.0 

•  Target .net 8 and .net 6

• Save assets to 'for this page'

• Right-click on asset pane folders to save assets direct to a folder

• Bug: Change API internal path

## 1.1.0.0 

•  Fix bugs filesize

## 1.0.0.0 

•  Initial version