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:
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?
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.
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.
Image Rendering Full Size When Using GetResponsiveCropUrl
Hi.
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:
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.
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?
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.
Thanks.
is working on a reply...