visol/neos-responsiveimages

Last activity on 11 November 2019
  • 5
  • 1
  • 1396
composer require visol/neos-responsiveimages

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

1.0.0

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

Version
1.0.0
Type
neos-package
Release Date
21.11.2019 21:13:00
Source
git
Distribution
zip
Requires
Requires (dev)
None
Suggest
None
Provides
None
Conflicts
None
Replaces
None
MIT 6df12dcd752d9077451a5a84e0ea2a191be69c6e

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).