umbraco-packages - Our.Umbraco.Slimsy 3.0.0-beta3-000211

Please follow the instructions on the project page http://our.umbraco.org/projects/website-utilities/slimsy

PM> Install-Package Our.Umbraco.Slimsy -Version 3.0.0-beta3-000211 -Source https://www.myget.org/F/umbraco-packages/api/v3/index.json

Copy to clipboard

> nuget.exe install Our.Umbraco.Slimsy -Version 3.0.0-beta3-000211 -Source https://www.myget.org/F/umbraco-packages/api/v3/index.json

Copy to clipboard

> dotnet add package Our.Umbraco.Slimsy --version 3.0.0-beta3-000211 --source https://www.myget.org/F/umbraco-packages/api/v3/index.json

Copy to clipboard
<PackageReference Include="Our.Umbraco.Slimsy" Version="3.0.0-beta3-000211" />
Copy to clipboard
source https://www.myget.org/F/umbraco-packages/api/v3/index.json

nuget Our.Umbraco.Slimsy  ~> 3.0.0-beta3-000211
Copy to clipboard

> choco install Our.Umbraco.Slimsy --version 3.0.0-beta3-000211 --source https://www.myget.org/F/umbraco-packages/api/v2

Copy to clipboard
Import-Module PowerShellGet
Register-PSRepository -Name "umbraco-packages" -SourceLocation "https://www.myget.org/F/umbraco-packages/api/v2"
Install-Module -Name "Our.Umbraco.Slimsy" -RequiredVersion "3.0.0-beta3-000211" -Repository "umbraco-packages" -AllowPreRelease
Copy to clipboard

Browse the sources in this package using Visual Studio or WinDbg by configuring the following legacy symbol server URL: https://www.myget.org/F/umbraco-packages/symbols/


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

NuGet Package: NuGet release

Umbraco Package: Our Umbraco project page

Prerelease Downloads

NuGet Package: MyGet build

Umbraco Package (zip file): AppVeyor Artifacts

Build status

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

Here

  • Any 0.0
    • UmbracoCms.Core (>= 8.1.0 && < 8.99999.0)
    • UmbracoCms.Web (>= 8.1.0 && < 8.99999.0)
  • .NETFramework 4.7.2: 4.7.2.0

                        
Assembly Assembly hash Match
/lib/net472/slimsy.dll ea20e0fbe57747559a6709bd363277d71

Owners

Jeavon Leopold

Authors

Jeavon Leopold, Marc Stöcker, William Phillips

Project URL

https://github.com/Jeavon/Slimsy

License

MIT

Tags

umbraco

Info

462 total downloads
14 downloads for version 3.0.0-beta3-000211
Download (19.38 KB)
Download legacy symbols (22.81 KB)
Found on the current feed only

Package history

