在流体模板中获取操纵图像（BE）

Question

有没有办法获取图像，编辑器通过 BE 进行操作（图像操作 -> 打开编辑器 -> 即裁剪或设置为 16:9...在 TYPO3 12 中带有 内容块（https: //extensions.typo3.org/extension/content_blocks）元素？

基本代码：

...
<f:for each="{data.slider_item}" as="slider_item" iteration="i">
    <div class="carousel-item {f:if(condition: i.isFirst, then: 'active')}" data-bs-interval="10000">
        <f:for each="{slider_item.image}" as="slider_item_image" iteration="i">
            <f:image image="{slider_item_image.originalFile}" loading="lazy" class="d-block w-66 h-auto"/>
        </f:for>
    </div>          
</f:for>
...                        
                                

在后端裁剪/调整图像大小时，仍然传递原始图像。我知道 slider_item_image.originalFile 总是输出原始文件，对吗？但我怎样才能获得参考呢？

有一篇较旧的帖子，主题与流体相同（没有内容块），但没有解决方案..如何在 Typo3 v8 中的流体模板中获取裁剪的图像尺寸

谢谢！

编辑器创建/裁剪/...的图像输出

Answer 1

到目前为止，我还没有使用过 内容块，但这就是访问裁剪图像的方式：

您的项目中可能需要一个 FileProcessor FileProcessor 的图像

要访问图像的裁剪版本，您必须查找将其存储在后端的特定字段中的路径。

例如。如果您为图像使用了 TextMedia 元素，则该字段（标签后面的红色括号中的字段）就是资产。

因此在您的模板中您必须使用资产字段。在propertiesOfFileReference中，您将找到流体所需的cropVariant的名称（使用

debug _all

查看您拥有哪些字段）。

使用 f:uri.image 标签访问您之前查找过的裁剪变体。 它应该看起来像这样：

<f:uri.image image="{assets.0}" absolute="1" cropVariant="mobile"></f:uri.image>

所以在本例中

mobile

是cropVariant的名称。

我想它也适用于 f:image 标签，这取决于你需要什么

cropVariants 的位置