3 votes

Image Placeholder Generator

This is a package, that creates base64 uri's for tiny versions of your images.

The base64 uri's, are especially useful if you want to lazyload or progressively enhance your images, as they are a somewhat lightweight representantion of what your image looks like.

Check out blogposts for more info about the blur-up technique:
https://jmperezperez.com/medium-image-progressive-loading-placeholder/
https://css-tricks.com/the-blur-up-technique-for-loading-background-images/

Usage

The package adds new extensions for IPublishedContent and the UrlHelper. You can then use it in your template, wherever you need to add a base64 uri of your image like this:

<img src="@media.GetPlaceholderUri()"> or <img src="@Url.GetPlaceholderUri("~/path-to/image.jpg")">

Both extensions allow you to input a maxWidth and maxHeight parameters for controlling the size of your placeholder image. The default is max 4x4 pixels.

<img src="@media.GetPlaceholderUri(1,1)"> or <img src="@Url.GetPlaceholderUri("~/path-to/image.jpg",0,0)">

On the IPublishedContent extension, you can also specify a propertyAlias, if the image you need a placeholder for, is not contained in the umbracoFile property.

<img src="@media.GetPlaceholderUri(propertyAlias: "someProperty")">

 

How it works

The GetPlaceholderUri methods, loads the image referenced with ImageProcessor, then resizes it to your desired max width and height, and returns a base 64 uri of the image. The base64 uri, is then cached so you don't need to generate the image on every request.

 

Roadmap

  • Ability to handle crops, both Umbraco-defined, and developer defined crops using Umbracos Image Cropper editor.
  • Dashboard for creating and checking the cache status for all media.
Collaboration welcome
If you would like to join the development of this package, feel free to contact me, or fork the project on Github. I could especially need some help regarding a more smooth build process - thinking CI or something like that, and setting up a NuGet package.

 

Screenshots

Project owner

Søren Kottal

Søren Kottal

Søren has 1110 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.6.x (untested)
7.5.x (untested)
7.4.x (untested)
7.3.x (untested)
7.2.x (untested)
7.1.x (untested)
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: Søren Kottal
  • Created: 27/04/2017
  • Current version 0.1
  • .net Version 4.5.2
  • License MIT
  • Downloads: 49

External resources