README

此扩展是一个工具包，用于在流体模板中生成响应式图像（可选的懒加载和定义自定义动画的机会）。

目录

• 图像参考
• ViewHelpers 参考
  • ImgViewHelper
  • PictureViewHelper
  • SourceViewHelper
  • LazyViewHelper
  • 用户定义的动画
• 演示

图像参考

对于所有 view-helpers，需要一个 "image-reference"，以下列出了所有选项：

• fileReference:123: 从 sys_file_reference 的 id 123 获取的文件引用。
• r:123: fileReference:123 的缩写。
• file:234: id 为 234 的 sys_file 文件。
• f:234: file:234 的缩写。
• {fileObject}: \TYPO3\CMS\Extbase\Domain\Model\FileReference 的实例。
• {fileObject}: \TYPO3\CMS\Core\Resource\FileReference 的实例。
• {fileObject}: \TYPO3\CMS\Core\Resource\File 的实例。

或

• {fileObject}: \ByteCube\ImageTools\Image\ImageInterface 的实例。

ViewHelpers 参考

在所有示例中，将使用 xml 命名空间 it。命名空间取决于模板中 view-helper 的导入。

ImgViewHelper

示例

<it:img image="image-reference" width="1400" fallbackWidth="700" cropName="device1"/>

参数

进一步在 AbstractTagBasedViewHelper 的 initializeArguments 和 registerUniversalTagAttributes 方法中初始化的参数。

PictureViewHelper

示例

<it:picture image="image-reference" cropName="device2">
    <it:source width="1400" pixelDensities="1" cropName="device1" media="(min-width: 1400px)"/>
    <it:source width="1200" pixelDensities="1" media="(min-width: 1200px)"/>
    <it:source width="1000" pixelDensities="1" cropName="device3"/>
    <it:img width="700"/>
</it:picture>

参数

aspectRatio、cropName、pixelDensities 或 respectFocusArea 将应用于子 source 或 img view-helpers，如果子 view-helpers 中未定义这些属性。

进一步在 AbstractTagBasedViewHelper 的 initializeArguments 和 registerUniversalTagAttributes 方法中初始化的参数。

SourceViewHelper

示例

<it:picture image="image-reference" cropName="device2">
    ...
    <it:source width="1200" pixelDensities="1" media="(min-width: 1200px)"/>
    ...
</it:picture>

参数

进一步在 AbstractTagBasedViewHelper 的 initializeArguments 和 registerUniversalTagAttributes 方法中初始化的参数。

LazyViewHelper

只需将 img 或 picture view-helpers 用懒加载 view-helpers 包装即可。

示例

<it:lazy placeholder="{placeholder}" animation="{animation}">
    <it:img image="image-reference" width="1400" fallbackWidth="700" cropName="device1"/>
</it:lazy>

<it:lazy placeholder="{placeholder}" animation="{animation}">
    <it:picture image="image-reference" cropName="device2">
        ...
    </it:picture>
</it:lazy>

参数

进一步在 AbstractTagBasedViewHelper 的 initializeArguments 和 registerUniversalTagAttributes 方法中初始化的参数。

用户定义的动画

定义懒加载动画只需要使用CSS，共有3个步骤。

覆盖层的DOM对象是在覆盖过程开始前可见的图片。

原始DOM对象是在覆盖过程结束后可见的图片。

第1步

覆盖层和原始DOM对象的初始状态。

本步骤中placeholder的默认CSS规则为：opacity: 1

本步骤中original的默认CSS规则为：opacity: 0

第2步

为DOM对象的初始状态添加一些额外的CSS属性。

请注意！为了与大多数浏览器完全兼容，CSS过渡应该在第二步中定义。

第二步设置完成后，image-tools会检测所有定义的过渡中的最大延迟，以确定第3步何时结束。

第3步

此步骤是覆盖层和原始DOM对象的最终状态。

本步骤中placeholder的默认CSS规则为：opacity: 0

本步骤中original的默认CSS规则为：opacity: 1

示例

示例1

div.imt-ll[data-imt-ll-animation="overlay"] img.placeholder.step-2 {
  transition: opacity 400ms ease-in;
}

div.imt-ll[data-imt-ll-animation="overlay"] img.original.step-2 {
  transition: opacity 400ms ease-out;
}

示例2

div.imt-ll[data-imt-ll-animation="top-slide-overlay"] img.placeholder.step-2 {
  transition: opacity 400ms linear;
}

div.imt-ll[data-imt-ll-animation="top-slide-overlay"] img.original.step-1 {
  top: 40px;
}
div.imt-ll[data-imt-ll-animation="top-slide-overlay"] img.original.step-2 {
  transition: top 400ms linear, opacity 400ms linear;
}
div.imt-ll[data-imt-ll-animation="top-slide-overlay"] img.original.step-3 {
  top: 0;
}

演示

要查看功能演示，请启用演示后端模块。

TYPO3 V9: "管理工具" > "设置" > "扩展配置" > "image_tools" > 激活 "启用演示模块"。