README

"imgix" TYPO3 扩展提供了imgix的自动响应式图片功能，称为imgix.fluid()。这允许您向客户端交付完美定制的图片，而无需使用本地能力。有关更多详细信息，请参阅imgix、imgix.fluid()和JS库imgix.js。

此外，此扩展还提供了一些其他功能，例如

支持不同集成（jQuery和AngularJS）
禁用流体功能时的回退方案
观察异步添加的图片

缺失/即将推出功能

目前，此扩展仅限于您可以操纵图像输出方式的图像。原因在于img标签必须设置一个特定的类，并包含一个data-src属性，其中存储图像URL。在未来的版本中，我们将将其实现为TYPO3的标准渲染。
尚未支持imgix.js的第3版

下载/安装

composer require aoe/imgix

文档

激活扩展

一旦安装了"imgix"扩展，您必须在TYPO3的"扩展管理器"中激活该扩展。您可以通过使用TYPO3后端模块或使用命令行工具来完成此操作。

配置扩展

单击"配置"操作按钮以打开配置。您也可以通过单击扩展标题来完成此操作。

配置分为两部分："基本"和"imgix"

基本

基本配置包括扩展的特定设置，您需要在项目中设置这些设置。

basic.apiKey

这是您在imgix webapp中指定的apiKey。当您想要在imgix中清除图像时，必须配置API密钥。有关更多信息，请参阅imigx文档。

basic.host

这是您在imgix webapp中指定的作为项目源的主机。请注意，您必须在imgix中使用"Web文件夹"源。有关更多信息，请参阅imigx文档。

basic.enabled

如果basic.enabeld设置为false，则JS永远不会在浏览器中渲染。

basic.enableFluid

如果需要用配置的基本.host配置替换图像URL，请选中此配置。如果basic.enabeld设置为false，它将导致回退行为：所有图像URL都将按原样使用。这对于您想要通过简单的复选框禁用imgix的响应式图像而不会破坏或丢失图像非常有帮助。

basic.enableObservation

如果您的JavaScript动态/异步地添加图像，此设置将监视DOM中的这些更改，并将响应式图像功能添加到新的HTML图像标签中。启用此选项时要小心。此功能通过Mutation Observers实现，目前并非所有浏览器都支持。

imgix

imigx配置与imgix.js相关设置有关。有关选项的详细描述，请参阅文档。

imgix.defaultUrlParameters

如果某些URL API参数应该默认设置，请在此处列出它们作为GET参数字符串，例如q=75&fit=max

包含

要使用此扩展，您必须将静态模板文件添加到您的模板记录中。

"imgix: 常见常量 (imgix)"

现在您必须为支持的集成之一做出决定

AngularJS

对于AngularJS，您必须将这两个静态模板文件添加到您的模板记录中

imgix: 加载Angular Extbase插件以供进一步使用 (imgix)
imgix: 将Angular-Module文件包含在页面中 (imgix)

jQuery

对于jQuery，您必须将这两个静态模板文件添加到您的模板记录中

imgix: 加载Jquery Extbase插件以供进一步使用 (imgix)
imgix: 将Jquery插件文件包含在页面中 (imgix)

用法

AngularJS模块

添加模块依赖

angular.module('your-module', ['aoe.imgixify']);

使用"aoe-imgix"指令来处理图像

<img aoe-imgix class="imgix-fluid" data-src="fileadmin/my-fancy-image.jpg">

jQuery插件

要使用响应式图像，您必须将以下类和属性添加到您的HTML图像标签中

添加fluidClass中定义的"image-fluid"类
添加data-src属性。

<img class="imgix-fluid" data-src="fileadmin/my-fancy-image.jpg">

许可证

许可证：GPLv3或更高版本。请参阅LICENSE。

贡献

1. Fork the repository on Github
2. Create a named feature / bugfix branch (like `feature/add-something-new` or `bugfix/thing-which-does-not-work`)
3. Write your change
4. Write tests for your change (if applicable)
5. Run the tests, ensuring they all pass
6. Submit a Pull Request using Github

aoe / imgix

维护者

详情