我第一次尝试了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 partial并将内容更改为:
<f:image image="{file}" cropVariant="desktop" width="480" alt="{file.alternative}" title="{file.title}" />
我认为这足以显示裁剪的图像,但事实并非如此 . 我看到了原始文件 . 当我调试文件引用时,我看到,裁剪图像的配置正确存储在sys_file_reference中:
现在我不知道如何在前端获取裁剪后的图像 .
有任何想法吗?
编辑:现在我发现了问题,我遇到了ImageMagick的一些问题,因此无法创建裁剪的图像 .
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>
我希望能帮助你开始前端部分 .