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

Step	Notes
1) Copy files from the distribution zip (*E.g: Frontify.Sitecore.Integration.3.0.1.10.x-xmcloud.zip*) to the webroot or integrate into your CI/CD pipeline	Items are included as IAR resource files
2) Assign the Sitecore\Frontify Importer role to any roles or users that are allowed to import assets	Admins will see the import buttons in any case.
3) Modify Content-Security-Policy header in web.config	See below for details

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 https://*.ffycdn.net https://web-sdk-eu.aptrinsic.com https://esp-eu.aptrinsic.com; img-src 'self' data: https://s.gravatar.com https://*.wp.com/cdn.auth0.com/avatars https://*.frontify.com https://*.ffycdn.net https://cdn.auth0.com/avatars; style-src 'self' 'unsafe-inline' https://fonts.googleapis.com https://web-sdk-eu.aptrinsic.com; font-src 'self' 'unsafe-inline' https://fonts.gstatic.com; frame-src 'self' https://*.sitecore-staging.cloud/auth https://*.frontify.com https://*.ffycdn.net https://*.sitecorecloud.io/auth; 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.

SXA

If you are using SXA, make the following adjustments the the file types in the core database:

core:/sitecore/system/Field types/Simple Types/Image ==> change the value of the Control field from content:ImageFrontify to content:ImageFrontifySxa
core:/sitecore/system/Field types/Simple Types/File ==> change the value of the Control field from content:FileFrontify to content:FileFrontifySxa

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

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);
        }
    }
}

Glass.Mapper support

If you are using Glass.Mapper, you need a small customization in order to use the @Html.Glass().RenderImage() method with Frontify Assets.

First, create a custom class that inherits from standard Glass FieldImageMapper and checks whether the image field contains a Frontify Asset:

public class FrontifyImageFieldMapper : SitecoreFieldImageMapper
  {
    public override object GetField(Field field, SitecoreFieldConfiguration config, SitecoreDataMappingContext context)
    {
      if (string.IsNullOrEmpty(field?.Value))
      {
        return null;
      }
      var imageField = base.GetField(field, config, context);
      if (field.Value.Contains("frontify-id"))
      {
        var xElement = XElement.Parse(field.Value);
        var src = xElement.Attribute("src");
        ((Image) imageField).Src = src?.Value;
      }

      return imageField;
    }
  }

Then register this class in GlassMapperScCustom.cs and add:

dependencyResolver.DataMapperFactory.Replace<SitecoreFieldImageMapper, FrontifyImageFieldMapper>(() => new FrontifyImageFieldMapper());

right after "var dependencyResolver = new DependencyResolver(config);"

Usage with GraphQL / Experience Edge

Because of a limitation on Sitecore's Edge implementation, it is currently not possible to use the src property for Frontify Assets on Experience Edge. Edge will return null as value. The workaround for this is to use the jsonValue property which will return the correct src attribute along with select attributes of the Frontify asset.

Sample Edge Query:

query {
  item(path: "/sitecore/content/home", language: "en") {
    image: field(name: "image") {
      ... on ImageField {
        alt
        src
        jsonValue
      }
    }
    file: field(name: "file") {
      ... on FileField {
        url
        jsonValue
      }
    }
  }
}

Sample Result:

{
  "data": {
    "item": {
      "image": {
        "alt": "Lake+View",
        "src": null,
        "jsonValue": {
          "value": {
            "src": "https://cdn-assets-eu.frontify.com/...",
            "alt": "Lake+View",
            "extension": "jpg",
            "size": "800768"
          }
        }
      },
      "file": {
        "url": null,
        "jsonValue": {
          "value": {
            "src": "https://s3.eu-central-1.amazonaws.com/...",
            "alt": "Sitecore Integration Test PDF",
            "extension": "pdf",
            "size": "35840"
          }
        }
      }
    }
  }
}

To include further attributes in the output of jsonValue, set the showOnRenderedField property to true in the <Frontify><FieldMappings> config.

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

Sitecore Installation Guide

Context

Installation

Advanced