39 votes

Slimsy

Effortless Responsive 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!

 

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).

Slimsy includes lazysizes.min.js and picturefill.min.js and some helper methods.

Below is an example of how easy it is to use image srcset with a fallback image:

@foreach (var feature in featuredPages)
{
    var featureImage = Umbraco.TypedMedia(feature.GetPropertyValue<int>("image"));
    <div class="3u">
        <!-- Feature -->
        <section class="is-feature">
        	<img data-srcset="@Url.GetSrcSetUrls(featureImage, 270, 161)" data-src="@Url.GetCropUrl(featureImage, 270, 161)" sizes="auto" class="lazyload" />
        </section>
    </div>
}

Please visit our GitHub for all the information you need to configure and integrate Slimsy into your website projects.

Slimsy v1 info is archived on GitHub at https://github.com/Jeavon/Slimsy/tree/v1

Screenshots

Documentation

Source code

Project owner

Jeavon Leopold

Jeavon Leopold

Jeavon has 12599 karma points

Project Compatibility

This project is compatible with the following versions as reported by community members who have downloaded this package:
Untested or doesn't work on Umbraco Cloud
7.7.x (100%)
7.6.x (100%)
7.5.x (untested)
7.4.x (100%)
7.3.x (73%)
7.2.x (100%)
7.1.x (100%)
7.0.x (untested)
6.1.x (untested)
6.0.x (untested)

You must login before you can report on package compatibility.

Project Information

  • Project owner: Jeavon Leopold
  • Contributors: Marc Stöcker , Will Phillips
  • Created: 22/05/2014
  • Current version 2.0.0-beta2
  • .net Version 4.0,4.5
  • License MIT
  • Downloads: 6191

External resources