README

为 Silverstripe 图片生成易于使用的 <picture> 元素。

安装

composer require kinglozzer/silverstripe-picture

使用

配置通过 YAML 执行

Kinglozzer\SilverstripePicture\Picture:
  styles:
    Carousel:
      default:
        - {method: 'Fill', arguments: [375, 250]}
        - {method: 'Fill', arguments: [750, 500], descriptor: 750w}
      sources:
        "(min-width: 1024px)":
          - {method: 'Fill', arguments: [1024, 450]}
          - {method: 'Fill', arguments: [2048, 900], descriptor: 2x}

然后可以从模板中调用每个样式

<div class="carousel__slide">
    {$Image.Carousel}
</div>

生成的 HTML 将如下所示

<picture>
    <source media="(min-width: 1024px)" srcset="/assets/image__FillWzEwMjQsNDUwXQ.jpg, /assets/image__FillWzIwNDgsOTAwXQ.jpg 2x" type="image/jpeg" />
    <img width="375" height="250" alt="image" src="/assets/image__FillWzM3NSwyNTBd.jpg" loading="lazy" srcset="/assets/image__FillWzM3NSwyNTBd.jpg, /assets/image__FillWzc1MCw1MDBd.jpg 750w" />
</picture>

完整示例

每个源（以及“默认”图片）包含一个或多个 srcset 图片候选，每个候选包含一个或多个操作和一个可选的描述符（例如 2x，300w）。

Kinglozzer\SilverstripePicture\Picture:
  styles:
    Carousel:
      # The default <img /> that’s rendered if none of the <source> medias are matched
      default:
        # A list of image candidates to be output in the srcset attribute on the <img /> tag
        - {method: 'Fill', arguments: [200, 150]} # The first candidate will also be used as the <img /> "src"
        - {method: 'Fill', arguments: [400, 300], descriptor: 400w}
      # A list representing the <source> tags
      sources:
        "(min-width: 1128px)": # The "media" attribute for the source
          # A list of srcset image candidates
          - {method: 'Fill', arguments: [1024, 450]}
          - {method: 'Fill', arguments: [2048, 900], descriptor: 2x}
        "(min-width: 768px)":
          # If required, each srcset candidate can perform multiple manipulations
          -
            manipulations:
              - {method: 'ScaleWidth', arguments: [50]}
              - {method: 'Pad', arguments: [50, 100, 'FFFFFF']}
          -
            manipulations:
              - {method: 'ScaleWidth', arguments: [100]}
              - {method: 'Pad', arguments: [100, 200, 'FFFFFF']}
            descriptor: 2x