...
Example of TinyMCE configuration
| Code Block | ||
|---|---|---|
| ||
services.Configure<TinyMceConfiguration>(config =>
{
config.Default().AddSetting("extended_valid_elements",
"iframe[src|alt|title|width|height|align|name],picture,source[srcset|media|src],span")
.AddPlugin(
"epi-link epi-image-editor epi-dnd-processor epi-personalized-content preview searchreplace autolink directionality visualblocks visualchars fullscreen image link media template codesample table charmap pagebreak nonbreaking anchor insertdatetime advlist lists " +
"wordcount help code")
.Toolbar(
"bold italic strikethrough forecolor | epi-link image media epi-image-editor epi-personalized-content | contentplatform-insert-media | bullist numlist | searchreplace fullscreen ",
"styleselect blocks | alignleft aligncenter alignright alignjustify | removeformat | table toc | code"
, "");
}); |
By default, the The button is added to the default TinyMCE by default, but if you have custom tinys for blocks with other configurations, you can apply the following: .AddFotowareContentPlatformToTinyMCE(serviceCollection)
| Code Block | ||
|---|---|---|
| ||
services.Configure<TinyMceConfiguration>(config =>
config.For<TextHtmlBlock>(t => t.Text)
.AddEpiserverSupport()
.AddFotowareContentPlatformToTinyMCE(serviceCollection) // This registers the plugin and the settings.
.Toolbar(AllSettings);
); |
Apply UIHint and FotowareConfiguration attributes to Optimize properties
...
| Code Block | ||
|---|---|---|
| ||
[Display(Name = "Content Reference (Optimizely)", GroupName = "Content Reference", Order = 10)] [UIHint(ContentPlatformUiHint.Image)] public virtual ContentReference ContentReferenceOptimizely { get; set; } [Display(Name = "Content Reference (Fotoware)", GroupName = "Content Reference", Order = 20)] [FotowareConfiguration(DisableDefaultMediaSelector = true)] [UIHint(ContentPlatformUiHint.Image)] public virtual ContentReference ContentReferenceFotoware { get; set; } [Display(Name = "Url (Optimizely)", GroupName = "Url", Order = 10)] [UIHint(ContentPlatformUiHint.ImageUrl)] public virtual Url ImageAsUrlOptimizely { get; set; } |
...
| Code Block | ||
|---|---|---|
| ||
"ContentPlatform": {
...
"PreventCommerceEditorIntegration": true
} |
Logging
The plugin has a number of logging information that can be used for information and debugging the integration. Update appsettings.json as the following.
| Code Block | ||
|---|---|---|
| ||
"Logging": {
"LogLevel": {
"Fotoware.ContentPlatform.Plugins.Optimizely": "Information"
}
}, |
Multiple site configuration
...
| Code Block | ||
|---|---|---|
| ||
"ContentPlatform": {
"BaseCdnUrl": "https://optimizely.preview-picturepark.com",
"Sites": [
{
"SiteId": "7e9335f8-2f16-44b0-8870-8f2d4bc0160c",
"RootFolderId": 102,
"EnableOnAllMedia": true,
"DisableDefaultMediaSelector": false,
"DefaultTinyMceImageWidth": 600,
"UseImageCdnUrlInTinyMce": false,
"MediaTypes": [
{
"Name": "Image",
"FileExtensions": ".jpg,.jpeg,.jpe,.gif,.bmp,.png,.gif",
"PreferredDownloadWidth": 1200,
"DownloadContentSelectionName": "Original",
"PreviewContentSelectionName": "Preview"
},
{
"Name": "Video",
"FileExtensions": ".mov,.mp4",
"DownloadContentSelectionName": "VideoSmall",
"PreviewContentSelectionName": "Preview"
},
{
"Name": "Pdf",
"FileExtensions": ".pdf",
"DownloadContentSelectionName": "Original",
"PreviewContentSelectionName": "Preview"
}
]
}
]
} |
SiteId - The ID of the site, which you can find in Admin > Manage Websites.
...
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
| Code Block |
|---|
```cs [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 } } ``` |
OnContentDownloading - Raised before downloading a media with the possibility to cancel the action.
...
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">
...