README

构建自定义 <img> 标签的视图助手

此视图助手根据 <f:image> 计算图像，但不渲染图像标签，使数据可用于视图助手的内容中，以便手动使用或渲染自定义图像标签。渲染时考虑所有裁剪设置。

基本使用示例

<html xmlns:id="http://typo3.org/ns/B13/VhImagedata/ViewHelpers" data-namespace-typo3-fluid="true">

<id:imagedata src="{file.uid}" treatIdAsReference="1" width="300" as="imageData">
    <div class="b_lazyloading__background" style="padding-bottom: {1 / imageData.ratio}%;">
        <img src="transparent.gif" data-imageurl="{imageData.uri}" width="{imageData.width}" height="{imageData.height}" 
            class="b_lazyloading__image bJS_lazyloading" 
            alt="{imageData.alt}" title="{imageData.title}" />
    </div>
</id:imagedata>

</html>

允许的属性

以下属性可以传递给视图助手。所有通常允许传递给 f:image 的属性都可以传递，但并非所有都合理。

返回的数据

视图助手返回一个包含所有图像数据的数组，作为 {imageData} 或您在参数 as 中设置的变量名。数组包含以下值

安装

使用 Composer 将其添加到您的项目中

composer require b13/vh_imagedata

在您的 Fluid 模板中需要的地方设置视图助手的命名空间

<html xmlns:id="http://typo3.org/ns/B13/VhImagedata/ViewHelpers" data-namespace-typo3-fluid="true">

b13 / vh_imagedata

维护者

详细信息

README

构建自定义 <img> 标签的视图助手

基本使用示例

允许的属性

返回的数据

安装