Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at

  • Al Burns 49 posts 149 karma points
    Aug 15, 2017 @ 11:03
    Al Burns

    Image Rendering Full Size When Using GetResponsiveCropUrl


    I have created a custom image cropper data type for my image crops and am using GetResponsiveCropUrl(cropAlias, propertyAlias) to retrieve the cropped image. However, when I render the image on the view, the image is displaying full size instead of the crop size. I have applied the max-width: 100% style to the img tags.

    As an example, I have a banner image crop size defined at 1182px x 394px. When rendering on the page, the result is:

    <noscript data-slimmage="true" data-img-class="hero-image" data-img-src="/media/1001/mount-everest-himalayas-nuptse-lhotse-51387.jpeg?anchor=center&amp;mode=crop&amp;width=1182&amp;heightratio=0.3333333333333333333333333333&amp;format=jpg&amp;quality=90&amp;slimmage=true&amp;rnd=131471988390000000" data-img-alt="Mount Everest"><img class="hero-image" src="/media/1001/mount-everest-himalayas-nuptse-lhotse-51387.jpeg?anchor=center&amp;mode=crop&amp;width=1182&amp;heightratio=0.3333333333333333333333333333&amp;format=jpg&amp;quality=90&amp;slimmage=true&amp;rnd=131471988390000000" alt="Mount Everest"></noscript>

    If I apply a width style of the crop width the image displays correctly, e.g. width: 1182px; However, YSlow reports this as a B rating for "Do not scale images in HTML".

    Can anyone advise me how to get images rendering at the correct crop size without having to specify a width style?

    Many thanks.

  • Laurence Gillian 600 posts 1219 karma points
    Aug 15, 2017 @ 15:48
    Laurence Gillian

    If you've got slimmage and slimsy setup properly, and provided the image has a width in the DOM, slimmage will calculate the correct image size to display dependant on that width in the DOM.

    How much is the image being scaled by?

    Slimmage only gets an image every 100px or so, to avoid creating loads of cached variations.

    Do you have a link to your site?

  • Al Burns 49 posts 149 karma points
    Aug 16, 2017 @ 08:21
    Al Burns

    Hi Laurence.

    I am just working with a local demo site to test out Slimsy so I can't supply a site URL.

    I installed Slimsy via NuGet and added the scripts to my page so, other than ensuring the img tags have the max-width style applied, I don't think there is any other setup required?

    I'm not sure I follow regarding your comment about the image having a width in the DOM. Shouldn't Slimsy get this from the crop I have defined? In the script snippet I posted above you can see that the width is correctly being pulled through as an attribute in the image URL. Shouldn't this be sufficient to render the image with the correct crop dimensions?

    As I mentioned, if I manually apply a width style to the img tag via CSS with the crop width the image renders at the correct size but this affects the page rating so need to avoid this if at all possible.


Please Sign in or register to post replies

Write your reply to: