-1

有谁知道如何在前端使用 TYPO3 焦点区域？ TCA 图像操作

如果我在流体模板中使用作物属性

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

4

1 回答 1

1

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

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

FocusPoint 文档中的示例

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

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

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

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

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

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

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

于 2018-01-26T14:08:44.063 回答