visol/neos-responsiveimages

Letzte Aktivität 29 Apr 2023 5 1 3676
composer require visol/neos-responsiveimages

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

2.2.0

Version
2.2.0
Type
neos-package
Release Date
Apr 29, 2023 09:14
Source
git
Distribution
zip
Requires
  • neos/fusion: ~5.0 || ~7.0 || ~8.0 || ~9.0 || dev-master
MIT 117ee041eb8142d0d076c3ba665149b22278cc5e

Visol.Neos.ResponsiveImages

This Neos package helps using npm's lazysizes strategy to implement responsive images. See https://www.npmjs.com/package/lazysizes

Installation

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

composer require visol/neos-responsiveimages --no-update
  • Install lazysizes. E.g. with npm

    npm install lazysizes --save
    
  • Add the JavaScript sources to your main script

    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.

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

Or use the ViewHelper provided. e.g.

{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

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

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

Add class lazyload and data-attributes

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

Credits

https://www.npmjs.com/package/lazysizes

visol digitale Dienstleistungen GmbH, www.visol.ch

The content of the readme is provided by Github
The same vendor provides 6 package(s).