README

简介

此模块允许发送一系列配置的图像大小到客户端，而无需实际加载任何资源，直到执行媒体查询。

这对于使用响应式设计的网站尤其有用，因为它意味着较小的视口可以接收针对其大小优化的图像，而不是下载针对桌面的单个图像。此模块高度可配置，并依赖于picturefill.js进行客户端魔法。

要求

SilverStripe 4.0或更高版本

有关与SS 3.x兼容的版本，请参阅分支1.0

安装

composer require heyday/silverstripe-responsive-images

如何使用

安装此模块后，您需要在其网站的yaml配置中配置命名图像大小集（例如mysite/_config/config.yml）。请注意，没有默认的图像集，但您可以将下面的配置复制以开始

---
After: 'silverstripe-responsive-images/*'
---
Heyday\ResponsiveImages\ResponsiveImageExtension:
  sets:
    ResponsiveSet1:
      css_classes: classname
      arguments:
        '(min-width: 1200px)': [800]
        '(min-width: 800px)': [400]
        '(min-width: 200px)': [100]

    ResponsiveSet2:
      method: CroppedImage
      arguments:
        '(min-width: 1000px) and (min-device-pixel-ratio: 2.0)': [1800, 1800]
        '(min-width: 1000px)': [900, 900]
        '(min-width: 800px) and (min-device-pixel-ratio: 2.0)': [1400, 1400]
        '(min-width: 800px)': [700, 700]
        '(min-width: 400px) and (min-device-pixel-ratio: 2.0)': [600, 600]
        '(min-width: 400px)': [300, 300]
      default_arguments: [1200, 1200]

    ResponsiveSet3:
      method: PaddedImage
      arguments:
        '(min-width: 800px)': [700, 700, '666666']
        '(min-width: 400px)': [300, 300, '666666']
      default_arguments: [1200, 1200, '666666']

现在，运行?flush=1以刷新配置清单，并将新方法注入到您的Image类中，您可以在模板中使用这些方法。

$MyImage.ResponsiveSet1
$MyImage.ResponsiveSet2
$MyImage.ResponsiveSet3

第一个方法（ResponsiveSet1）的输出将类似于以下内容，请记住，将采取第一个匹配的媒体查询

<picture>
        <source media="(min-width: 1200px)" srcset="/assets/Uploads/_resampled/SetWidth100-my-image.jpeg">

        <source media="(min-width: 800px)" srcset="/assets/Uploads/_resampled/SetWidth400-my-image.jpeg">

        <source media="(min-width: 200px)" srcset="/assets/Uploads/_resampled/SetWidth100-my-image.jpeg">

    <img src="/assets/Uploads/_resampled/SetWidth640480-my-image.jpeg" alt="my-image.jpeg">
</picture>

最终输出到浏览器将正确地将图像URL放入一个span标签中，并且只有一个图像会渲染。当窗口大小改变时，新的图像将被加载到DOM中。

其他选项

每个集应设置一个“default_arguments”属性，以防浏览器不支持媒体查询。默认情况下，“default_arguments”属性会产生一个800x600的图像，但这可以在配置中覆盖。

Heyday\ResponsiveImages\ResponsiveImageExtension:
  default_arguments: [1200, 768]

您也可以在模板级别传递默认图像的参数。

$MyImage.MyResponsiveSet(900, 600)

默认的重采样方法是SetWidth，但这可以在您的配置中覆盖。

Heyday\ResponsiveImages\ResponsiveImageExtension:
  default_method: CroppedImage

它也可以传递到您的模板函数中。

$MyImage.MyResponsiveSet('CroppedImage', 800, 600)