{"type":"doc","content":[{"type":"heading","attrs":{"level":1},"content":[{"text":"How it works","type":"text"}]},{"type":"paragraph","content":[{"text":"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 a shared embedding) is downloaded and imported into the default Optimizely media management system.","type":"text"}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"Examples","type":"text"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Example of the decorator on a Video content reference","type":"text","marks":[{"type":"strong"}]}]}]}]},{"type":"mediaSingle","attrs":{"layout":"center","width":203,"widthType":"pixel"},"content":[{"type":"media","attrs":{"width":203,"alt":"first.png","id":"f2805927-1e13-4fe2-a9c0-ebf4ec255d68","collection":"contentId-1719183642","type":"file","height":130}},{"type":"caption","content":[{"text":"Before video selected","type":"text"}]}]},{"type":"mediaSingle","attrs":{"layout":"center","width":203,"widthType":"pixel"},"content":[{"type":"media","attrs":{"width":203,"alt":"second.png","id":"dcdf1394-3147-4cd0-8550-8e7f04c3b4c0","collection":"contentId-1719183642","type":"file","height":128}},{"type":"caption","content":[{"text":"After video selected","type":"text"}]}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Example of the toolbar button in TinyMCE","type":"text","marks":[{"type":"strong"}]}]}]}]},{"type":"mediaSingle","attrs":{"layout":"center","width":636,"widthType":"pixel"},"content":[{"type":"media","attrs":{"width":636,"alt":"third.png","id":"b32596a7-7952-429a-82b2-6cfd009c043a","collection":"contentId-1719183642","type":"file","height":303}},{"type":"caption","content":[{"text":"The ","type":"text"},{"text":"Insert Media ","type":"text","marks":[{"type":"strong"}]},{"text":"button in TinyMCE","type":"text"}]}]},{"type":"paragraph"},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Example of Fotoware content picker","type":"text","marks":[{"type":"strong"}]}]}]}]},{"type":"mediaSingle","attrs":{"layout":"center","width":760,"widthType":"pixel"},"content":[{"type":"media","attrs":{"width":1115,"alt":"fourth.png","id":"2baf190e-044d-4c26-90ea-51d01f9b34a0","collection":"contentId-1719183642","type":"file","height":419}},{"type":"caption","content":[{"text":"Fotoware content picker","type":"text"}]}]},{"type":"paragraph"},{"type":"heading","attrs":{"level":1},"content":[{"text":"Key features of the integration","type":"text"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Easy to add to both new and existing Optimizely solutions.","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"The integration can be removed without affecting utilized assets.","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Automatically synchronize media from the DAM with Optimizely's default asset management system, simplifying the process for developers.","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"It is possible to configure content display to show only local media, media from the DAM CDN, or both.","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Allow developers to configure custom media models containing metadata synchronized from the DAM.","type":"text"}]}]}]},{"type":"heading","attrs":{"level":2},"content":[{"text":"Known issues","type":"text"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"When using DXP and Cloudflare, you sometimes need to whitelist the \"/EPiServer/Fotoware.ContentPlatform.Plugins.Optimizely/api/picturepark\" URL in ALL ENVIRONMENTS. ","type":"text"},{"type":"hardBreak"},{"text":"To do this, please contact Optimizely support.","type":"text"},{"type":"hardBreak"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"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 *.","type":"text"},{"text":"episerver.net","type":"text","marks":[{"type":"link","attrs":{"href":"http://episerver.net/"}}]},{"text":" domain will not work.","type":"text"}]}]}]},{"type":"heading","attrs":{"level":1},"content":[{"type":"hardBreak"},{"text":"Installation and usage","type":"text"}]},{"type":"heading","attrs":{"level":2},"content":[{"text":"Installing the package","type":"text"}]},{"type":"paragraph","content":[{"text":"To get started with the plugin, you need to install it from the Optimizely NuGet feed.","type":"text"}]},{"type":"paragraph","content":[{"text":"The Nuget package is called ","type":"text"},{"text":"Fotoware.ContentPlatform.Plugins.Optimizely","type":"text","marks":[{"type":"strong"}]},{"text":", and is available at: ","type":"text"},{"text":"https://nuget.optimizely.com/package/?id=Fotoware.ContentPlatform.Plugins.Optimizely","type":"text","marks":[{"type":"link","attrs":{"href":"https://nuget.optimizely.com/package/?id=Fotoware.ContentPlatform.Plugins.Optimizely"}}]}]},{"type":"paragraph","content":[{"text":"Dependencies","type":"text","marks":[{"type":"strong"}]},{"text":":","type":"text"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"EPiServer.CMS.UI version 12.18.0","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"EPiServer.CMS.TinyMce version 4.2.0","type":"text"}]}]}]},{"type":"heading","attrs":{"level":2},"content":[{"text":"Register in Startup.cs","type":"text"}]},{"type":"paragraph","content":[{"text":"Navigate to the ","type":"text"},{"text":"Startup.cs","type":"text","marks":[{"type":"code"}]},{"text":" file and add the following code to the ","type":"text"},{"text":"ConfigureServices","type":"text","marks":[{"type":"strong"}]},{"text":" method to register the plugin with the solution's service collection.","type":"text"}]},{"type":"codeBlock","attrs":{"language":"csharp"},"content":[{"text":"using Fotoware.ContentPlatform.Plugins.Optimizely;\nservices.AddFotowareContentPlatformPlugin();","type":"text"}]},{"type":"heading","attrs":{"level":2},"content":[{"text":"Configure appsettings.json","type":"text"}]},{"type":"codeBlock","attrs":{"language":"json"},"content":[{"text":"\"ContentPlatform\": {\n \"BaseCdnUrl\": \"https://yourdomain.preview-picturepark.com\",\n \"RootFolderId\": 102,\n \"EnableOnAllMedia\": true,\n \"DisableDefaultMediaSelector\": false,\n \"DefaultTinyMceImageWidth\": 600,\n \"UseImageCdnUrlInTinyMce\": false,\n \"DisableAssetPane\":false,\n \"MediaTypes\": [\n {\n \"Name\": \"Image\",\n \"FileExtensions\": \".jpg,.jpeg,.jpe,.gif,.bmp,.png,.gif\",\n \"DownloadContentSelectionName\": \"Original\",\n \"PreviewContentSelectionName\": \"Preview\",\n \"PreferredDownloadWidth\": 1200\n },\n {\n \"Name\": \"Video\",\n \"FileExtensions\": \".mov,.mp4\",\n \"DownloadContentSelectionName\": \"VideoSmall\",\n \"PreviewContentSelectionName\": \"Preview\"\n },\n {\n \"Name\": \"Pdf\",\n \"FileExtensions\": \".pdf\",\n \"DownloadContentSelectionName\": \"Original\",\n \"PreviewContentSelectionName\": \"Preview\"\n }\n ]\n}","type":"text"}]},{"type":"paragraph"},{"type":"table","attrs":{"layout":"default","width":760.0,"localId":"76707203-11e7-4905-8cc2-e3529e2c40cf"},"content":[{"type":"tableRow","content":[{"type":"tableHeader","attrs":{"colspan":1,"rowspan":1,"colwidth":[339.0]},"content":[{"type":"paragraph","content":[{"text":"Value","type":"text","marks":[{"type":"strong"}]}]}]},{"type":"tableHeader","attrs":{"colspan":1,"rowspan":1,"colwidth":[419.0]},"content":[{"type":"paragraph","content":[{"text":"Description","type":"text","marks":[{"type":"strong"}]}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[339.0]},"content":[{"type":"paragraph","content":[{"text":"BaseCdnUrl","type":"text"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[419.0]},"content":[{"type":"paragraph","content":[{"text":"The base URL of the picker.","type":"text"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[339.0]},"content":[{"type":"paragraph","content":[{"text":"RootFolderId","type":"text"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[419.0]},"content":[{"type":"paragraph","content":[{"text":"The Optimizely media folder ID where the media is downloaded and stored.","type":"text"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[339.0]},"content":[{"type":"paragraph","content":[{"text":"EnableOnAllMedia","type":"text"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[419.0]},"content":[{"type":"paragraph","content":[{"text":"When set to true, all media properties will have the DAM picker capability.","type":"text"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[339.0]},"content":[{"type":"paragraph","content":[{"text":"DisableDefaultMediaSelector","type":"text"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[419.0]},"content":[{"type":"paragraph","content":[{"text":"When set to true, the default Optimizely media selector behavior will be disabled.","type":"text"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[339.0]},"content":[{"type":"paragraph","content":[{"text":"DefaultTinyMceImageWidth","type":"text"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[419.0]},"content":[{"type":"paragraph","content":[{"text":"The default width for displaying images selected from the DAM in TinyMCE.","type":"text"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[339.0]},"content":[{"type":"paragraph","content":[{"text":"UseImageCdnUrlInTinyMce","type":"text"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[419.0]},"content":[{"type":"paragraph","content":[{"text":"When enabled, the image URL in TinyMCE will use the CDN URL instead of the Optimizely image URL.","type":"text"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[339.0]},"content":[{"type":"paragraph","content":[{"text":"DisableAssetPane","type":"text"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[419.0]},"content":[{"type":"paragraph","content":[{"text":"When set to true, the right-click on a media folder will be disabled.","type":"text"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[339.0]},"content":[{"type":"paragraph","content":[{"text":"MediaTypes","type":"text"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[419.0]},"content":[{"type":"paragraph","content":[{"text":"Configuration for the supported media types in the plugin.","type":"text"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[339.0]},"content":[{"type":"paragraph","content":[{"text":"MediaTypes.Name","type":"text"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[419.0]},"content":[{"type":"paragraph","content":[{"text":"The name of the media type. The supported media types are Image, Video, and PDF.","type":"text"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[339.0]},"content":[{"type":"paragraph","content":[{"text":"MediaTypes.FileExtensions","type":"text"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[419.0]},"content":[{"type":"paragraph","content":[{"text":" The file extensions of the media type, separated by a comma.","type":"text"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[339.0]},"content":[{"type":"paragraph","content":[{"text":"MediaTypes.DownloadContentSelectionName","type":"text"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[419.0]},"content":[{"type":"paragraph","content":[{"text":"Refers to the content variant name used for downloading and importing into Optimizely media.","type":"text"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[339.0]},"content":[{"type":"paragraph","content":[{"text":"MediaTypes.PreviewContentSelectionName","type":"text"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[419.0]},"content":[{"type":"paragraph","content":[{"text":"Refers to the content variant name used for previewing purposes.","type":"text"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[339.0]},"content":[{"type":"paragraph","content":[{"text":"PreferredDownloadWidth","type":"text"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[419.0]},"content":[{"type":"paragraph","content":[{"text":"Specifies the preferred image width for downloading. This option is supported only for the Image media type.","type":"text"}]}]}]}]},{"type":"heading","attrs":{"level":2},"content":[{"text":"Implementing the model interface","type":"text"}]},{"type":"paragraph","content":[{"text":"You must implement the ","type":"text"},{"text":"IFotowareMedia","type":"text","marks":[{"type":"strong"}]},{"text":" interface on a content type that inherits from the Optimizely ","type":"text"},{"text":"MediaData","type":"text","marks":[{"type":"strong"}]},{"text":" class in your solution. This enables additional fields that the add-on uses to maintain synchronization with the original media.","type":"text"}]},{"type":"codeBlock","attrs":{"language":"csharp"},"content":[{"text":"public interface IFotowareMedia : IContentData\n{\n string Name { get; set; }\n\n ///

\n /// Fotoware alternative text\n ///

\n string FotowareAltText { get; set; }\n\n ///

\n /// Fotoware description\n ///

\n string FotowareDescription { get; set; }\n\n ///

\n /// Fotoware CDN url\n ///

\n string FotowareUrl { get; set; }\n\n ///

\n /// Fotoware Preview CDN url\n ///

\n string FotowarePreviewUrl { get; set; }\n\n ///

\n /// Fotoware JSON metadata\n ///

\n string FotowareJson { get; set; }\n\n ///

\n /// Fotoware modified date\n ///

\n DateTime? FotowareModifiedDate { get; set; }\n}","type":"text"}]},{"type":"paragraph","content":[{"type":"hardBreak"},{"text":"Example implementation of IFotowareMedia","type":"text","marks":[{"type":"strong"}]}]},{"type":"codeBlock","attrs":{"language":"csharp"},"content":[{"text":"[ContentType(GUID = \"0A89E464-56D4-449F-AEA8-2BF774AB8730\")]\n[MediaDescriptor(ExtensionString = \"jpg,jpeg,jpe,ico,gif,bmp,png\")]\npublic class ImageFile : ImageData, IFotowareMedia\n{\n [UIHint(UIHint.Textarea)]\n public virtual string Description { get; set; }\n\n public virtual string AltText { get; set; }\n\n // IFotowareMedia properties\n [Display(GroupName = FotowareGroupNames.Fotoware)]\n public virtual string FotowareUrl { get; set; }\n\n [Editable(false)]\n [Display(GroupName = FotowareGroupNames.Fotoware)]\n public virtual string FotowarePreviewUrl { get; set; }\n\n [UIHint(UIHint.Textarea)]\n [Editable(false)]\n [Display(GroupName = FotowareGroupNames.Fotoware)]\n public virtual string FotowareJson { get; set; }\n\n [Editable(false)]\n [Display(GroupName = FotowareGroupNames.Fotoware)]\n public virtual DateTime? FotowareModifiedDate { get; set; }\n\n [ScaffoldColumn(false)]\n public string FotowareAltText\n {\n get => this.GetPropertyValue(p => p.AltText);\n set => this.SetPropertyValue(p => p.AltText, value);\n }\n\n [ScaffoldColumn(false)]\n public string FotowareDescription\n {\n get => this.GetPropertyValue(p => p.Description);\n set => this.SetPropertyValue(p => p.Description, value);\n }\n}","type":"text"}]},{"type":"paragraph","content":[{"text":"The ","type":"text"},{"text":"ModifiedDate","type":"text","marks":[{"type":"strong"}]},{"text":" property tracks when the media was last changed in the DAM. The plugin uses it to determine whether to download the media.","type":"text"}]},{"type":"heading","attrs":{"level":2},"content":[{"text":"Configure TinyMCE","type":"text"}]},{"type":"paragraph","content":[{"text":"To add a button for inserting media from the DAM, include ","type":"text"},{"text":"contentplatform-insert-media","type":"text","marks":[{"type":"strong"}]},{"text":" in the TinyMCE configuration. ","type":"text"}]},{"type":"paragraph","content":[{"text":"Example of TinyMCE configuration","type":"text","marks":[{"type":"strong"}]}]},{"type":"codeBlock","attrs":{"language":"csharp"},"content":[{"text":"services.Configure(config =>\n{\n config.Default().AddSetting(\"extended_valid_elements\",\n \"iframe[src|alt|title|width|height|align|name],picture,source[srcset|media|src],span\")\n .AddPlugin(\n \"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 \" +\n \"wordcount help code\")\n .Toolbar(\n \"bold italic strikethrough forecolor | epi-link image media epi-image-editor epi-personalized-content | contentplatform-insert-media | bullist numlist | searchreplace fullscreen \",\n \"styleselect blocks | alignleft aligncenter alignright alignjustify | removeformat | table toc | code\"\n , \"\");\n});","type":"text"}]},{"type":"paragraph","content":[{"type":"hardBreak"},{"text":"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: ","type":"text"},{"text":".AddFotowareContentPlatformToTinyMCE(serviceCollection)","type":"text","marks":[{"type":"strong"}]}]},{"type":"codeBlock","attrs":{"language":"csharp"},"content":[{"text":" services.Configure(config =>\n config.For(t => t.Text)\n .AddEpiserverSupport()\n .AddFotowareContentPlatformToTinyMCE(serviceCollection) // This registers the plugin and the settings. \n .Toolbar(AllSettings);\n );","type":"text"}]},{"type":"paragraph"},{"type":"heading","attrs":{"level":2},"content":[{"text":"Apply UIHint and FotowareConfiguration attributes to Optimize properties","type":"text"}]},{"type":"paragraph","content":[{"text":"Decorating the Optimizely property with the ","type":"text"},{"text":"UIHint","type":"text","marks":[{"type":"strong"}]},{"text":" attribute will replace the Optimizely built-in content selector with an extended version that supports selecting content from both DAM and Optimizely content.","type":"text"}]},{"type":"paragraph","content":[{"text":"Example of using the image UIHint","type":"text","marks":[{"type":"strong"}]}]},{"type":"codeBlock","attrs":{"language":"csharp"},"content":[{"text":"[Display(Name = \"Content Reference (Optimizely)\", GroupName = \"Content Reference\", Order = 10)]\n[UIHint(ContentPlatformUiHint.Image)]\npublic virtual ContentReference ContentReferenceOptimizely { get; set; }\n\n[Display(Name = \"Content Reference (Fotoware)\", GroupName = \"Content Reference\", Order = 20)]\n[FotowareConfiguration(DisableDefaultMediaSelector = true)]\n[UIHint(ContentPlatformUiHint.Image)]\npublic virtual ContentReference ContentReferenceFotoware { get; set; }\n\n[Display(Name = \"Url (Optimizely)\", GroupName = \"Url\", Order = 10)]\n[UIHint(ContentPlatformUiHint.ImageUrl)]\npublic virtual Url ImageAsUrlOptimizely { get; set; }","type":"text"}]},{"type":"paragraph","content":[{"text":"The ","type":"text"},{"text":"UIHint","type":"text","marks":[{"type":"strong"}]},{"text":" attribute can be applied to ","type":"text"},{"text":"ContentReference","type":"text","marks":[{"type":"strong"}]},{"text":" and ","type":"text"},{"text":"Url","type":"text","marks":[{"type":"strong"}]},{"text":" property types.","type":"text"},{"type":"hardBreak"}]},{"type":"table","attrs":{"layout":"default","width":760.0,"localId":"5e1751c1-e4b1-4c8d-9071-4159984a093d"},"content":[{"type":"tableRow","content":[{"type":"tableHeader","attrs":{"colspan":1,"rowspan":1,"colwidth":[301.0]},"content":[{"type":"paragraph","content":[{"text":"Value","type":"text","marks":[{"type":"strong"}]}]}]},{"type":"tableHeader","attrs":{"colspan":1,"rowspan":1,"colwidth":[458.0]},"content":[{"type":"paragraph","content":[{"text":"Description","type":"text","marks":[{"type":"strong"}]}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[301.0]},"content":[{"type":"paragraph","content":[{"text":"ContentPlatformUiHint.Image","type":"text"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[458.0]},"content":[{"type":"paragraph","content":[{"text":"Replaces the Optimize selector with the Fotoware image selector for the ","type":"text"},{"text":"ContentReference","type":"text","marks":[{"type":"strong"}]},{"text":" property.","type":"text"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[301.0]},"content":[{"type":"paragraph","content":[{"text":"ContentPlatformUiHint.ImageUrl","type":"text"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[458.0]},"content":[{"type":"paragraph","content":[{"text":"Replaces the Optimize selector with the Fotoware image selector for the ","type":"text"},{"text":"Url","type":"text","marks":[{"type":"strong"}]},{"text":" property.","type":"text"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[301.0]},"content":[{"type":"paragraph","content":[{"text":"ContentPlatformUiHint.Video","type":"text"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[458.0]},"content":[{"type":"paragraph","content":[{"text":"Replaces the Optimize selector with the Fotoware video selector for the ","type":"text"},{"text":"ContentReference","type":"text","marks":[{"type":"strong"}]},{"text":" property.","type":"text"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[301.0]},"content":[{"type":"paragraph","content":[{"text":"ContentPlatformUiHint.VideoUrl","type":"text"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[458.0]},"content":[{"type":"paragraph","content":[{"text":"Replaces the Optimize selector with the Fotoware video selector for the ","type":"text"},{"text":"Url","type":"text","marks":[{"type":"strong"}]},{"text":" property.","type":"text"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[301.0]},"content":[{"type":"paragraph","content":[{"text":"ContentPlatformUiHint.Pdf","type":"text"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[458.0]},"content":[{"type":"paragraph","content":[{"text":"Replaces the Optimize selector with the Fotoware media selector for the ","type":"text"},{"text":"ContentReference","type":"text","marks":[{"type":"strong"}]},{"text":" property.","type":"text"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[301.0]},"content":[{"type":"paragraph","content":[{"text":"ContentPlatformUiHint.PdfUrl","type":"text"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[458.0]},"content":[{"type":"paragraph","content":[{"text":"Replaces the Optimize selector with the Fotoware media selector for the ","type":"text"},{"text":"Url","type":"text","marks":[{"type":"strong"}]},{"text":" property.","type":"text"}]}]}]}]},{"type":"paragraph","content":[{"text":"FotowareConfiguration","type":"text","marks":[{"type":"strong"}]}]},{"type":"paragraph","content":[{"text":"You can use the ","type":"text"},{"text":"FotowareConfiguration","type":"text","marks":[{"type":"strong"}]},{"text":" attribute to add settings for rendering in the frontend. This should be used together with the ","type":"text"},{"text":"UIHint","type":"text","marks":[{"type":"strong"}]},{"text":" attribute.","type":"text"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"DisableDefaultMediaSelector","type":"text","marks":[{"type":"strong"}]},{"text":" - To turn off the default Optimizely Media Selector, set the property to ","type":"text"},{"text":"true","type":"text","marks":[{"type":"em"}]},{"text":". The default value is ","type":"text"},{"text":"false","type":"text","marks":[{"type":"em"}]},{"text":".","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"QueryParameters","type":"text","marks":[{"type":"strong"}]},{"text":" - An additional query string appended to the media URL, i.e., ","type":"text"},{"text":"format=webp&quality=75","type":"text","marks":[{"type":"em"}]},{"text":".","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"ImageWidth","type":"text","marks":[{"type":"strong"}]},{"text":" - The default width of the image imported into TinyMCE. This does not apply to video or PDF files.","type":"text"}]}]}]},{"type":"heading","attrs":{"level":2},"content":[{"text":"Disable the plugin in Optimizely Commerce Asset list","type":"text"}]},{"type":"paragraph","content":[{"text":"To disable the plugin in the Optimizely Commerce Asset list, set the ","type":"text"},{"text":"PreventCommerceEditorIntegration","type":"text","marks":[{"type":"strong"}]},{"text":" setting to true.","type":"text"}]},{"type":"codeBlock","attrs":{"language":"json"},"content":[{"text":"\"ContentPlatform\": {\n ...\n \"PreventCommerceEditorIntegration\": true\n}","type":"text"}]},{"type":"heading","attrs":{"level":2},"content":[{"text":"Logging","type":"text"}]},{"type":"paragraph","content":[{"text":"The plugin has a number of logging information that can be used for information and debugging the integration. Update ","type":"text"},{"text":"appsettings.json","type":"text","marks":[{"type":"strong"}]},{"text":" as the following.","type":"text"}]},{"type":"codeBlock","attrs":{"language":"json"},"content":[{"text":"\"Logging\": {\n \"LogLevel\": {\n \"Fotoware.ContentPlatform.Plugins.Optimizely\": \"Information\"\n }\n },","type":"text"}]},{"type":"heading","attrs":{"level":2},"content":[{"text":"Multiple site configuration","type":"text"}]},{"type":"paragraph","content":[{"text":"You can configure the plugin to run with Optimizely multi-site scenario by specifying the site ID for each site in the ","type":"text"},{"text":"Sites","type":"text","marks":[{"type":"strong"}]},{"text":" collection in","type":"text"},{"text":" appsettings.json","type":"text","marks":[{"type":"strong"}]},{"text":".","type":"text"}]},{"type":"codeBlock","attrs":{"language":"json"},"content":[{"text":"\"ContentPlatform\": {\n \"BaseCdnUrl\": \"https://optimizely.preview-picturepark.com\",\n \"Sites\": [\n {\n \"SiteId\": \"7e9335f8-2f16-44b0-8870-8f2d4bc0160c\",\n \"RootFolderId\": 102,\n \"EnableOnAllMedia\": true,\n \"DisableDefaultMediaSelector\": false,\n \"DefaultTinyMceImageWidth\": 600,\n \"UseImageCdnUrlInTinyMce\": false,\n \"MediaTypes\": [\n {\n \"Name\": \"Image\",\n \"FileExtensions\": \".jpg,.jpeg,.jpe,.gif,.bmp,.png,.gif\",\n \"PreferredDownloadWidth\": 1200,\n \"DownloadContentSelectionName\": \"Original\",\n \"PreviewContentSelectionName\": \"Preview\"\n },\n {\n \"Name\": \"Video\",\n \"FileExtensions\": \".mov,.mp4\",\n \"DownloadContentSelectionName\": \"VideoSmall\",\n \"PreviewContentSelectionName\": \"Preview\"\n },\n {\n \"Name\": \"Pdf\",\n \"FileExtensions\": \".pdf\",\n \"DownloadContentSelectionName\": \"Original\",\n \"PreviewContentSelectionName\": \"Preview\"\n }\n ]\n }\n ]\n}","type":"text"}]},{"type":"paragraph","content":[{"text":"SiteId","type":"text","marks":[{"type":"strong"}]},{"text":" - The ID of the site, which you can find in ","type":"text"},{"text":"Admin","type":"text","marks":[{"type":"strong"}]},{"text":" > ","type":"text"},{"text":"Manage Websites","type":"text","marks":[{"type":"strong"}]},{"text":".","type":"text"}]},{"type":"heading","attrs":{"level":1},"content":[{"text":"Customization","type":"text"}]},{"type":"heading","attrs":{"level":2},"content":[{"text":"Managing the structure of downloaded assets in Optimizely","type":"text"}]},{"type":"paragraph","content":[{"text":"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.","type":"text"}]},{"type":"paragraph","content":[{"text":"2024/","type":"text"},{"type":"hardBreak"},{"text":"└── 06/","type":"text"},{"type":"hardBreak"},{"text":" ├── image01.jpg","type":"text"},{"type":"hardBreak"},{"text":" └── video02.mp4","type":"text"}]},{"type":"paragraph","content":[{"text":"This customization is achieved by implementing the ","type":"text"},{"text":"IFolderResolver","type":"text","marks":[{"type":"strong"}]},{"text":" interface.","type":"text"}]},{"type":"paragraph","content":[{"text":"If you want to save the image to \"For this page\", register this in startup.","type":"text"}]},{"type":"codeBlock","content":[{"text":"services.AddScoped();","type":"text"}]},{"type":"heading","attrs":{"level":2},"content":[{"text":"Customize the TinyMCE HTML template","type":"text"}]},{"type":"paragraph","content":[{"text":"You can create custom HTML input when inserting media into TinyMCE, such as filling in the alt text or adding CSS classes.","type":"text"}]},{"type":"paragraph","content":[{"text":"To do so, implement and register an ","type":"text"},{"text":"IFotowareTinyMceTemplate","type":"text","marks":[{"type":"strong"}]},{"text":" where you implement the ","type":"text"},{"text":"GetHtml(ContentReference contentReference, InsertTinyMceMedia insertTinyMceMedia)","type":"text","marks":[{"type":"strong"}]},{"text":" method.","type":"text"}]},{"type":"heading","attrs":{"level":2},"content":[{"text":"Event handling with Fotoware events","type":"text"}]},{"type":"paragraph","content":[{"text":"Example of how to register event handlers for the Fotoware events in an ","type":"text"},{"text":"InitializationModule","type":"text","marks":[{"type":"strong"}]}]},{"type":"codeBlock","attrs":{"language":"csharp"},"content":[{"text":"[ModuleDependency(typeof(InitializationModule))]\npublic class FotowareContentEventsInitializationModule : IInitializableModule\n{\n public void Initialize(InitializationEngine context)\n {\n var events = context.Locate.Advanced.GetRequiredService();\n events.OnContentDownloading += OnContentDownloading;\n events.OnContentDownloaded += OnContentDownloaded;\n }\n\n public void Uninitialize(InitializationEngine context)\n {\n var events = context.Locate.Advanced.GetRequiredService();\n events.OnContentDownloading -= OnContentDownloading;\n events.OnContentDownloaded -= OnContentDownloaded;\n }\n\n private void OnContentDownloading(object sender, FotowareContentEventArgs e)\n {\n // Handle content downloaded event here\n }\n\n private void OnContentDownloaded(object sender, FotowareContentEventArgs e)\n {\n // Handle content downloaded event here\n }\n}","type":"text"}]},{"type":"paragraph","content":[{"text":"OnContentDownloading","type":"text","marks":[{"type":"strong"}]},{"text":" - Raised before downloading a media with the possibility to cancel the action.","type":"text"}]},{"type":"paragraph","content":[{"text":"OnContentDownloaded","type":"text","marks":[{"type":"strong"}]},{"text":" - Raised after the media has been downloaded.","type":"text"}]},{"type":"heading","attrs":{"level":1},"content":[{"text":"How to use in the frontend","type":"text"}]},{"type":"heading","attrs":{"level":2},"content":[{"text":"Using PropertyFor","type":"text"}]},{"type":"paragraph","content":[{"text":"@Html.PropertyFor(m => Model.CurrentPage.ImageAsContentReference)","type":"text","marks":[{"type":"code"}]}]},{"type":"paragraph","content":[{"text":"Output","type":"text","marks":[{"type":"strong"}]}]},{"type":"paragraph","content":[{"text":" $\"image01.jpg\"$ ","type":"text","marks":[{"type":"code"}]}]},{"type":"heading","attrs":{"level":2},"content":[{"text":"Adding a HTML attribute","type":"text"}]},{"type":"paragraph","content":[{"text":"@Html.PropertyFor(x => Model.CurrentPage.ContentReferenceOptimizely, new { Attributes = new { @class = \"fotoware-image\" } ","type":"text","marks":[{"type":"code"}]}]},{"type":"paragraph","content":[{"text":"Output","type":"text","marks":[{"type":"strong"}]}]},{"type":"paragraph","content":[{"text":" $\"image01.jpg\"$ ","type":"text","marks":[{"type":"code"}]}]},{"type":"heading","attrs":{"level":2},"content":[{"text":"Adding a query string","type":"text"}]},{"type":"paragraph","content":[{"text":"@Html.PropertyFor(x => Model.CurrentPage.ContentReferenceOptimizely, new { QueryStrings = new { format = \"webp\" } })","type":"text","marks":[{"type":"code"}]}]},{"type":"paragraph","content":[{"text":"Output","type":"text","marks":[{"type":"strong"}]}]},{"type":"paragraph","content":[{"text":" $\"image01.jpg\"$ ","type":"text","marks":[{"type":"code"}]}]},{"type":"heading","attrs":{"level":2},"content":[{"text":"Adding query parameters","type":"text"}]},{"type":"paragraph","content":[{"text":"@Html.PropertyFor(x => Model.CurrentPage.ContentReferenceOptimizely, new { QueryParameters = \"format=webp&quality=80\" })","type":"text","marks":[{"type":"code"}]}]},{"type":"paragraph","content":[{"text":"Output","type":"text","marks":[{"type":"strong"}]}]},{"type":"paragraph","content":[{"text":" $\"image01.jpg\"$ ","type":"text","marks":[{"type":"code"}]}]},{"type":"heading","attrs":{"level":2},"content":[{"text":"Use CDN URL","type":"text"}]},{"type":"paragraph","content":[{"text":"@Html.PropertyFor(x => Model.CurrentPage.ContentReferenceOptimizely, new { MediaOptions = new { UseCdnUrl = true } })","type":"text","marks":[{"type":"code"}]}]},{"type":"paragraph","content":[{"text":"Output","type":"text","marks":[{"type":"strong"}]},{"type":"hardBreak"},{"text":" $\"image01.jpg\"$ ","type":"text","marks":[{"type":"code"}]}]},{"type":"heading","attrs":{"level":2},"content":[{"text":"Use CDN URL with the specified width","type":"text"}]},{"type":"paragraph","content":[{"text":"@Html.PropertyFor(x => Model.CurrentPage.ContentReferenceOptimizely, new { MediaOptions = new { Width = 600, UseCdnUrl = true } })","type":"text","marks":[{"type":"code"}]}]},{"type":"paragraph","content":[{"text":"Output","type":"text","marks":[{"type":"strong"}]}]},{"type":"paragraph","content":[{"text":" $\"image01.jpg\"$ ","type":"text","marks":[{"type":"code"}]}]},{"type":"paragraph"},{"type":"heading","attrs":{"level":1},"content":[{"text":"Change log","type":"text"}]},{"type":"paragraph","content":[{"text":" ## 2.0.0.0 ","type":"text"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":" Target .net 8 and .net 6","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Save assets to 'for this page'","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Right-click on asset pane folders to save assets direct to a folder","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Bug: Change API internal path","type":"text"}]}]}]},{"type":"paragraph","content":[{"text":" ","type":"text"}]},{"type":"paragraph","content":[{"text":"## 1.1.0.0 ","type":"text"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":" Fix bugs filesize","type":"text"}]}]}]},{"type":"paragraph","content":[{"text":" ","type":"text"}]},{"type":"paragraph","content":[{"text":"## 1.0.0.0 ","type":"text"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":" Initial version","type":"text"}]}]}]}],"version":1}

Browser not supported