How to generate Sitecore Media Handler Hash?

Question

How can I generate Sitecore Media Handler Hash to append it to URL in JSS? I'm trying to resize the image on the fly but image URL query string like

/blah/blah/myimagename.jpg?w=548&h=202

returns the image in the original size. I can't see the hash added to the generated image URL, so I assume that media hash which is not there is the missing part to make this work.

When I access the generated URL, the image is returned correctly but in the original size no matter which width and height I will add in the URL. I tried already white-listing my query string parameters in a few ways as below:

<javaScriptServices>
  <allowedMediaParams>
    <styleguide-image-sample>
      w=548,h=202,mh=548,mw=202
    </styleguide-image-sample>
    <styleguide-image-sample-adaptive>
      w=548
      h=202
      mh=548
      mw=202
    </styleguide-image-sample-adaptive>
  </allowedMediaParams>
</javaScriptServices>

(source: http://www.stockpick.nl/english/scaling-sitecore-jss-images/) but no luck with that.

To generate the image in my .vue file I use:

import { Image } from '@sitecore-jss/sitecore-jss-vue';

<ScImage :media="fields['Image']" :image-params="{ w: 548, h: 202 }" />

I tried to disable media request protection completely and then the image is resized correctly, but I want to do this properly with the protection enabled.

Answer 1

JSS have it one media handler,to make scaling possible without a hash. Installing the JSS Server Sitecore package automatically adds (JSS 11 and higher) the JSS media handler to the web.config file. so be sure you have the JSS media handler.

Als be sure you use the JSS media handler, sitecorejss_media.ashx a url with /-/jssmedia

In the configuration you can now specify which parameters,value are allowed. That is the way to scale media with JSS and with some media protection without the need of a hash.