README

本 Neos 包帮助使用 npm 的 lazysizes 策略来实现响应式图片。请参阅 https://npmjs.net.cn/package/lazysizes

安装

要正确安装包，请访问您的主题包（例如 Packages/Sites/Visol.Site）并运行以下命令

composer require visol/neos-responsiveimages --no-update

• 安装 lazysizes。例如，使用 npm

  npm install lazysizes --save
  

• 将 JavaScript 源代码添加到您的主脚本中

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

快速开始

只需将 Neos.Fusion:Image 原型替换为 Visol.Neos.ResponsiveImages:ImageTag。例如：

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

或者使用提供的 ViewHelper。例如：

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

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

配置

调整您的 Settings.yaml 中的所需图片大小

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

与背景图片一起使用

使用 Visol.Neos.ResponsiveImages:SrcSet 原型生成 srcset 属性

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

添加类 lazyload 和数据属性

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

兼容性和维护

此包目前正在维护以下版本

鸣谢

https://npmjs.net.cn/package/lazysizes

visol digitale Dienstleistungen GmbH，www.visol.ch