9

I'm looking to implement hashing on images that we are resizing manually in the cshtml file. I've looked at a few articles on how to do this and ended up with the following

<img class="callout-grid__image" 
     srcset="@Sitecore.Resources.Media.HashingUtils.ProtectAssetUrl(string.Format("{0}?w=300 1x", Model.GlassModel.CalloutImage.Src)), 
             @Sitecore.Resources.Media.HashingUtils.ProtectAssetUrl(string.Format("{0}?w=300 2x", Model.GlassModel.CalloutImage.Src))" 
     alt="@Model.GlassModel.CalloutImage.Alt">

This outputs the url with the hash in it but the image doesn't show. I get the error below in the console:

Failed parsing 'srcset' attribute value since it has an unknown descriptor.

The image url renders like this:

http://url/imagename.jpg?w=300 1x&hash=8628BA4B70220C694175BAD0EDA760C280B00BC4

I assume that the invalid attribute is the hash. Is there a way to have the hash on a srcset attribute?

  • 1
    I just want to check here, but are you sure it's not the space between 300 and 1 that is causing the issue? – Pete Navarra Oct 7 '16 at 15:20
7

It looks like your problem is the 1x being before the hash parameter - that part doesn't need to be included in the hash.

Try changing to this:

<img class="callout-grid__image" 
    srcset="@Sitecore.Resources.Media.HashingUtils.ProtectAssetUrl(string.Format("{0}?w=300", Model.GlassModel.CalloutImage.Src))  1x, 
            @Sitecore.Resources.Media.HashingUtils.ProtectAssetUrl(string.Format("{0}?w=300", Model.GlassModel.CalloutImage.Src))  2x" 
 alt="@Model.GlassModel.CalloutImage.Alt">

The 1x and 2x should be after the Url, whereas the hash query string is part of the Url. This change would produce the url like this:

<img class="callout-grid__image" 
 srcset="http://url/imagename.jpg?w=300&hash=8628BA4B70220C694175BAD0EDA760C280B00BC4 1x, 
         http://url/imagename.jpg?w=600&hash=8628BA4B70220C694175BAD0EDA760C280B00BC4 2x" 
 alt="The Alt Text">
  • This works! Thanks, I had assumed that all resizing parameters have to be included before the hash – Basil Nyachogo Oct 10 '16 at 20:14
0

It could be an issue with the space in your URL.

Try changing it to this untested code:

<img class="callout-grid__image" srcset="@Sitecore.Resources.Media.HashingUtils.ProtectAssetUrl(string.Format("{0}?w=300%201x", Model.GlassModel.CalloutImage.Src)), 
             @Sitecore.Resources.Media.HashingUtils.ProtectAssetUrl(string.Format("{0}?w=300%202x", Model.GlassModel.CalloutImage.Src))" 
     alt="@Model.GlassModel.CalloutImage.Alt">
  • 1
    url encoding the space between the site query string and the srcset identifier will not fix the issue. srcset is looking for that 1x or 2x after the Url of the image. See my answer – Richard Seal Oct 7 '16 at 15:27

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.