Skip to content

Instantly share code, notes, and snippets.

@brendan-rice

brendan-rice/Umbraco9Images.cshtml

Forked from tristolliday/Umbraco9Images.cshtml
Created July 2, 2021 20:19
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save brendan-rice/b3b160d5dd7bb6b7ea9dd476906e5601 to your computer and use it in GitHub Desktop.
Save brendan-rice/b3b160d5dd7bb6b7ea9dd476906e5601 to your computer and use it in GitHub Desktop.
Download ZIP
Responsive, high performance images in umbraco 9
Raw
Umbraco9Images.cshtml
@* /Views/Partials/ResponsiveImage.cshtml *@
@inherits Umbraco.Cms.Web.Common.Views.UmbracoViewPage
@using Umbraco.Cms.Core.Media
@using Umbraco.Cms.Core.Models.PublishedContent
@using Umbraco.Cms.Core.Routing
@inject IPublishedValueFallback PublishedValueFallback
@inject IPublishedUrlProvider PublishedUrlProvider
@inject IImageUrlGenerator ImageUrlGenerator
@{
var publishedContent = @ViewData["publishedContent"] as IPublishedContent ?? null;
var lazyLoading = @ViewData["lazyLoading"] ?? false;
var imageWebP = publishedContent?.GetCropUrl(ImageUrlGenerator, PublishedValueFallback, PublishedUrlProvider, width: 600, height: 20, quality:80, furtherOptions: "&format=webp") ?? "";
var imageJpeg = publishedContent?.GetCropUrl(ImageUrlGenerator, PublishedValueFallback, PublishedUrlProvider, width: 600, height: 20, quality:80, furtherOptions: "&format=jpg") ?? "";
var imageOriginal = publishedContent?.GetCropUrl(ImageUrlGenerator, PublishedValueFallback, PublishedUrlProvider, 600, 20) ?? "";
}
<picture>
<source srcset="@imageWebP" type="image/webp">
<source srcset="@imageJpeg" type='image/jpeg'>
<img src="@imageOriginal" width="600" height="20" loading="@lazyLoading" height="20" alt="" />
</picture>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment