TYPO3 图像在前端操作焦点区域答案

【问题标题】：TYPO3 imageManipulation focusArea in FrontendTYPO3 图像在前端操作焦点区域
【发布时间】：2018-01-19 15:10:29
【问题描述】：

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

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

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

我在 data-focus-area 中得到一个序列化的字符串。

<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 焦点”用于 data-focus-x、data-focus-y、data-image-w 和 data-image-h。

【问题讨论】：

标签： frontend responsive-images typo3-8.x fal

【解决方案1】：

不，您不需要重写 ViewHelpers。（如果将来它可以比现在更好地扩展，那就太好了。）

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

来自FocusPoint documentation的示例

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

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

形式不同，但逻辑是一样的。所以你在焦点区域数组中有 x、y、宽度和高度值。

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

所以是的......它不会开箱即用。

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

当然也可以更改这些 ViewHelper，但您确实需要重写它们的功能（具体来说还需要 renderImage 函数），如果您想将其更新到更高版本，则可以导致问题。

【讨论】：