Handling media items in xmCloud and Experience Edge

The Sitecore Experience Edge simplifies the architecture, infrastructure, and maintenance, and provides an easy way to make the content available for every device using GraphQL query.

This post is about a few quick tips about media handling on experience edge and the existing limitations.

Project Requirement

At the start of the project you need to ask a few questions about the asset requirements:

• The maximum size of the assets
• Do you need special functionality for the image handling
• Do you have any secure assets

You need to be aware of the experience edge limitations. The maximum size of a media item is 50Mb. If you have larger media items, you may want to consider other solutions like Sitecore Content Hub.

The experience edge supports the following parameters for image handling:

• w: The width of the image.
• h: The height of the image.
• mw: The maximum width of the image.
• mh: The maximum height of the image.

What is published to the Experience Edge should be considered publicly accessible: "Experience Edge for XM does not enforce security constraints on Sitecore content. You must apply publishing restrictions to avoid publishing content that you do not want to be publicly accessible."

You may be able to secure the pages using nextjs app but securing the media items could be challenging.

Url Handling

you need to keep in mind, that experience edge URLs are case-sensitive. Based on the project requirement you may need to have lowercase URLs (for SEO).

To achieve that first you need to make sure the generated URLs during the publishing of the pages are lowercase:

    <linkManager defaultProvider="switchableLinkProvider">
      <providers>
        <add name="localizedProvider">
          <patch:attribute name="lowercaseUrls">true</patch:attribute>
        </add>
      </providers>
    </linkManager>

In case you are using a custom sitemap provider:

    <linkManager defaultProvider="switchableLinkProvider">
      <providers>
        <!-- In case you are using custom sitemap provider -->
        <add name="sitemapLinkProvider" type="Sitecore.XA.Foundation.Multisite.LinkManagers.LocalizableLinkProvider, Sitecore.XA.Foundation.Multisite"
             lowercaseUrls="true" .../>
      </providers>
    </linkManager>

And finally, you need to make sure the generated media URLs are also lowercase.
To achieve that you need to patch the root urlBuilder and mediaUrlBuilder:

    <links>
      <urlBuilder>
        <lowercaseUrls>true</lowercaseUrls>
      </urlBuilder>
      <mediaUrlBuilder>
        <param type="Sitecore.Links.UrlBuilders.DefaultMediaUrlBuilderOptions, Sitecore.Kernel" desc="defaultOptions">
          <lowercaseUrls><patch:delete /></lowercaseUrls>
          <lowercaseUrls>true</lowercaseUrls>
        </param>
      </mediaUrlBuilder>
    </links>

After applying all of those patches, you will have a consistent lowercase URL across the sites.