Slimsy Using SlimsyExtension in data-srcset ignoring the crop

Hello, I am using Slimsy with Umbraco File System Providers & Azure Blob Cache, when I have changed @Url.GetCropUrl to @SlimsyExtension.GetCropUrl the crop is getting ignored. the following snippets works: <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mP8/x8AAwMCAO+ip1sAAAAASUVORK5CYII=" data-src="@Url.GetCropUrl(image, cropAlias: "Square - Small", useCropDimensions: true)" sizes="auto" alt="@(image.HasValue("alternateText") ? image.Value<string>("alternateText") : image.Name)" class="lazyload" /> <noscript><img src="@Url.GetCropUrl(image, cropAlias: "Square - Small", useCropDimensions: true)" alt="@(image.HasValue("alternateText") ? image.Value<string>("alternateText") : image.Name)" /></noscript>

The following ignore the crop and pull the default image even the crop is within the url parameters: <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mP8/x8AAwMCAO+ip1sAAAAASUVORK5CYII=" data-src="@Url.GetCropUrl(image, cropAlias: "Square - Small", useCropDimensions: true)" data-srcset="@Url.GetSrcSetUrls(image, cropAlias: "Square - Small")" sizes="auto" alt="@(image.HasValue("alternateText") ? image.Value<string>("alternateText") : image.Name)" class="lazyload" />

The following ignore the crop and pull the default image even the crop is within the url parameters: <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mP8/x8AAwMCAO+ip1sAAAAASUVORK5CYII=" data-src="@SlimsyExtensions.GetCropUrl(image, cropAlias: "Square - Small", useCropDimensions: true)" sizes="auto" alt="@(image.HasValue("alternateText") ? image.Value<string>("alternateText") : image.Name)" class="lazyload" />

using Umbraco 8.14.1 Slimsy 3.0.0 UmbracoFileSystemProviders.Azure 2.0.1 UmbracoFileSystemProviders.Azure.Media 2.0.1 ImageProcessor.Web.Plugins.AzureBlobCache 1.71

If you need more info/config please let me know.

Many Thanks.

Jul 27 '21 16:07 khraibani

Hi @khraibani could you please post the rendered markup?

Jul 28 '21 09:07 Jeavon

