Umbraco 13 Tutorial - Episode 7 - Lazy Loading and Responsive Images with Slimsy
Episode Links
https://marketplace.umbraco.com/package/our.umbraco.slimsy
GitHub Repo
🐙 GitHub
https://github.com/prjseal/Umbraco-13-Series/
📝 Guest Book
https://github.com/prjseal/Umbraco-13-Series/issues/1
Get Help
💬 Discord
🗣️ Facebook Group
https://www.facebook.com/groups/umbracowebdevs
🐘 Mastodon
https://umbracocommunity.social/
🗨️ Umbraco Forum
https://our.umbraco.com/forum/
☕Buy me a coffee
Code
Freelancer.csproj
<PackageReference Include="Our.Umbraco.Slimsy" Version="5.1.2" />Freelancer.csproj
Program.cs
builder.CreateUmbracoBuilder()
.AddBackOffice()
.AddWebsite()
.AddSlimsy()
.AddDeliveryApi()
.AddComposers()
.Build();Program.cs
Main.cshtml
@inherits Umbraco.Cms.Web.Common.Views.UmbracoViewPage
@{
Layout = null;
}
<!DOCTYPE html>
<html lang="en">
<head>
@await Html.PartialAsync("metaData")
<!-- Favicon-->
<link rel="icon" type="image/x-icon" href="assets/favicon.ico" />
<!-- Font Awesome icons (free version)-->
<script src="https://use.fontawesome.com/releases/v6.3.0/js/all.js" crossorigin="anonymous"></script>
<!-- Google fonts-->
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet" type="text/css" />
<link href="https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic" rel="stylesheet" type="text/css" />
<!-- Core theme CSS (includes Bootstrap)-->
<link href="/css/styles.css" rel="stylesheet" asp-append-version="true" />
</head>
<body id="page-top">
<!-- Navigation-->
@await Html.PartialAsync("mainNavigation")
@RenderBody()
<!-- Footer-->
@await Html.PartialAsync("footer")
<!-- Portfolio Modals-->
@await Html.PartialAsync("modals")
<!-- Bootstrap core JS-->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<!-- Core theme JS-->
<script src="/js/scripts.js" asp-append-version="true"></script>
<!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *-->
<!-- * * SB Forms JS * *-->
<!-- * * Activate your form at https://startbootstrap.com/solution/contact-forms * *-->
<!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *-->
<script src="https://cdn.startbootstrap.com/sb-forms-latest.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lazysizes/5.3.2/lazysizes.min.js" integrity="sha512-q583ppKrCRc7N5O0n2nzUiJ+suUv7Et1JGels4bXOaMFQcamPk9HjdUknZuuFjBNs7tsMuadge5k9RzdmO+1GQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
</body>
</html>Main.cshtml
imageLink.cshtml
@inherits UmbracoViewPage<Umbraco.Cms.Core.Models.Blocks.BlockGridItem<ContentModels.ImageLink>>
@{
if (Model?.Content?.Image == null || Model?.Content?.Link == null) return;
}
<!-- Portfolio Item 1-->
<div class="col-md-6 col-lg-4 mb-5">
<div class="portfolio-item mx-auto">
<a href="@Model.Content.Link.Url" target="@Model.Content.Link.Target" title="@Model.Content.Link.Name">
<div class="portfolio-item-caption d-flex align-items-center justify-content-center h-100 w-100">
<div class="portfolio-item-caption-content text-center text-white"><i class="fas fa-plus fa-3x"></i></div>
</div>
<img class="img-fluid lazyload" data-srcset="@Url.GetSrcSetUrls(Model.Content.Image, 400, 290)" src="@Model.Content.Image.GetCropUrl(40, 29, quality: 40)" alt="@Model.Content.Image.GetAltText()" width="400" height="290" sizes="auto" />
</a>
</div>
</div>imagelink.html
imageWithCaption.cshtml
@inherits UmbracoViewPage<Umbraco.Cms.Core.Models.Blocks.BlockGridItem<ContentModels.ImageWithCaption>>
@using Umbraco.Community.BlockPreview.Extensions
@if (Model?.Content?.Image == null) return;
<section class="page-section bg-white text-white mb-0">
<div class="container">
<div class="row">
<div class="col-lg-8 mx-auto">
@if(Context.Request.IsBlockPreviewRequest())
{
<img class="img-fluid" src="@Model.Content.Image.GetCropUrl(800, 580)" alt="@Model.Content.Image.GetAltText()" width="800" height="580" />
}
else
{
<img class="img-fluid lazyload" data-srcset="@Url.GetSrcSetUrls(Model.Content.Image, 800, 580)" src="@Model.Content.Image.GetCropUrl(80, 58, quality: 40)" alt="@Model.Content.Image.GetAltText()" width="800" height="580" sizes="auto" />
}
<p class="text-dark text-center fst-italic">@Model.Content.Caption</p>
</div>
</div>
</div>
</section>imageWithCaption.cshtml
_ViewImports.cshtml
@using Freelancer.Extensions
@using Umbraco.Cms.Core.Services
@using Umbraco.Extensions
@using ContentModels = Umbraco.Cms.Web.Common.PublishedModels;
@using Umbraco.Cms.Web.Common.Views
@using Umbraco.Cms.Core.Models.Blocks
@using Umbraco.Cms.Core.Models.PublishedContent
@using Microsoft.AspNetCore.Html
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
@addTagHelper *, Smidge
@addTagHelper *, Our.Umbraco.TagHelpers
@inject Smidge.SmidgeHelper SmidgeHelper
@using Slimsy.Enums;
@addTagHelper *, Slimsy
@inject Slimsy.Services.SlimsyService SlimsyService
@using Slimsy.Extensions_ViewImports.cshtml
appsettings.json
,
"Slimsy": {
"WidthStep": 80,
"UseCropAsSrc": false,
"DefaultQuality": 70,
"Format": "",
"BackgroundColor": "",
"AppendSourceDimensions": true,
"EncodeCommas": true,
"AutoOrient": true
}appsettings.json