...

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

...

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.

...

Example of how to register event handlers for the Fotoware events in an 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 Uninitialize(InitializationEngine context)
    {
        var events = context.Locate.Advanced.GetRequiredService<FotowareEvents>();
        events.OnContentDownloading -= OnContentDownloading;
        events.OnContentDownloaded -= OnContentDownloaded;
    }

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

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

...

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