Skip to main content
Sitecore Installation Guide

Learn how to install the Frontify integration on your Sitecore Platform

Updated over a week ago

This is a paid integration available to enterprise and boost plans

The integration supports the Sitecore versions 9.0.2 - 10.3 and XM Cloud

Context


The Frontify Integration for Sitecore allows authors in Sitecore to import assets from Frontify into the Sitecore media library.

  • This module integrates Frontify Finder with Sitecore allowing authors to import assets from Frontify into the Sitecore media library.

  • Assets are imported by reference - the media binaries remain on the Frontify CDN.

  • A custom MediaProvider will return CDN urls for Frontify Media Items.
    ​

Installation

  1. Copy files from the distribution zip to the webroot or integrate them into your CI/CD pipeline Notes: Standalone and ContentManagement instances will need all files. ContentDelivery instances only need the *MediaProvider* files. See the ContentDelivery folder.

  2. Install the *Frontify Sitecore Integration.zip* through Package Installation WizardNotes: In case of conflicts, choose to merge/merge

  3. Assign the *Sitecore\Frontify Importer* role to any roles or users that are allowed to import assets Notes: Admins will see the import buttons in any case

  4. Modify Content-Security-Policy header on the web.configNotes
    See below for details

Now you're ready to import Frontify assets into Sitecore.

Advanced

Content Security Headers

Starting with Sitecore 9.3 Sitecore uses CSP headers for the Client User Interface, you will need to add https://*.frontify.com to the default-src and img-src of the Content-Security-Policy header in web.config

    <location path="sitecore">
<system.webServer>
<httpProtocol>
<customHeaders>

Example

    <add name="Content-Security-Policy" value="default-src 'self' 'unsafe-inline' 'unsafe-eval' https://apps.sitecore.net https://*.frontify.com; img-src 'self' data: https://*.frontify.com; style-src 'self' 'unsafe-inline' https://fonts.googleapis.com; font-src 'self' 'unsafe-inline' https://fonts.gstatic.com; upgrade-insecure-requests; block-all-mixed-content;" />

You will not see image previews in the Client User Interface if this setting is missing.


Rich Text Editor Profiles

If you want to use the *Import from Frontify* button in the rich text editor, copy the button from the default profile *core:/sitecore/system/Settings/Html Editor Profiles/Rich Text Default/Toolbar 1/Import from Frontify* to the Html Editor Profiles you are using.

Custom Media Provider
​

This module will replace the default MediaUrlBuilder. In case you have already implemented a custom MediaUrlBuilder your provider will need to inherit from *Frontify.SitecoreIntegration.MediaProvider.FrontifyMediaUrlBuilder* and call the base method of Build( )

Here's an example of a custom MediaUrlBuilder:
​

using Frontify.SitecoreIntegration.Service;
using Sitecore.Data.Items;
using Sitecore.Diagnostics;
using Sitecore.Links.UrlBuilders;

namespace Frontify.SitecoreIntegration.MediaProvider
{
public class MyCustomMediaUrlBuilder : FrontifyMediaUrlBuilder
{
public MyCustomMediaUrlBuilder(DefaultMediaUrlBuilderOptions defaultOptions, string mediaLinkPrefix) : base(defaultOptions, mediaLinkPrefix)
{
}

public override string Build(MediaItem item, MediaUrlBuilderOptions options)
{
Assert.ArgumentNotNull(item?.InnerItem, "Media Item should bot be null");

if (new FrontifyMediaService().IsFrontifyAsset(item))
{
// Fall back to FrontifyMediaProvider, skip custom code
return base.Build(item, options);
}

// TODO: your custom code here

return base.Build(item, options);
}
}
}

Customizations to Image and File field type

In case you have customized the Image and File Content Editor field types, take a close look at how this module alters the *Control* field on these items:

* core:/sitecore/system/Field types/Simple Types/Image

* core:/sitecore/system/Field types/Simple Types/File

If any questions are left unanswered, don't hesitate to contact our support team.

Did this answer your question?