TYPO3 imageManipulation focusArea in Frontend

TYPO3 imageManipulation focusArea in Frontend

有谁知道如何在前端使用TYPO3焦点区域? TCA imageManipulation

如果我在流体模板中使用裁剪属性

<f:image width="555c" height="312c" src="{article.teaserFile.uid}" treatIdAsReference="1" crop="{article.teaserFile.originalResource.referenceProperties.crop}" />

我在数据焦点区域得到一个序列化的字符串。

<img data-focus-area="{&quot;x&quot;:786.1145320197,&quot;y&quot;:96.682142857143,&quot;width&quot;:271.44177339901,&quot;height&quot;:270.05062857143}" src="/fileadmin/_processed_/9/b/csm_testimage_0bfc7bc724.jpg" width="657" height="566" alt="" title="Testimage">

数据是否需要JS库使用?有人可以在这里推荐图书馆吗?因为我没有找到可以处理焦点区域和属性数据焦点区域的库的推荐。

或者我是否必须编写一个 viewhelper 来提供属性,例如对于 "jQuery focuspoint" 到 data-focus-x、data-focus-y、data-image-w 和 data-image-h。

不,您不需要重写 ViewHelpers。 (如果将来它的可扩展性比现在好一点就好了。)

但您可以实施 jQuery 焦点。您唯一需要做的是,在启动 focuspoint 插件之前,您可以使用 jquery 将此数组转换为所需的值。

来自 FocusPoint documentation

的示例
$('.focuspoint').focusPoint();

所以在这一行之前,您可以简单地将数组中的值添加为自己的数据属性。

形式不同,逻辑相同。所以你在焦点区域数组中有 x、y、宽度和高度值。

例如,这不适用于 responsify.js。它需要底部、顶部、左侧、右侧值。

所以是的...开箱即用。

但是NO,你不需要改PHP部分,因为你可以在前端解决。 (无论如何你都需要 jQuery 插件,所以在使用它之前编写一些代码会更容易。)

改变那些 ViewHelpers 当然也是可能的,但是你真的需要重写它们的功能(还有 renderImage 函数是具体的)并且如果你想将它更新为更高版本可能会导致问题。