Episode 7

Umbraco 13 Tutorial - Episode 7 - Lazy Loading and Responsive Images with Slimsy

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