5

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.

  • Is the allowedmediaparms config deployed to the sitecore server? – Jan Bluemink Oct 18 at 15:56
  • Do you have the JSS media handler in the web.config, and are you using this one? a url with /-/jssmedia – Jan Bluemink Oct 21 at 7:22
  • The allowedmediaparams config was deployed but I used custom handler trigger which referred wrong handler "sitecore_media.ashx" instead of the "sitecorejss_media.ashx" - that was the problem. @JanBluemink if you add an answer I am happy to accept it. :) Thanks for your help! – Izabela Wlodarska Oct 21 at 8:42
2

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.