TYPO3 在流体中裁剪图像

Posted 2023-02-25

【中文标题】TYPO3 在流体中裁剪图像

【英文标题】：TYPO3 crop image in fluid

【发布时间】：2018-05-11 13:24:14

【问题描述】：

我在 BE 中裁剪了图像。以及如何在流体中显示裁剪后的图像？

我有农田：

crop => '"default":"cropArea":"height":0.24482758620689654,"width":0.4379310344827
         586,"x":0,"y":0.5586206896551724,"selectedRatio":"16:9","focusArea":null' (151 chars)

我试过流体：

<f:image image="file" crop="file.crop" class="main-img"/>

提前非常感谢！

【参考方案1】：

据我所知，如果您只使用默认的cropvariant，则不需要告诉 f:image ViewHelper 任何有关裁剪的信息。但是我在使用 Mittwald 托管网站时遇到了一些问题——GraphicsMagick 版本无法以某种方式裁剪（在其他 Mittwald 托管网站上，它使用相同的 GM 版本）。 所以我只是在前端裁剪有问题的网站上切换到 ImageMagick，然后它就起作用了。 如果 GM 和裁剪出现问题，默认的内容元素甚至不会在后端预览中显示裁剪的变体（文本和媒体元素）

【参考方案2】：

crop 属性用于手动裁剪图像。您正在寻找的是the cropVariant attribute。如果您自己没有添加任何裁剪变体，您很可能至少有 default 裁剪变体，因此您的 sn-p 应该如下所示：

<f:image image="file" cropVariant="default" class="main-img"/>

对于每个额外的裁剪变体，您添加另一个 <f:image/> 以呈现该裁剪变体的图像。

【讨论】：

据我所知，我必须制作自己的视图助手才能使用裁剪字段并显示具有该裁剪属性的图像？

您是要在<source> 或srcset 上使用它吗？我认为没有必要...例如，您可以像这样使用它f:uri.image(image:myimage,cropVariant:'default) 这仅返回图像的路径