b13/picture

改进的TYPO3图像ViewHelper，支持尺寸、源、额外的图像格式等。

维护者

详细信息

github.com/b13/picture

源代码

问题

安装: 120,760

依赖项: 1

建议者: 0

安全: 0

星标: 18

关注者: 13

分支: 6

开放问题: 1

类型:typo3-cms-extension

3.0.0 2024-08-02 18:21 UTC

Requires

Requires (Dev)

GPL-2.0-or-later bc97ae55dad26ad536bacb2a2ced48f9df2acbd1

This package is auto-updated.

Last update: 2024-09-13 15:49:45 UTC

README

CI

b13图像ViewHelper

它做什么

b13图像ViewHelper是常规Fluid图像ViewHelper的一个巨大扩展。基本上，它处理图像并根据指定的配置渲染单个src元素或picture元素。

安装

使用composer安装扩展: composer req b13/picture。

在主模板中包含TypoScript

@import 'EXT:picture/Configuration/TypoScript/setup.typoscript'

使用Fluid命名空间 B13\Picture

使用配置适当的Fluid模板，在使用此ViewHelper时添加命名空间

<html
  xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers"
  xmlns:i="http://typo3.org/ns/B13/Picture/ViewHelpers"
  data-namespace-typo3-fluid="true"
>

TypoScript设置

有关可能的配置选项（键: plugin.tx_picture），请参阅 EXT:picture/Configuration/TypoScript/setup.typoscript

属性

全部来自f:image

我们的图像ViewHelper模仿了Fluid Image ViewHelper，因此它具有所有相同的属性，包括

  • width 和 height，包括 c 选项用于裁剪缩放
  • maxWidth 用于等比例缩放，不放大
  • fileExtension 用于设置文件扩展名（例如强制使用webp）
  • alt 和 title
  • cropVariant
  • loading 用于启用默认的浏览器原生懒加载 browser native lazy loading by default。

useRetina

如果设置了useRetina且在TypoScript设置中没有进一步指定，则相应的img标签或source标签的srcset属性将扩展为图像的2x视网膜版本。

addWebp

添加Webp格式的额外图像渲染。如果没有指定给定的源属性，它将渲染一个picture标签而不是单个img标签，以保持浏览器回退。如果与sources一起指定，它将在给定的sources元素渲染的任何source标签之上添加一个额外的source标签。如果启用了onlyWebp选项，则忽略此属性。

onlyWebp

仅启用webp格式的图像和所有尺寸变体。启用此选项将禁用addWebp设置。

lossless

为webp图像启用无损压缩。如果您发现webp图像与jpg/png图像相比质量不足，请启用此选项以覆盖ImageMagick/GraphicsMagick的默认设置。

变体和尺寸

添加具有不同图像尺寸的图像的多个变体，可选地添加sizes-attribute到图像标签

variants="400, 600, 800, 1000" sizes="(min-width: 600px) 400px, 100vw"

这也可以是下面的sources数组的一部分（见下文）。

sources

源必须表示为数组。对于每个元素，将渲染一个源标签。它接受与fluid image view helper相同的属性。源标签的渲染顺序与数组中指定的顺序相同。如果您未指定额外的TypoScript设置，则可以使用任何键。

sources="{
    0: {
        width: '300c', height: '300c', media: 'min-width: 1000px', cropVariant: 'desktop', variants: '400, 600, 800', sizes: '100vw'
    },
    1: {
        width: '250c', height: '250c', media: 'min-width: 600px', src: alternativefile.uid, treatIdAsReference: 1
    },
    2: {
        width: '200c', height: '200c', media: 'min-width: 300px', cropVariant: 'teaser'
    }
}"

pictureClass

添加用于picture元素的CSS类（如果使用<picture>渲染）。

TypoScript设置

通常

以下属性也可以在TypoScript中作为您整个站点的默认值设置： addWebp，useRetina。默认设置可以通过设置相应的属性来覆盖每个ViewHelper的使用。

retina

retina选项可以扩展useRetina属性的默认行为。如果设置了retina，则需要指定一个数组，其中以图像尺寸的倍数为键，并将倍数值输出到相应的标签。

retina {
    2 = 2x
    3 = 3x
}

断点

使用breakpoints数组，您可以通过在Fluid模板中使用键来使用这些设置（而不是为sources数组中的每个键添加媒体查询）。它只是添加了一个最小宽度为min-width的媒体查询。

breakpoints {
    sm = 640
    md = 1024
    lg = 1280
}

测试渲染以演示目的

您可以在测试实例前端中查看ViewHelper的测试配置

@import 'EXT:picture/Configuration/TypoScript/test.typoscript'

此配置启用测试文件的客户端渲染，使用页面类型1573387706874展示了许多不同的渲染示例。

https://your.local.test.environment/?type=1573387706874

将渲染一个页面，展示不同选项的代码示例。这是为了演示和测试目的，不适用于您的生产环境。

致谢

此扩展由Andreas Hämmerl和David Steeb于2019年为Stuttgart的b13 GmbH创建。

查看我们开发的更多TYPO3扩展，这些扩展有助于我们在客户项目中提供价值。作为我们的工作方式的一部分，我们专注于测试和最佳实践，确保我们所有代码的长期性能、可靠性和结果。