collective.lazysizes 1.4.0a1

Integration of lazysizes, a lightweight lazy loader, into Plone.

Table of Contents

• Life, the Universe, and Everything

• Mostly Harmless

• Don’t Panic

  • Installation

  • How does it work

  • Todo

• Share and Enjoy

• Changelog

  • 1.4.0a1 (2016-02-23)

  • 1.0a1 (2016-01-05)

Life, the Universe, and Everything

This package integrates lazysizes, a lightweight lazy loader, into Plone.

lazysizes is a fast, SEO-friendly and self-initializing lazyloader for images (including responsive images picture/srcset), iframes, scripts/widgets and much more. It also prioritizes resources by differentiating between crucial in view and near view elements to make perceived performance even faster.

Mostly Harmless

Got an idea? Found a bug? Let us know by opening a support ticket.

Don’t Panic

Installation

To enable this package in a buildout-based installation:

1. Edit your buildout.cfg and add add the following to it:

   [buildout]
   ...
   eggs =
       collective.lazysizes

After updating the configuration you need to run ‘’bin/buildout’’, which will take care of updating your system.

Go to the ‘Site Setup’ page in a Plone site and click on the ‘Add-ons’ link.

Check the box next to collective.lazysizes and click the ‘Activate’ button.

Note

You may have to empty your browser cache and save your resource registries in order to see the effects of the product installation.

How does it work

This package adds a transform to the transform chain to integrate lazysizes into Plone.

The transform looks for all the <img> and <iframe> elements inside the content and does the following:

• appends a lazyload class

• transforms the src attribute into a data-src attribute

• if the element is an <img>, uses an spinner as src attribute (this is done to maintain valid HTML code)

The transform is only applied to anonymous users.

Todo

• implement support for responsive images with srcset and automatic sizes attribute

• replace spinner with low resolution image scale (if not to expensive to calculate)

• allow blacklisting images (lazing loading feature could be duplicated on some carousels)

Share and Enjoy

collective.lazysizes would not have been possible without the contribution of the following people:

• Héctor Velarde

• Alexander Farkas (lazysizes)

You can find an updated list of package contributors on GitHub.

Development sponsored by Simples Consultoria.

Changelog

1.4.0a1 (2016-02-23)

• Add option to list class identifiers that will not be processed for lazy loading. <img> and <iframe> elements with that class directly applied to them, or to a parent element, will be skiped (closes #5). [rodfersou, hvelarde]

• Update lazysizes and respimg polyfill extension to v1.4.0. [hvelarde]

• Use a blank image instead of a spinner as placeholder. [hvelarde]

• Logging now uses debug level instead of info. [hvelarde]

1.0a1 (2016-01-05)

• Initial release.