Typo3 纵横比为1:1的裁剪变量不使用流体viewhelper生成方形图像
我定义了两种作物变体“默认”和“同位素”。“default”包含一些基本方面的比例,如1:1、3:4、16:9等等。“同位素”变体仅包含一个高宽比1:1,也被定义为默认的selectedRatio=1:1。在我的例子中,这个定义是由PageTS完成的,它看起来像这样:Typo3 纵横比为1:1的裁剪变量不使用流体viewhelper生成方形图像,typo3,fluid,typo3-8.x,Typo3,Fluid,Typo3 8.x,我定义了两种作物变体“默认”和“同位素”。“default”包含一些基本方面的比例,如1:1、3:4、16:9等等。“同位素”变体仅包含一个高宽比1:1,也被定义为默认的selectedRatio=1:1。在我的例子中,这个定义是由PageTS完成的,它看起来像这样: TCEFORM.sys_file_reference.crop.config.cropVariants { default { title = Default desktop selecte
TCEFORM.sys_file_reference.crop.config.cropVariants {
default {
title = Default desktop
selectedRatio = NaN
allowedAspectRatios {
NaN {
title = Frei
value = 0.0
}
1:1 {
title = 1:1
value = 1.0
}
3:2 {
title = 3:2
value = 1.5
}
2:3 {
title = 2:3
value = 0.6666666667
}
4:3 {
title = 4:3
value = 1.3333333333
}
3:4 {
title = 3:4
value = 0.75
}
16:9 {
title = 16:9
value = 1.7777777778
}
}
}
isotope {
title = Auswahl für Isotope Plugin
selectedRatio = 1:1
allowedAspectRatios {
1:1 {
title = 1:1
value = 1.0
}
}
}
}
添加这段代码后,变量会出现在所有可以定义文件引用的位置,例如在内部,例如新闻扩展名中的新闻记录
现在,在将图像添加到新闻记录并单击图像操作按钮后,我可以选择新定义的“同位素”裁剪变量,并选择所需的1:1方形裁剪区域。到目前为止还不错
我现在的问题是,当使用TYPO3中的标准图像viewhelper在流体模板中使用此裁剪变量时,我没有获得正确的输出
这:
不要生成我所期望的方形图像
如果源图像的纵横比为4:3,我得到的是平压矩形,如果源图像的纵横比为3:4,我得到的是天空刮刀
我还尝试了所有可能的最小/最大/宽度/高度属性组合,并没有添加/没有添加c,但没有成功。
有时,4:3源图像的效果更好,有时3:4图像的效果更好。
但我找不到一个解决方案来获得各种纵横比的方形裁剪图像
[编辑2017年7月4日]
进一步的实验表明,不同类型的源图像格式具有不同的行为。
如果图像是JPG,我必须设置宽度=400c和高度=400c才能得到方形图像。如果源图像是PNG,则简单的maxWidth=400和cropVariant=Sotox可以完成这项工作。Gif图像似乎有自己的规律,我还没有研究过
[2017年7月8日编辑]
根据我目前的经验,在构建了:gif裁剪之后,当前的效果并不像预期的那样。
更糟糕的是,生成的gif图像在不同的浏览器中显示不同。
生成的图像就是一个例子:
据我所知,代码中没有任何问题,您确定图像裁剪有效吗?检查安装工具中与映像相关的测试,以确保服务器可以处理映像操作。安装工具显示全部绿色,映像操作正常工作。图像已生成,但部分扭曲。您是否进入图像编辑器并使用新的裁剪变量保存了一次图像?我认为这对我来说是必要的。我在TYPO3 7.6中遇到了类似的问题,当在extbase模板中从fluid使用c参数时,它突然没有效果。图像正在被压缩,而不是被裁剪。我认为在安装工具中没有针对裁剪的测试。但是我在命令行上尝试了gm convert-size 100x100 source.jpg-crop 100x100 target.jpg,这应该是对cropscale的一个测试,它成功了。所以我在问自己,是否打字错误3突然被打破了?你在使用哪个库,im还是gm?不,我有语法错误。必须设置高度:“300c-35”而不是“高度:300c-35”。尽管如此,上面测试gm的命令可能会有所帮助
<f:image image="{image}" cropVariant="isotope" maxWidth="400" />