Media Handler

The Headless Services Media Handler supports configuring how the Sitecore instance handles media requests.

Sets of image sizing parameters that are used in application components must be whitelisted. The whitelisted image dimensions apply to images when using the Experience Edge for XM Preview endpoint in local development. If a parameter set is not whitelisted, the server returns the image without resizing it.

Configure the Media Handler

To use the Headless Services Media Handler, you must provide a configuration patch in Web.config. The configuration patch is applied automatically when the Headless Services module is installed.

If you followed a different installation process or you removed the patch, to instruct Sitecore to use the Headless Services Media Handler:

In the ./Web.config file, in the <handlers /> node, add the following:

RequestResponse

<add verb="*" path="sitecorejss_media.ashx" type="Sitecore.JavaScriptServices.Media.MediaRequestHandler, Sitecore.JavaScriptServices.Media" name="Sitecore.JavaScriptServices.Media.MediaRequestHandler" />

Whitelist image resizing parameters

To whitelist resizing parameter sets and enable image resizing for responsive display:

In the Sitecore configuration, in the <allowedMediaParams /> node, whitelist the size parameters you need. For example:

RequestResponse

<configuration xmlns:patch="http://www.sitecore.net/xmlconfig/">
  <sitecore>
    <javaScriptServices>
      <!--
        You can use configuration patch(es) to add sets of
        media parameters that should be allowed without a
        request protection hash in the URL. Parameter order
        is not important.
      -->
      <allowedMediaParams>
        <example>mw=100,mh=50</example>
        <example2>mw=100</example2>
        <example3>mw=101,mh=51</example3>
      </allowedMediaParams>
    </javaScriptServices>
  </sitecore>
</configuration>

Tip

To determine the image parameters used, look at the query string on the src attribute of the rendered image. For example, given an image src attribute with the value /img.jpg?mw=100&h=50, you must whitelist the comma-delimited parameter set mw=100,h=50. Find out more about using responsive images.

Do you have some feedback for us?

If you have suggestions for improving this article,