tt_content 图像的裁剪变体答案

【问题标题】：Crop variants for tt_content imagett_content 图像的裁剪变体
【发布时间】：2018-12-07 05:57:54
【问题描述】：

我第一次尝试 TYPO3 中的新图像处理功能并偶然发现了一些问题。我正在使用 TYPO3 8.7.16。图像处理工作正常（在使用 ImageMagick 的安装工具中测试）。

出于测试目的，我覆盖了 tt_content 的 TCA：

$GLOBALS['TCA']['tt_content']['columns']['image']['config'] ['overrideChildTca']['columns']['crop'] = [
    'config' => [
        'cropVariants' => [
            'desktop' => [
                'title' => 'Desktop',
                'selectedRatio' => '4:3',
                'allowedAspectRatios' => [
                    '4:3' => [
                        'title' => '4:3',
                        'value' => 4 / 3,
                    ],
                ],
            ],
            'tablet' => [
                'title' => 'Tablet',
                'selectedRatio' => '16:9',
                'allowedAspectRatios' => [
                    '16:9' => [
                        'title' => '16:9',
                        'value' => 16 / 9,
                    ],
                ],
            ],
            'mobile' => [
                'title' => 'Mobile',
                'selectedRatio' => '2:3',
                'allowedAspectRatios' => [
                    '16:9' => [
                        'title' => '2:3',
                        'value' => 2 / 3,
                    ],
                ],
            ],
        ],
    ],
];

当我使用编辑器进行图像处理时，我可以裁剪不同的格式，在接受处理后，我会在内容元素中看到裁剪后的图像作为预览：

保存内容元素后，我看到以下内容（裁剪后的图像不再显示）：

这是一个错误吗？但这并没有给我带来太多困扰。

现在我尝试展示例如前端裁剪的桌面图像。我复制了 Media/Rendering/Image.html 部分并将内容更改为：

<f:image image="{file}" cropVariant="desktop" width="480" alt="{file.alternative}" title="{file.title}" />

我认为这足以显示裁剪后的图像，但事实并非如此。我看到了原始文件。当我调试我看到的文件引用时，裁剪图像的配置正确存储在 sys_file_reference 中：

现在我不知道如何在前端获取裁剪的图像。

有什么想法吗？

编辑：现在我发现了问题，我在使用 ImageMagick 时遇到了一些问题，因此无法创建裁剪的图像。

【问题讨论】：

标签： typo3 typo3-8.x

【解决方案1】：

我建议您查看来自 Clickstorm 的文章 Clickstorm CropVariant Images

您可以使用 srcset 轻松访问cropVariants。

<f:if condition="{files}"> <f:image src="{image.id}" treadIdAsReference="1" srcset="{f:uri.image(image:image.id,width:'2500',height:'816',cropVariant:'desktop')}" alt="{files.0.alternative}" /> </f:if>

也许你像这样使用图片元素： <picture> <source media="(min-width: 1400px)" srcset="{f:uri.image(src:'{image.uid}',treatIdAsReference:'1',width:'1400',cropVariant:'default')}"> <source media="(max-width: 1399px) and (min-width:1025px)" srcset="{f:uri.image(src:'{image.uid}',treatIdAsReference:'1',cropVariant:'default-md')}"> <source media="(max-width: 1024px) and (orientation:portrait)" srcset="{f:uri.image(src:'{image.uid}',treatIdAsReference:'1',width:'768',cropVariant:'tablet-portrait')}"> <source media="(max-width: 1024px) and (orientation:landscape)" srcset="{f:uri.image(src:'{image.uid}',treatIdAsReference:'1',width:'768',cropVariant:'tablet-landscape')}"> <source media="(max-width: 667px) and (orientation:portrait)" srcset="{f:uri.image(src:'{image.uid}',treatIdAsReference:'1',width:'667',cropVariant:'smartphone-portrait')}"> <source media="(max-width: 667px) and (orientation:landscape)" srcset="{f:uri.image(src:'{image.uid}',treatIdAsReference:'1',width:'667',cropVariant:'smartphone-landscape')}"> <img src="{f:uri.image(crop: image.crop, src: image.id, cropVariant:'default')}"title="{image.title}" alt="{image.alternative}" /> </picture>

希望对您开始前端部分有所帮助。

【讨论】：