Version Size Last updated Downloads Mirrored?
4.0.3-alpha.394 93.49 KB Mon, 28 Nov 2022 15:22:32 GMT 0
4.0.3-alpha.393 93.49 KB Fri, 25 Nov 2022 13:05:46 GMT 0
4.0.2-alpha.390 93.49 KB Fri, 25 Nov 2022 12:57:05 GMT 0
4.0.2-alpha.389 93.49 KB Fri, 25 Nov 2022 11:40:13 GMT 0
4.0.2-alpha.388 93.49 KB Fri, 25 Nov 2022 11:38:54 GMT 0
4.0.2-alpha.387 91.32 KB Fri, 25 Nov 2022 09:39:27 GMT 0
4.0.2-alpha.386 91.31 KB Thu, 24 Nov 2022 16:10:33 GMT 0
4.0.2-alpha.385 91.31 KB Mon, 21 Nov 2022 10:35:31 GMT 0
4.0.2-alpha.384 91.31 KB Mon, 21 Nov 2022 10:24:51 GMT 0
4.0.1-alpha.380 91.31 KB Mon, 21 Nov 2022 09:53:40 GMT 0
4.0.1-alpha.378 91.05 KB Tue, 20 Sep 2022 12:43:17 GMT 0
4.0.1-alpha.377 90.88 KB Tue, 20 Sep 2022 11:45:19 GMT 0
4.0.0-beta2.373 90.88 KB Thu, 04 Aug 2022 17:14:07 GMT 0
4.0.0-beta2.372 90.88 KB Thu, 04 Aug 2022 17:09:36 GMT 0
4.0.0-beta2.371 90.88 KB Thu, 04 Aug 2022 16:25:10 GMT 0
4.0.0-beta2.370 90.88 KB Wed, 03 Aug 2022 11:43:53 GMT 0
4.0.0-beta2.369 90.88 KB Wed, 03 Aug 2022 11:14:50 GMT 0
4.0.0-beta2.368 90.87 KB Wed, 03 Aug 2022 10:59:16 GMT 0
4.0.0-beta2.367 90.86 KB Wed, 03 Aug 2022 10:47:58 GMT 0
4.0.0-beta1.364 90.85 KB Wed, 03 Aug 2022 09:44:34 GMT 0
4.0.0-beta1 90.86 KB Wed, 03 Aug 2022 10:39:02 GMT 0
4.0.0-alpha.362 90.86 KB Wed, 03 Aug 2022 09:41:06 GMT 0
4.0.0-alpha.361 90.85 KB Wed, 03 Aug 2022 09:35:44 GMT 0
4.0.0-alpha.360 90.72 KB Wed, 27 Jul 2022 09:23:23 GMT 0
4.0.0-alpha.359 90.7 KB Wed, 27 Jul 2022 09:10:48 GMT 0
4.0.0-alpha.358 90.57 KB Tue, 26 Jul 2022 16:22:46 GMT 0
4.0.0-alpha.357 90.51 KB Tue, 26 Jul 2022 16:08:40 GMT 0
4.0.0-alpha.355 90.51 KB Tue, 26 Jul 2022 15:54:08 GMT 0
4.0.0-alpha.354 90.51 KB Tue, 26 Jul 2022 15:50:11 GMT 0
4.0.0-alpha.353 90.57 KB Fri, 22 Jul 2022 17:50:02 GMT 0
4.0.0-alpha.352 86.94 KB Fri, 22 Jul 2022 17:16:06 GMT 0
4.0.0-alpha.351 86.95 KB Fri, 22 Jul 2022 16:49:27 GMT 0
4.0.0-alpha.350 86.95 KB Fri, 22 Jul 2022 16:43:45 GMT 0
4.0.0-alpha.349 86.85 KB Fri, 22 Jul 2022 16:07:22 GMT 0
4.0.0-alpha.348 86.41 KB Wed, 13 Jul 2022 12:21:01 GMT 0
4.0.0-alpha.347 86.41 KB Tue, 12 Jul 2022 18:54:46 GMT 0
4.0.0-alpha.346 86.41 KB Tue, 12 Jul 2022 18:53:15 GMT 0
4.0.0-alpha.344 86.48 KB Tue, 12 Jul 2022 18:42:19 GMT 0
4.0.0-alpha.343 86.47 KB Tue, 12 Jul 2022 18:31:26 GMT 0
4.0.0-alpha.342 86.58 KB Tue, 12 Jul 2022 13:08:06 GMT 0
4.0.0-alpha.341 85.44 KB Tue, 12 Jul 2022 12:28:06 GMT 0
4.0.0-alpha.340 85.44 KB Tue, 12 Jul 2022 12:20:34 GMT 0
4.0.0-alpha.333 85.43 KB Tue, 21 Jun 2022 16:58:13 GMT 0
4.0.0-alpha.332 85.45 KB Mon, 20 Jun 2022 13:05:08 GMT 0
4.0.0-alpha.331 85.46 KB Fri, 17 Jun 2022 15:08:20 GMT 0
4.0.0-alpha.330 85.31 KB Wed, 11 May 2022 14:09:04 GMT 0
4.0.0-alpha.329 86.31 KB Wed, 11 May 2022 11:42:23 GMT 0
4.0.0-alpha.328 86.31 KB Wed, 11 May 2022 11:41:41 GMT 0
4.0.0-alpha.321 86.08 KB Fri, 04 Feb 2022 17:04:02 GMT 1
3.0.1-alpha-000345 22.2 KB Tue, 12 Jul 2022 18:51:46 GMT 1
3.0.1-alpha-000289 22.15 KB Fri, 22 May 2020 14:07:01 GMT 5
3.0.0 22.11 KB Fri, 22 May 2020 14:05:00 GMT 4
3.0.0-beta6-000285 22.15 KB Fri, 22 May 2020 13:59:13 GMT 4
3.0.0-beta6-000284 22.15 KB Mon, 18 May 2020 10:07:08 GMT 5
3.0.0-beta6-000283 22.15 KB Thu, 14 May 2020 11:09:56 GMT 5
3.0.0-beta5-000280 22.14 KB Wed, 13 May 2020 15:36:27 GMT 5
3.0.0-beta5-000279 21.95 KB Wed, 13 May 2020 13:25:25 GMT 6
3.0.0-beta5-000278 21.95 KB Wed, 13 May 2020 13:22:22 GMT 4
3.0.0-beta5-000277 21.2 KB Tue, 12 May 2020 18:04:21 GMT 5
3.0.0-beta5-000276 21.2 KB Tue, 12 May 2020 16:38:58 GMT 5
3.0.0-beta5-000275 21.2 KB Tue, 12 May 2020 16:35:32 GMT 5
3.0.0-beta5-000274 21.2 KB Tue, 12 May 2020 16:31:45 GMT 5
3.0.0-beta5-000273 21.2 KB Tue, 12 May 2020 13:46:37 GMT 5
3.0.0-beta5-000272 21.2 KB Tue, 12 May 2020 13:29:57 GMT 5
3.0.0-beta5-000271 21.19 KB Tue, 12 May 2020 13:23:42 GMT 5
3.0.0-beta5-000269 21.18 KB Mon, 11 May 2020 18:16:43 GMT 5
3.0.0-beta5-000264 21.04 KB Mon, 20 Apr 2020 14:47:38 GMT 8
3.0.0-beta5-000263 21.04 KB Mon, 20 Apr 2020 14:05:56 GMT 8
3.0.0-beta5-000262 21.12 KB Mon, 20 Apr 2020 12:56:07 GMT 6
3.0.0-beta5-000261 21.11 KB Mon, 20 Apr 2020 12:50:35 GMT 6
3.0.0-beta5-000260 21.12 KB Mon, 20 Apr 2020 12:44:25 GMT 6
3.0.0-beta5-000259 21.12 KB Mon, 20 Apr 2020 11:22:18 GMT 7
3.0.0-beta5-000252 20.64 KB Fri, 17 Apr 2020 14:56:22 GMT 7
3.0.0-beta5-000249 20.67 KB Thu, 16 Apr 2020 17:48:24 GMT 6
3.0.0-beta5-000247 20.64 KB Thu, 16 Apr 2020 16:02:25 GMT 6
3.0.0-beta5-000244 20.79 KB Thu, 16 Apr 2020 11:27:25 GMT 6
3.0.0-beta5-000234 20.51 KB Fri, 10 Apr 2020 13:44:40 GMT 6
3.0.0-beta5-000233 20.65 KB Thu, 09 Apr 2020 17:40:55 GMT 6
3.0.0-beta5 22.13 KB Thu, 14 May 2020 11:00:15 GMT 5
3.0.0-beta4-000228 20.64 KB Thu, 09 Apr 2020 09:24:41 GMT 8
3.0.0-beta4-000227 20.64 KB Thu, 09 Apr 2020 08:33:58 GMT 6
3.0.0-beta4-000226 19.79 KB Wed, 08 Apr 2020 16:02:08 GMT 7
3.0.0-beta4-000222 19.79 KB Wed, 08 Apr 2020 11:28:41 GMT 8
3.0.0-beta4-000220 19.41 KB Mon, 16 Dec 2019 17:13:37 GMT 15
3.0.0-beta4-000215 19.41 KB Tue, 15 Oct 2019 10:21:42 GMT 16
3.0.0-beta4 20.63 KB Thu, 09 Apr 2020 17:24:52 GMT 6
3.0.0-beta3-000212 19.41 KB Mon, 07 Oct 2019 11:19:10 GMT 13
3.0.0-beta3-000211 19.38 KB Mon, 07 Oct 2019 09:43:07 GMT 14
3.0.0-beta3-000210 19.38 KB Mon, 07 Oct 2019 09:34:41 GMT 13
3.0.0-beta3-000209 19.36 KB Mon, 07 Oct 2019 09:19:37 GMT 12
3.0.0-beta3-000208 19.36 KB Mon, 07 Oct 2019 09:14:59 GMT 12
3.0.0-beta3-000207 19.36 KB Mon, 07 Oct 2019 09:14:09 GMT 14
3.0.0-beta3-000203 19.74 KB Tue, 30 Jul 2019 12:35:41 GMT 15
3.0.0-beta2-000202 19.75 KB Tue, 30 Jul 2019 12:19:00 GMT 14
3.0.0-beta2-000201 19.83 KB Mon, 29 Jul 2019 14:31:23 GMT 12
3.0.0-beta2-000199 19.84 KB Mon, 29 Jul 2019 14:19:34 GMT 12
3.0.0-beta1-000197 19.84 KB Tue, 02 Apr 2019 18:02:23 GMT 17
3.0.0-beta1-000196 19.84 KB Tue, 02 Apr 2019 17:59:08 GMT 17
3.0.0-beta1-000193 19.84 KB Tue, 02 Apr 2019 17:35:27 GMT 16
3.0.0-beta1 19.82 KB Tue, 02 Apr 2019 17:40:51 GMT 15
3.0.0-alpha-000286 22.15 KB Fri, 22 May 2020 14:03:25 GMT 5
3.0.0-alpha-000192 19.84 KB Tue, 02 Apr 2019 17:33:06 GMT 15
3.0.0-alpha-000191 19.84 KB Tue, 02 Apr 2019 17:03:59 GMT 17