纵横比为1:1的裁剪变体不使用流体视图生成方形图像

时间:2017-07-04 11:38:23

标签: typo3 fluid typo3-8.x

我定义了两种作物变种“默认”和“同位素”。 “默认”包含一些基本的方面配给,如1:1,3:4,16:9等。 “同位素”变体仅包含一个纵横比1:1,其也被定义为默认值(selectedRatio = 1:1)。在我的例子中,这个定义是由PageTS完成的,如下所示:

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中的标准图像浏览器在流体模板中使用此裁剪变量时,我没有得到正确的输出。

此:

<f:image image="{image}" cropVariant="isotope" maxWidth="400" />

不会生成正方形图像,这是我期望的。

如果来源图片的宽高比为4:3,如果来源图片的宽高比为3:4,我会得到平压矩形,我得到了天空刮板。

我还尝试了每个可能的最小/最大/宽度/高度属性组合,有/无额外的&#34; c&#34;,没有运气。 有时,4:3 图像的结果看起来更好,有时对于3:4图像。 但我找不到一个解决方案来获得所有宽高比

的方形(裁剪)图像

[编辑04.07.2017]

进一步的实验显示了不同类型的源图像格式的不同行为。 如果图像是jpgs,我必须设置width =&#34; 400c&#34;和身高=&#34; 400c&#34;得到方形图像。如果源图像是png,则简单的maxWidth =&#34; 400&#34;与cropVariant =&#34;同位素&#34;做好这份工作。 Gif-Images似乎遵循自己的法律,我还没有看过。

[编辑08.07.2017]

我目前的经验,在构建extension to test hundred of possible combinations之后:gif裁剪目前无法按预期工作。 更糟糕的是,生成的gif图像在不同的浏览器中以不同的方式显示。 一个例子是这个生成的图像: View this image in FF, Chrome, Safari to see the different

0 个答案:

没有答案