otago/silverstripe-retinaimages

An add-on for adaptive images.

Installs: 3 394

Dependents: 0

Suggesters: 0

Security: 0

Stars: 5

Watchers: 4

Forks: 4

Open Issues: 1

Type:silverstripe-vendormodule

v4.0.2 2019-03-19 21:57 UTC

This package is auto-updated.

Last update: 2021-05-16 03:24:21 UTC


README

An add-on for adaptive images

Allows support for high-resolution displays by automatically creating different assets representing the same image. It specifies bitmapped images by adding a srcset attribute to the img element, as specified by the W3C draft http://www.w3.org/html/wg/drafts/srcset/w3c-srcset/

It does it out the box on through the template, WYSIWYG requires a modification to your getCMSFields() method.

Older browsers require a polyfill. All modern browsers support the tag

Usage

  • run composer require otago/silverstripe-retinaimages
  • run ?flush=1 on your page
  • done! time for a beer

How it works

When creating a generated image it creates three different images, scaled up to the following factors: 1.0x, 1.5x, and 2.0x. The default generated image is also created, which is used as the src attribute. These image urls are then placed into the srcset tag.

srcset Polyfills

https://github.com/borismus/srcset-polyfill/ https://github.com/culshaw/srcset http://jimbobsquarepants.github.io/srcset-polyfill/