Hi @Jeavon thank you for swift response! Using Url extension and without srcset crop is getting respected. <img src="/media/a0ib1pud/marek-piwnicki-l21zw51kihc-unsplash.jpg?center=0.49746958377396483,0.49145610826887909&mode=crop&width=640&height=640&rnd=132718770395770000" data-src="/media/a0ib1pud/marek-piwnicki-l21zw51kihc-unsplash.jpg?center=0.49746958377396483,0.49145610826887909&mode=crop&width=640&height=640&rnd=132718770395770000" sizes="367px" alt="Marek Piwnicki L21zw51kihc Unsplash" class="lazyautosizes lazyloaded"> Using Url extension and WITH srcset crop isn't getting respected and the image looks in its default aspect ratio <img src="/media/a0ib1pud/marek-piwnicki-l21zw51kihc-unsplash.jpg?center=0.49746958377396483,0.49145610826887909&mode=crop&width=640&height=640&rnd=132718770395770000" data-src="/media/a0ib1pud/marek-piwnicki-l21zw51kihc-unsplash.jpg?center=0.49746958377396483,0.49145610826887909&mode=crop&width=640&height=640&rnd=132718770395770000" data-srcset="https://amrop.azureedge.net/media/a0ib1pud/marek-piwnicki-l21zw51kihc-unsplash.jpg?center=0.49746958377396483,0.49145610826887909&mode=crop&quality=90&width=160&height=160&rnd=132718770395770000 160w,https://amrop.azureedge.net/media/a0ib1pud/marek-piwnicki-l21zw51kihc-unsplash.jpg?center=0.49746958377396483,0.49145610826887909&mode=crop&quality=90&width=320&height=320&rnd=132718770395770000 320w,https://amrop.azureedge.net/media/a0ib1pud/marek-piwnicki-l21zw51kihc-unsplash.jpg?center=0.49746958377396483,0.49145610826887909&mode=crop&quality=90&width=480&height=480&rnd=132718770395770000 480w,https://amrop.azureedge.net/media/a0ib1pud/marek-piwnicki-l21zw51kihc-unsplash.jpg?center=0.49746958377396483,0.49145610826887909&mode=crop&quality=90&width=640&height=640&rnd=132718770395770000 640w,https://amrop.azureedge.net/media/a0ib1pud/marek-piwnicki-l21zw51kihc-unsplash.jpg?center=0.49746958377396483,0.49145610826887909&mode=crop&quality=90&width=800&height=800&rnd=132718770395770000 800w,https://amrop.azureedge.net/media/a0ib1pud/marek-piwnicki-l21zw51kihc-unsplash.jpg?center=0.49746958377396483,0.49145610826887909&mode=crop&quality=90&width=960&height=960&rnd=132718770395770000 960w,https://amrop.azureedge.net/media/a0ib1pud/marek-piwnicki-l21zw51kihc-unsplash.jpg?center=0.49746958377396483,0.49145610826887909&mode=crop&quality=90&width=1120&height=1120&rnd=132718770395770000 1120w,https://amrop.azureedge.net/media/a0ib1pud/marek-piwnicki-l21zw51kihc-unsplash.jpg?center=0.49746958377396483,0.49145610826887909&mode=crop&quality=90&width=1280&height=1280&rnd=132718770395770000 1280w,https://amrop.azureedge.net/media/a0ib1pud/marek-piwnicki-l21zw51kihc-unsplash.jpg?center=0.49746958377396483,0.49145610826887909&mode=crop&quality=90&width=1440&height=1440&rnd=132718770395770000 1440w,https://amrop.azureedge.net/media/a0ib1pud/marek-piwnicki-l21zw51kihc-unsplash.jpg?center=0.49746958377396483,0.49145610826887909&mode=crop&quality=90&width=1600&height=1600&rnd=132718770395770000 1600w,https://amrop.azureedge.net/media/a0ib1pud/marek-piwnicki-l21zw51kihc-unsplash.jpg?center=0.49746958377396483,0.49145610826887909&mode=crop&quality=90&width=1760&height=1760&rnd=132718770395770000 1760w,https://amrop.azureedge.net/media/a0ib1pud/marek-piwnicki-l21zw51kihc-unsplash.jpg?center=0.49746958377396483,0.49145610826887909&mode=crop&quality=90&width=1920&height=1920&rnd=132718770395770000 1920w" sizes="367px" alt="Marek Piwnicki L21zw51kihc Unsplash" class="lazyautosizes lazyloaded" srcset="https://amrop.azureedge.net/media/a0ib1pud/marek-piwnicki-l21zw51kihc-unsplash.jpg?center=0.49746958377396483,0.49145610826887909&mode=crop&quality=90&width=160&height=160&rnd=132718770395770000 160w,https://amrop.azureedge.net/media/a0ib1pud/marek-piwnicki-l21zw51kihc-unsplash.jpg?center=0.49746958377396483,0.49145610826887909&mode=crop&quality=90&width=320&height=320&rnd=132718770395770000 320w,https://amrop.azureedge.net/media/a0ib1pud/marek-piwnicki-l21zw51kihc-unsplash.jpg?center=0.49746958377396483,0.49145610826887909&mode=crop&quality=90&width=480&height=480&rnd=132718770395770000 480w,https://amrop.azureedge.net/media/a0ib1pud/marek-piwnicki-l21zw51kihc-unsplash.jpg?center=0.49746958377396483,0.49145610826887909&mode=crop&quality=90&width=640&height=640&rnd=132718770395770000 640w,https://amrop.azureedge.net/media/a0ib1pud/marek-piwnicki-l21zw51kihc-unsplash.jpg?center=0.49746958377396483,0.49145610826887909&mode=crop&quality=90&width=800&height=800&rnd=132718770395770000 800w,https://amrop.azureedge.net/media/a0ib1pud/marek-piwnicki-l21zw51kihc-unsplash.jpg?center=0.49746958377396483,0.49145610826887909&mode=crop&quality=90&width=960&height=960&rnd=132718770395770000 960w,https://amrop.azureedge.net/media/a0ib1pud/marek-piwnicki-l21zw51kihc-unsplash.jpg?center=0.49746958377396483,0.49145610826887909&mode=crop&quality=90&width=1120&height=1120&rnd=132718770395770000 1120w,https://amrop.azureedge.net/media/a0ib1pud/marek-piwnicki-l21zw51kihc-unsplash.jpg?center=0.49746958377396483,0.49145610826887909&mode=crop&quality=90&width=1280&height=1280&rnd=132718770395770000 1280w,https://amrop.azureedge.net/media/a0ib1pud/marek-piwnicki-l21zw51kihc-unsplash.jpg?center=0.49746958377396483,0.49145610826887909&mode=crop&quality=90&width=1440&height=1440&rnd=132718770395770000 1440w,https://amrop.azureedge.net/media/a0ib1pud/marek-piwnicki-l21zw51kihc-unsplash.jpg?center=0.49746958377396483,0.49145610826887909&mode=crop&quality=90&width=1600&height=1600&rnd=132718770395770000 1600w,https://amrop.azureedge.net/media/a0ib1pud/marek-piwnicki-l21zw51kihc-unsplash.jpg?center=0.49746958377396483,0.49145610826887909&mode=crop&quality=90&width=1760&height=1760&rnd=132718770395770000 1760w,https://amrop.azureedge.net/media/a0ib1pud/marek-piwnicki-l21zw51kihc-unsplash.jpg?center=0.49746958377396483,0.49145610826887909&mode=crop&quality=90&width=1920&height=1920&rnd=132718770395770000 1920w">

Using SlimsyExtensions extension and WITH srcset crop isn't getting respected and the image looks in its default aspect ratio <img src="https://amrop.azureedge.net/media/a0ib1pud/marek-piwnicki-l21zw51kihc-unsplash.jpg?center=0.49746958377396483,0.49145610826887909&mode=crop&width=640&height=640&rnd=132718770395770000" data-src="https://amrop.azureedge.net/media/a0ib1pud/marek-piwnicki-l21zw51kihc-unsplash.jpg?center=0.49746958377396483,0.49145610826887909&mode=crop&width=640&height=640&rnd=132718770395770000" sizes="367px" alt="Marek Piwnicki L21zw51kihc Unsplash" class="lazyautosizes lazyloaded">

Thank you.

Jul 28 '21 10:07 khraibani

@Jeavon sorry to chase on this, do you need anymore info from me?

Jan 18 '22 11:01 khraibani

Hi @khraibani have you checked the css is correctly setting display: block or display: inline-block;?

Jan 21 '22 15:01 Jeavon

Slimsy Slimsy copied to clipboard

Using SlimsyExtension in data-srcset ignoring the crop

Slimsy
Slimsy copied to clipboard