Frontify Integration For Episerver

This is a developer's guide to configuring the Frontify Add-On for Episerver

Written by Rahulan Sivalingam Updated over a week ago

The Frontify Integration for Episerver enables you to embed assets from your Frontify Media Library directly into Episerver – resulting in a more fluid content creation process. Read along to learn how to configure the add-on.

Requirements

To make use of the Frontify add-on, you're required to use at least EPiServer.CMS.UI 11. The add-on automatically is supported for Episerver Commerce, as well. It should work on version 12 and above. To display the add-on in the toolbox of the editor, Version 2 of EPiServer.CMS.TinyMce is needed.Further, you need to have a Media Library in place; to embed assets from there to Episerver via Asset Chooser.

It's also possible to implement an instance of the IFrontifySettings (or extended IFrontifyCommerceSettings) interface to further control all settings, such as configuring which metadata to synchronize.

2. Configuring Additional Settings

You need to implement the IFrontifyMedia interface on a content type that inherits from Episerver's ImageData class. This will enable some additional fields, which again, can be used by the add-on to keep your Media Library assets in sync.

The FrontifyModifiedDate property is used to keep track of when the asset was last changed in Frontify.

3. Add the Frontify Button to Your Tiny MCE Configuration Toolbar

The Frontify button should automatically appear in the Tiny MCE. If it doesn't, you probably already have a custom configuration in place. In this case, search for TinyMceInitialization in your solution and add frontify-insert-media to your toolbar.

4. Add the Frontify UIHint to your Episerver Property

By default, the plugin will override all UIHint images. To disable this behavior, change the application settings key Frontify:EnableOnAllImages to false. Then, you can use the Frontify UIHints as follows:

This will replace Episerver's built-in image editor with an extended one that supports selecting images from Frontify, as well as, local Episerver images. To disable the selection of local Episerver images, you can add another UIHint to your property:

`[UIHint(FrontifyUiHint.DisableDefaultEpiserverMedia)] //important put last in order`

To open a specific project library on a property, you need to use the FrontifyProjectAttribute:

Remember to add all projects used in the solution to the app settings "ApiToken".

5. Scheduled Jobs

There are two scheduled jobs:

Frontify - Synchronize assets: This job is enabled by default, and helps you to sync updates from Frontify with Episerver. This job will only update assets if it has been updated in Frontify.

Frontify - Synchronize assets - Force: This job will always download the latest set of images and metadata. This job will only run manually and if needed.

You may turn on/off the automatic running of scheduled jobs at Admin>config tab>module managment>Frontify.Episerver.Plugin>overview in Episerver.

6. Synchronizing Metadata from Frontify with Episerver

The add-on supports the synchronization of metadata between Frontify and Episerver. For this, implement your own **IFrontifySettings**, and define the mapping schema for metadata that you want to get into the Episerver assets. The mapping schema has keys that match the metadata name in Frontify, and values that match the property name in Episerver. The following example shows how to add custom metadata to the synchronization:

Note that the types need to be the same when changing the configuration. If you use undocumented fields, the names and structure might change.

7. Controlling the Structure of Downloaded Assets in Episerver

Because Frontify stores assets in a flat list and Episerver uses a hierarchical structure, assets imported to Episerver are put into a folder structure to avoid a confusing arrangement of them. It's possible to modify the folder structure for assets in Episerver. By default, folders are created based on the month assets were imported to Episerver, but you can also arrange your folders based on metadata. This is done by implementing the **IFolderResolver** interface.

8. Customize the Tiny MCE HTML template

To implement your input HTML for Tiny MCE, fill the alt-text or adding some CSS classes. To do so, register an implementation ofIFrontifyTinyMceTemplateResolver, where you override the getHTML as follows: ContentReference contentReference, string insertingToContentReference=null.

9. Event Handling with Frontify Events

The available events are:

OnImageDownloading: Raised before downloading an asset with the possibility to cancel the action.

OnImageDownloaded: Raised after the asset has been downloaded.

OnImageDeleted: Raised during the synchronization job, if an asset is deleted or revoked in Frontify.

See the example below to learn how to register event handlers for these events in an initialization module: