Skip to content

Instantly share code, notes, and snippets.

@mrflo
Last active May 29, 2022 10:13
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save mrflo/bdeab0aa9398bc3aa6fe9958a0ea0853 to your computer and use it in GitHub Desktop.
Save mrflo/bdeab0aa9398bc3aa6fe9958a0ea0853 to your computer and use it in GitHub Desktop.
Simple partial view to simulate Slimsy on Umbraco V9 - a simple Slimsy simulator and the example to use it. This is used mainly when you migrate a V7/8 to a 9th version
@await Html.PartialAsync("SlimsyIt", new ViewDataDictionary(ViewData) {
{ "publishedContent", yourImageAsPublishedContentObject },
{ "width", 800 },
{ "height", 600 },
{ "class", "optionalClassString" }
})
@inherits Umbraco.Cms.Web.Common.Views.UmbracoViewPage
@using Umbraco.Cms.Core.Media
@using Umbraco.Cms.Core.Routing
@using System.Web;
@using System.Text
@inject IPublishedValueFallback PublishedValueFallback
@inject IPublishedUrlProvider PublishedUrlProvider
@inject IImageUrlGenerator ImageUrlGenerator
@{ //Slimsy simulator
var publishedContent = @ViewData["publishedContent"] as IPublishedContent ?? null;
var width = @ViewData["width"] as Int32? ?? null;
var height = @ViewData["height"] as Int32? ?? null;
var classItem = ViewData["class"] as string;
var widthStep = 160;
var lazyLoading = true;
if (publishedContent == null || width == null || height == null) return;
var heightRatio = (decimal)height.Value / width.Value;
var imageOriginal = publishedContent?.GetCropUrl(ImageUrlGenerator, PublishedValueFallback, PublishedUrlProvider,
width, height, quality: 80, furtherOptions:"&mode=crop&anchor=center", urlMode: UrlMode.Relative) ?? "";
StringBuilder srcSetsBuilder = new StringBuilder();
var w = widthStep;
while (w <= width.Value)
{
var h = (int)Math.Round(w * heightRatio);
var cropString = publishedContent.GetCropUrl(ImageUrlGenerator, PublishedValueFallback, PublishedUrlProvider, w,
h, quality: 80, furtherOptions: "&mode=crop&anchor=center", urlMode: UrlMode.Relative);
srcSetsBuilder.Append($"{cropString} {w}w,");
w += widthStep;
}
//remove last comma
var srcSets = srcSetsBuilder.ToString().Substring(0, srcSetsBuilder.Length - 1);
}
<img data-src="@HttpUtility.HtmlDecode(imageOriginal)" data-srcset="@srcSets" width="@width" height="@height"
loading="@lazyLoading" alt="@publishedContent.Name" sizes="auto" class="lazyload@(classItem!=null?$" {classItem}":"") />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment