Question

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

如果我在fluid-template

中使用crop属性

<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。

Answer 1

不，您不需要重写ViewHelpers。（如果将来它可以更好地扩展，那将会很好。）

但是你可以实现jQuery Focuspoint。您需要做的唯一事情是，在启动focuspoint插件之前，您可以使用jquery将此数组转换为所需的值。

来自FocusPoint documentation

的例子

$('.focuspoint').focusPoint();

因此，在此行之前，您只需将数组中的值作为自己的数据属性添加即可。

形式不同，但逻辑是一样的。因此，您在焦点区域数组中具有x，y，width和height值。

例如，这不适用于responsify.js。它需要bottom，top，left，right值。

所以是的......它无法开箱即用。

但是没有，您不需要更改PHP部分，因为您可以在前端解决它。（无论如何你需要jQuery插件，所以在使用它之前制作一些代码会更容易。）

当然也可以改变那些ViewHelpers，但是你真的需要重写它们的功能（也就是具体的 renderImage 功能），如果你想将它更新到更高版本，它可以导致问题。

TYPO3 imageManipulation focusArea in Frontend

1 个答案: