Our.Umbraco.Slimsy
4.0.3
See the version list below for details.
dotnet add package Our.Umbraco.Slimsy --version 4.0.3
NuGet\Install-Package Our.Umbraco.Slimsy -Version 4.0.3
<PackageReference Include="Our.Umbraco.Slimsy" Version="4.0.3" />
paket add Our.Umbraco.Slimsy --version 4.0.3
#r "nuget: Our.Umbraco.Slimsy, 4.0.3"
// Install Our.Umbraco.Slimsy as a Cake Addin #addin nuget:?package=Our.Umbraco.Slimsy&version=4.0.3 // Install Our.Umbraco.Slimsy as a Cake Tool #tool nuget:?package=Our.Umbraco.Slimsy&version=4.0.3
Slimsy v4
Effortless Responsive & Lazy Images with LazySizes and Umbraco
Slimsy v4 is made for Umbraco v10 & v11!
Release Downloads
Prerelease Downloads
Installation
1. Install from NuGet
2. Add to Startup.cs in the ConfigureServices method
.AddSlimsy()
3. Add to _ViewImports.cshtml
@addTagHelper *, Slimsy
@inject Slimsy.Services.SlimsyService SlimsyService
4. Add lazysizes.min.js & to your templates/views
In your template add the JavaScript files
<script src="/scripts/lazysizes.min.js" async=""></script>
5. Ensure all img elements are set to display: block
or display: inline-block;
e.g.
img {
display:block;
}
If you are using LQIP then you will also need to ensure img elements are set to width:100%;
e.g.
img {
display:block;
width:100%;
}
6. Use the <slimsy-picture>
tag helper or manually adjust your image elements, adding data-srcset
, data-src
, sizes="auto"
& class="lazyload"
attributes
<slimsy-picture media-item="@person.Photo" width="323" height="300" css-class="myClass" render-lqip="true" render-webp-alternative="true"></slimsy-picture>
Use the GetSrcSetUrls
UrlHelper extension methods to generate your data-srcset
attributes. For these methods to function correctly your image property types should use the built-in Image Cropper.
<div class="employee-grid__item__image">
<img data-srcset="@Url.GetSrcSetUrls(person.Photo, 323, 300)" srcset="@Url.GetSrcSetUrls(person.Photo, 250, 250, quality: 40)" data-sizes="auto" class="lazyload"/>
</div>
Or inject SlimsyService into your ViewComponents
private readonly SlimsyService _slimsyService;
public ResponsiveImageViewComponent(SlimsyService slimsyService)
{
_slimsyService = slimsyService;
}
7 (optional). Adjust the rendering of your TinyMce Richtext editors
<div class="col-md-9">
<article>
@SlimsyService.ConvertImgToResponsive(Model, "richTextBody", renderPicture:true, pictureSources: new []{"webp"})
</article>
</div>
8 (optional). Adjust the renderer of media within the Grid editor
There's quite a lot to this - so check it out in the demo site here
Advanced Options
Add/Edit appsettings.json
"Slimsy": {
"WidthStep": 180,
"UseCropAsSrc": false,
"DefaultQuality": 70,
"Format": "",
"BGColor": ""
}
or edit Startup.cs
to modify SlimsyOptions
.AddSlimsy(options =>
{
options.DefaultQuality = 60;
options.WidthStep = 60;
options.UseCropAsSrc = true;
})
Lazysizes.js
Lazysizes.js is awesome and it's part of what makes Slimsy so easy to implement. If you need to find out more information about it or how to hook into it's Javascript events be sure to check out it's GitHub
Test Site & Source Code
A test site is included in the solution, the username and password for Umbraco are admin@admin.com/password1234567890.
To run the Blob Test site you will need a Azure storage account, to set the connection string in a local user secret with the TestSite.TestSiteBlobs folder run
dotnet user-secrets set "Umbraco:Storage:AzureBlob:Media:ConnectionString" "DefaultEndpointsProtocol=https;AccountName=;AccountKey=;EndpointSuffix=core.windows.net"
Credits and references
This project includes LazySizes which is MIT licensed.
Without the amazing ImageSharp this package wouldn't exist, so many thanks go to James and all the SixLabors team for creating ImageSharp!
Many thanks to Douglas Robar for naming Slimsy.
Change log
Product | Versions Compatible and additional computed target framework versions. |
---|---|
.NET | net6.0 is compatible. net6.0-android was computed. net6.0-ios was computed. net6.0-maccatalyst was computed. net6.0-macos was computed. net6.0-tvos was computed. net6.0-windows was computed. net7.0 was computed. net7.0-android was computed. net7.0-ios was computed. net7.0-maccatalyst was computed. net7.0-macos was computed. net7.0-tvos was computed. net7.0-windows was computed. net8.0 was computed. net8.0-android was computed. net8.0-browser was computed. net8.0-ios was computed. net8.0-maccatalyst was computed. net8.0-macos was computed. net8.0-tvos was computed. net8.0-windows was computed. net9.0 was computed. net9.0-android was computed. net9.0-browser was computed. net9.0-ios was computed. net9.0-maccatalyst was computed. net9.0-macos was computed. net9.0-tvos was computed. net9.0-windows was computed. |
-
net6.0
- Umbraco.Cms.Web.Common (>= 10.0.0)
NuGet packages
This package is not used by any NuGet packages.
GitHub repositories
This package is not used by any popular GitHub repositories.
Version | Downloads | Last updated |
---|---|---|
6.0.1 | 650 | 7/25/2024 |
6.0.0 | 210 | 5/30/2024 |
6.0.0-beta2 | 114 | 5/8/2024 |
6.0.0-beta1 | 110 | 4/18/2024 |
5.1.2 | 11,717 | 5/8/2024 |
5.1.1 | 1,415 | 4/3/2024 |
5.1.0 | 1,246 | 3/18/2024 |
5.0.0 | 3,635 | 3/8/2024 |
4.2.1 | 880 | 4/4/2024 |
4.2.0 | 273 | 3/18/2024 |
4.1.0 | 13,316 | 9/22/2023 |
4.1.0-beta4 | 3,310 | 8/9/2023 |
4.1.0-beta3 | 1,033 | 7/20/2023 |
4.1.0-beta2 | 820 | 7/13/2023 |
4.1.0-beta1 | 665 | 6/29/2023 |
4.0.3 | 9,742 | 4/5/2023 |
4.0.2 | 8,322 | 11/25/2022 |
4.0.1 | 857 | 11/21/2022 |
4.0.0 | 8,875 | 9/20/2022 |
4.0.0-beta1 | 769 | 8/3/2022 |
3.0.0 | 40,858 | 5/22/2020 |
3.0.0-beta5 | 1,385 | 5/14/2020 |
3.0.0-beta4 | 960 | 4/9/2020 |
3.0.0-beta3 | 4,714 | 10/15/2019 |
3.0.0-beta2 | 2,429 | 7/29/2019 |
3.0.0-beta1 | 4,865 | 4/2/2019 |
2.1.0-beta2 | 5,243 | 10/3/2018 |
2.1.0-beta1 | 1,205 | 10/2/2018 |
2.0.0 | 24,004 | 4/27/2018 |
2.0.0-beta4 | 1,556 | 3/14/2018 |
2.0.0-beta3 | 2,367 | 1/5/2018 |
2.0.0-beta2 | 1,697 | 10/31/2017 |
2.0.0-beta1 | 1,340 | 10/25/2017 |
1.1.7 | 37,286 | 2/3/2016 |
1.1.6 | 3,486 | 11/3/2015 |
1.1.4 | 8,207 | 2/26/2015 |