visol/neos-responsiveimages

Neos package that helps implementing responsive images based on npm's lazyimages

Visol.Neos.ResponsiveImages

This Neos package helps using npm's lazysizes strategy to implement responsive images. See https://www.npmjs.com/package/lazysizes, _(*1)

Installation

To install the package correctly, go to your theme package (e.g. Packages/Sites/Visol.Site) and run the following command:, _(*2)

composer require visol/neos-responsiveimages --no-update, _(*3)

• Install lazysizes. E.g. with npm, _(*4)

  npm install lazysizes --save
  

• Add the JavaScript sources to your main script, _(*5)

  import 'lazysizes/plugins/parent-fit/ls.parent-fit.min';
  import 'lazysizes/plugins/bgset/ls.bgset.min';
  import 'lazysizes/lazysizes.min';
  

Quick Start

Just replace usages of the Neos.Fusion:Image prototype with Visol.Neos.ResponsiveImages:ImageTag. e.g., _(*6)

image = Visol.Neos.ResponsiveImages:ImageTag {
    asset = ${q(event).property('teaserImage')}
    ratio = 1.46
}

Or use the ViewHelper provided. e.g., _(*7)

{namespace responsiveImages=Visol\Neos\ResponsiveImages\ViewHelpers}

<responsiveImages:image image="{item.properties.sliderImage}" ratio="1.89583" />

Configuration

Adjust the desired image sizes in your Settings.yaml, _(*8)

Visol:
  Neos:
    ResponsiveImages:
      SizesPresets:
        Default:
          - 16
          - 48
          - 96
          - 160
          - 320
          - 480
          - 640
          - 960
          - 1024
          - 1440
          - 1920
          - 2560
          - 3840
          - 5120

Usage with background images

Use Visol.Neos.ResponsiveImages:SrcSet prototype to generate srcset-Attribute, _(*9)

imageUri = Visol.Neos.ResponsiveImages:SrcSet {
    asset = ${q(offer).property('image')}
    ratio = 0.91
}

Add class lazyload and data-attributes, _(*10)

<div class="lazyload" data-bgset={props.imageUri} data-sizes="auto">

Compatibility and Maintenance

This package is currently being maintained for the following versions:, _(*11)

Credits

https://www.npmjs.com/package/lazysizes, _(*12)

visol digitale Dienstleistungen GmbH, www.visol.ch, _(*13)