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:
      template: Includes/MyCustomImageTemplate
      method: Fill
      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: Pad
      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: Fill

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

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