slimsy-v2 - Our.Umbraco.Slimsy 2.0.1-alpha-000158
Please follow the instructions on the project page http://our.umbraco.org/projects/website-utilities/slimsy
PM> Install-Package Our.Umbraco.Slimsy -Version 2.0.1-alpha-000158 -Source https://www.myget.org/F/slimsy-v2/api/v3/index.json
> nuget.exe install Our.Umbraco.Slimsy -Version 2.0.1-alpha-000158 -Source https://www.myget.org/F/slimsy-v2/api/v3/index.json
> dotnet add package Our.Umbraco.Slimsy --version 2.0.1-alpha-000158 --source https://www.myget.org/F/slimsy-v2/api/v3/index.json
source https://www.myget.org/F/slimsy-v2/api/v3/index.json
nuget Our.Umbraco.Slimsy ~> 2.0.1-alpha-000158
Copy to clipboard
> choco install Our.Umbraco.Slimsy --version 2.0.1-alpha-000158 --source https://www.myget.org/F/slimsy-v2/api/v2
Import-Module PowerShellGet
Register-PSRepository -Name "slimsy-v2" -SourceLocation "https://www.myget.org/F/slimsy-v2/api/v2"
Install-Module -Name "Our.Umbraco.Slimsy" -RequiredVersion "2.0.1-alpha-000158" -Repository "slimsy-v2" -AllowPreRelease
Copy to clipboard
Slimsy v2
Effortless Responsive & Lazy Images with LazySizes and Umbraco
Slimsy v2 is not compatible with Slimsy v1 at all, if you upgrade you will have to refactor all of your code!
Release Downloads
Prerelease Downloads
Note Slimsy v2.0.0+ requires Umbraco v7.6.0+
LazySizes.js used in conjunction with ImageProcessor.Web and the built-in Umbraco Image Cropper will make your responsive websites images both adaptive and "retina" quality (if supported by the client browser), the images are also be lazy loaded.
Slimsy includes lazysizes.min.js and picturefill.min.js and some helper methods.
Implementing post package installation
1. Add lazysizes.min.js & picturefill.min.js to your pages
In your master template add the Javascript files
<script src="/scripts/picturefill.min.js"></script>
<script src="/scripts/lazysizes.min.js" async=""></script>
You can of course bundle these together. If you don't already have JavaScript bundling in place you should take a look at the Optimus package, it will allow you to bundle them together in minutes.
2. Ensure all img elements are set to display: block
or display: inline-block;
e.g.
img {
display:block;
}
3. Adjust your image elements, adding data-srcset
, data-src
, sizes="auto"
& class="lazyload"
attributes
Use the GetSrcSetUrls
UrlHelper extension method to generate your data-srcset
attributes. For these methods to function correctly your image property types should use the built-in Image Cropper.
Url.GetSrcSetUrls(publishedContent, int width, int height)
Use this method for setting the crop dimensions in your Razor code, assumes your image cropper property alias is "umbracoFile"
e.g. An initial image size of 270 x 161. This example is looping pages, each page has a media picker with property alias "Image"
@foreach (var feature in featuredPages)
{
var featureImage = Umbraco.TypedMedia(feature.GetPropertyValue<int>("image"));
<div class="3u">
<!-- Feature -->
<section class="is-feature">
<img src="@Url.GetCropUrl(featureImage, 270, 161, quality:30, furtherOptions:"&format=auto")" data-srcset="@Url.GetSrcSetUrls(featureImage, 270, 161)" data-src="@Url.GetCropUrl(featureImage, 270, 161)" sizes="auto" class="lazyload" />
</section>
</div>
}
This example uses the LQIP (low quality image place holder) technique.
Url.GetSrcSetUrls(publishedContent, int width, int height, int quality)
Url.GetSrcSetUrls(publishedContent, int width, int height, string propertyAlias)
Url.GetSrcSetUrls(publishedContent, int width, int height, string propertyAlias, string outputFormat, int quality)
Url.GetSrcSetUrls(publishedContent, int width, int height, ImageCropMode? imageCropMode, string outputFormat)
Url.GetSrcSetUrls(publishedContent, AspectRatio aspectRatio)
Slimsy v2 allows you to define a predefined ratio for your image so you don't need to work out the math associated with it, first you instantiate a new built in class of AspectRatio and pass in two integer values, this will crop the image(s) to the desired ratio.
@foreach (var feature in featuredPages)
{
var ratio = new AspectRatio(16, 9);
<div class="3u">
<section class="is-feature">
@if (feature.HasValue("image"))
{
var featureImage = Umbraco.TypedMedia(feature.GetPropertyValue<int>("image"));
<a href="@feature.Url" class="image image-full">
<img data-srcset="@Url.GetSrcSetUrls(featureImage, ratio)" data-src="@Url.GetCropUrl(featureImage, 270, 161)" sizes="auto" class="lazyload" />
</a>
}
<h3><a href="@feature.Url">@feature.Name</a></h3>
@Umbraco.Truncate(feature.GetPropertyValue<string>("bodyText"), 100)
</section>
</div>
}
Url.GetSrcSetUrls(publishedContent, string cropAlias)
Url.GetSrcSetUrls(publishedContent, string cropAlias, string propertyAlias)
Use this method when you want to use a predefined crop, assumes your image cropper property alias is "umbracoFile".
@foreach (var feature in featuredPages)
{
<div class="3u">
<section class="is-feature">
@if (feature.HasValue("image"))
{
var featureImage = Umbraco.TypedMedia(feature.GetPropertyValue<int>("image"));
<a href="@feature.Url" class="image image-full">
<img data-srcset="@Url.GetSrcSetUrls(featureImage, "home", "umbracoFile")" data-src="@Url.GetCropUrl(featureImage, "umbracoFile", "home")" sizes="auto" class="lazyload"/>
</a>
}
<h3><a href="@feature.Url">@feature.Name</a></h3>
@Umbraco.Truncate(feature.GetPropertyValue<string>("bodyText"), 100)
</section>
</div>
}
Url.GetSrcSetUrls(publishedContent, string cropAlias, string propertyAlias, string outputFormat)
4 (optional). Adjust the rendering of your TinyMce Richtext editors
Html.ConvertImgToSrcSet(IPublishedContent publishedContent, string propertyAlias, bool generateLqip, bool removeStyleAttribute, bool roundWidthHeight)
Use this method to convert images entered into TinyMce Rich Text editors to use img source set using generated paths
@Html.ConvertImgToSrcSet(Model.Content, "bodyText", true, true)
Html.ConvertImgToSrcSet(string html, bool generateLqip, bool removeStyleAttribute, bool removeUdiAttribute)
NOTE this method is obsolete in Slimsy v2.1+, use the above method instead
Html.ConvertImgToSrcSet(IHtmlString html, bool generateLqip, bool removeStyleAttribute, bool removeUdiAttribute)
NOTE this method is obsolete in Slimsy v2.1+, use the above method instead
Using <picture>
element
Below is an example of how to use the <picture>
element to provide automated WebP versions of your images using the ImageProcessor WebP plugin, this example also implements a optional LQIP image.
foreach (var caseStudyImage in caseStudyImagesCollection)
{
var imgSrcSet = Url.GetSrcSetUrls(caseStudyImage, 650, 0);
var imgSrcSetWebP = Url.GetSrcSetUrls(caseStudyImage, 650, 0, Constants.Conventions.Media.File, "webp", quality:70);
var imgSrc = Url.GetCropUrl(caseStudyImage, 650, 0);
var imgLqip = Url.GetCropUrl(caseStudyImage, 650, 0, quality: 30, furtherOptions: "&format=auto");
<div class="picture-box">
<picture>
<!--[if IE 9]><video style="display: none"><![endif]-->
<source data-srcset="@imgSrcSetWebP" srcset="@imgLqip" type="image/webp" data-sizes="auto"/>
<source data-srcset="@imgSrcSet" srcset="@imgLqip" type="image/jpeg" data-sizes="auto"/>
<!--[if IE 9]></video><![endif]-->
<img
src="@imgLqip"
data-src="@imgSrc"
class="lazyload"
data-sizes="auto"
alt="@caseStudyImage.Name" />
</picture>
</div>
}
Advanced Options
You can specify the default output format for all images.
<add key="Slimsy:Format" value="jpg"/>
You can specify the default background color by added another appsetting to web.config. As an example this setting is used if ImageProcessor is converting a png to a jpg and it as some transparency.
<add key="Slimsy:BGColor" value="fff"/>
You can specify the default quality for all images, unless specified via helper.
<add key="Slimsy:DefaultQuality" value="90"/>
You can specify the max width for the generated srcset sizes.
<add key="Slimsy:MaxWidth" value="2048"/>
You can specify the width step for the generated srcset sizes.
<add key="Slimsy:WidthStep" value="160"/>
Lazysizes.js
Lazysizes.js is awesome and it's what makes Slimsy v2 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
Razor Helper
It may be useful to use a Razor Helper to render img
or picture
elements, there is an reusable example included in the test site which can be adapted to your own requirement. You can find it here and see it in use here
Test Site & Source Code
A test site is included in the solution, the username and password for Umbraco are admin/password. By default the test site is configured to use full IIS (due to IIS Express SQL CE persistence issue) on the domain slimsy.local, you can change it to use IIS Express if you prefer.
Visual Studio 2015 is required for compiling the source code
Credits and references
This project includes LazySizes and Picturefill Both projects are MIT licensed.
Without the amazing ImageProcessor this package wouldn't exist, so many thanks go to James for creating ImageProcessor!
Many thanks to Douglas Robar for naming Slimsy.
Change log
- .NETFramework 4.5: 4.5.0.0
OwnersJeavon Leopold |
AuthorsJeavon Leopold, Marc Stöcker, William Phillips |
Project URLhttps://github.com/Jeavon/Slimsy |
LicenseMIT |
Tagsumbraco |
Info902 total downloads |
17 downloads for version 2.0.1-alpha-000158 |
Download (21.09 KB) |
Found on the current feed only |
Package history
Version | Size | Last updated | Downloads | Mirrored? | |||
---|---|---|---|---|---|---|---|
2.1.0-beta3-000302 | 21.94 KB | Mon, 27 Sep 2021 11:22:15 GMT | 5 | ||||
2.1.0-beta3-000301 | 21.94 KB | Mon, 27 Sep 2021 10:20:51 GMT | 3 | ||||
2.1.0-beta3-000300 | 22.23 KB | Mon, 27 Sep 2021 10:08:16 GMT | 3 | ||||
2.1.0-beta3-000299 | 23.08 KB | Mon, 12 Jul 2021 15:50:59 GMT | 5 | ||||
2.1.0-beta3-000294 | 22.36 KB | Thu, 17 Sep 2020 15:11:47 GMT | 4 | ||||
2.1.0-beta3-000293 | 22.4 KB | Thu, 17 Sep 2020 12:48:36 GMT | 4 | ||||
2.1.0-beta3-000292 | 22.41 KB | Thu, 17 Sep 2020 11:21:27 GMT | 4 | ||||
2.1.0-beta3-000291 | 22.4 KB | Wed, 16 Sep 2020 16:17:20 GMT | 5 | ||||
2.1.0-beta3-000290 | 22.36 KB | Tue, 15 Sep 2020 18:34:48 GMT | 5 | ||||
2.1.0-beta3-000178 | 22.24 KB | Wed, 03 Oct 2018 09:48:23 GMT | 19 | ||||
2.1.0-beta3-000177 | 22.23 KB | Wed, 03 Oct 2018 08:29:29 GMT | 19 | ||||
2.1.0-beta2-000174 | 22.23 KB | Wed, 03 Oct 2018 08:21:37 GMT | 17 | ||||
2.1.0-beta1-000172 | 22.23 KB | Tue, 02 Oct 2018 16:45:14 GMT | 18 | ||||
2.1.0-beta1-000168 | 22.18 KB | Tue, 02 Oct 2018 16:00:21 GMT | 16 | ||||
2.1.0-alpha-000165 | 22.18 KB | Mon, 01 Oct 2018 12:24:18 GMT | 15 | ||||
2.1.0-alpha-000163 | 22.18 KB | Mon, 01 Oct 2018 12:16:16 GMT | 18 | ||||
2.1.0-alpha-000162 | 21.09 KB | Fri, 07 Sep 2018 16:19:00 GMT | 22 | ||||
2.1.0-alpha-000161 | 21.09 KB | Fri, 07 Sep 2018 15:22:29 GMT | 21 | ||||
2.1.0-alpha-000160 | 21.09 KB | Fri, 07 Sep 2018 15:16:11 GMT | 17 | ||||
2.1.0-alpha-000159 | 21.09 KB | Fri, 07 Sep 2018 15:09:04 GMT | 17 | ||||
2.0.1-alpha-000158 | 21.09 KB | Fri, 07 Sep 2018 15:07:05 GMT | 17 | ||||
2.0.1-alpha-000157 | 20.74 KB | Sat, 28 Apr 2018 17:04:54 GMT | 19 | ||||
2.0.0 | 20.71 KB | Fri, 27 Apr 2018 09:35:41 GMT | 83 | ||||
2.0.0-beta4-000150 | 20.74 KB | Wed, 14 Mar 2018 14:52:15 GMT | 18 | ||||
2.0.0-beta4-000149 | 20.75 KB | Wed, 14 Mar 2018 12:18:37 GMT | 17 | ||||
2.0.0-beta4-000148 | 20.5 KB | Thu, 11 Jan 2018 09:27:10 GMT | 18 | ||||
2.0.0-beta4-000146 | 20.5 KB | Fri, 05 Jan 2018 09:39:24 GMT | 14 | ||||
2.0.0-beta4 | 20.73 KB | Wed, 14 Mar 2018 14:54:55 GMT | 44 | ||||
2.0.0-beta3-000144 | 20.5 KB | Fri, 05 Jan 2018 09:22:05 GMT | 16 | ||||
2.0.0-beta3-000142 | 20.49 KB | Fri, 05 Jan 2018 09:14:12 GMT | 16 | ||||
2.0.0-beta3-000141 | 20.49 KB | Thu, 04 Jan 2018 19:34:29 GMT | 19 | ||||
2.0.0-beta3-000140 | 20.49 KB | Thu, 04 Jan 2018 19:13:42 GMT | 17 | ||||
2.0.0-beta3-000137 | 20.38 KB | Tue, 02 Jan 2018 15:59:03 GMT | 19 | ||||
2.0.0-beta3-000136 | 20.4 KB | Sun, 31 Dec 2017 11:41:24 GMT | 15 | ||||
2.0.0-beta3-000135 | 20.4 KB | Thu, 07 Dec 2017 14:43:28 GMT | 69 | ||||
2.0.0-beta3-000134 | 20.39 KB | Wed, 06 Dec 2017 10:59:57 GMT | 16 | ||||
2.0.0-beta3-000133 | 20.39 KB | Thu, 09 Nov 2017 12:50:20 GMT | 16 | ||||
2.0.0-beta3-000132 | 20.39 KB | Thu, 09 Nov 2017 12:44:37 GMT | 18 | ||||
2.0.0-beta3-000131 | 20.39 KB | Wed, 08 Nov 2017 10:58:40 GMT | 24 | ||||
2.0.0-beta3-000130 | 20.32 KB | Tue, 31 Oct 2017 17:43:17 GMT | 15 | ||||
2.0.0-beta2-000129 | 20.32 KB | Tue, 31 Oct 2017 17:41:17 GMT | 15 | ||||
2.0.0-beta2-000128 | 20.32 KB | Tue, 31 Oct 2017 17:36:02 GMT | 16 | ||||
2.0.0-beta2-000125 | 20.32 KB | Mon, 30 Oct 2017 19:40:45 GMT | 17 | ||||
2.0.0-beta2-000124 | 20.32 KB | Mon, 30 Oct 2017 17:28:50 GMT | 17 | ||||
2.0.0-beta2-000123 | 20.32 KB | Mon, 30 Oct 2017 16:13:51 GMT | 16 | ||||
2.0.0-beta2-000122 | 20.32 KB | Mon, 30 Oct 2017 16:11:25 GMT | 18 | ||||
2.0.0-beta2-000121 | 20.33 KB | Mon, 30 Oct 2017 16:04:30 GMT | 15 | ||||
2.0.0-beta2-000120 | 20.32 KB | Mon, 30 Oct 2017 10:54:25 GMT | 27 | ||||
2.0.0-beta2-000118 | 20.25 KB | Fri, 27 Oct 2017 16:19:10 GMT | 19 | ||||
2.0.0-alpha-000153 | 20.74 KB | Fri, 27 Apr 2018 09:15:56 GMT | 15 |