README

本项目旨在提供一种图像渲染过程，该过程将渲染具有流体效果的响应式图片，前提假设TYPO3 CMS不提供原生的流体模板机制，而可以使用TypoScript实现。

• 安装
• 配置
  • 模式 srcset
    • 配置示例
• 用法
• 内部工作原理
• 扩展 fluid_styled_responsive_images
• 许可证

安装

• 使用composer通过当前稳定版本安装，并跟踪新稳定版本：composer require schnitzler/fluid-styled-responsive-images:"^10.2"，然后通过扩展管理器/您首选的机制启用扩展
• 通过在您的composer.json文件中运行composer require schnitzler/fluid-styled-responsive-images:"dev-master"使用当前开发版本，然后运行composer update
• 将当前开发版本克隆到您的typo3conf/ext目录中（例如，cd typo3conf/ext && rm -Rf fluid_styled_responsive_images && git clone https://github.com/alexanderschnitzler/fluid-styled-responsive-images.git fluid_styled_responsive_images）

配置

此扩展通过TypoScript进行配置，就像您的网站的大部分内容一样。包含扩展的静态TypoScript，然后通过您的TypoScript设置开始配置。

ImageRenderer当前支持srcset（srcset规范）和作为data-属性的渲染，这使得使用javascript进行自定义渲染更容易。

最小，空的配置

tt_content.textmedia.settings.responsive_image_rendering {
    layoutKey = srcset

    sourceCollection {
        # Please write your own sourceCollection configuration
    }
}

模式 srcset

sourceCollection条目是一个TypoScript哈希表。它可以包含以下索引

对于更精确的描述，请参阅html img元素srcset规范。

配置示例

tt_content.textmedia {
    settings {
        responsive_image_rendering {
            layoutKey = srcset

            sourceCollection {
                10 {
                    dataKey = desktop
                    width = 1260m
                    srcset = 1260w
                }

                20 {
                    dataKey = table
                    width = 960m
                    srcset = 960w
                }

                30 {
                    dataKey = tablet-small
                    width = 720m
                    srcset = 720w
                }

                40 {
                    dataKey = medium
                    width = 640m
                    srcset = 640w
                }

                50 {
                    dataKey = medium-phone
                    width = 360m
                    srcset = 360w
                }

                60 {
                    dataKey = small
                    width = 320m
                    srcset = 320w
                }
            }
        }
    }
}

用法

安装和配置后，<f:media>视图辅助对象的输出使用此扩展提供的图像逻辑进行渲染。

内部工作原理

1. 注册了自定义的图像渲染器
2. 当请求适合当前MIME类型的渲染器时，如果匹配到已知的图像MIME类型之一，则渲染器会自行提出
3. 渲染器读取当前TypoScript并将其与全局扩展配置（如enableSmallDefaultImage设置）合并
4. 然后渲染器计算所需的大小并返回一个现成的img-标签

扩展 fluid_styled_responsive_images

由于使用了fluid_styled_content，TYPO3 CMS中的许多输出都可以进行调整。

注册自定义模板并调整图像的示例，与fluid_styled_content中的GalleryProcessor协作以提供基于Bootstrap 3的模板的精确渲染：[websightgmbh/ws-texmedia-bootstrap](https://github.com/websightgmbh/typo3-ws_textmedia_bootstrap)。

许可证

GPL-2.0+