将其他源添加到图像以执行进一步操作

Question

im 尝试向 DCE 映像添加额外的源以进行进一步的操作，例如执行某些 JavaScript 操作的备用源。

所需的输出应如下所示：

<img src="path/to/foo.png" data-altsrc="path/to/bar.png">

问题是我正在使用的 dce - 它像这样遍历"图像"：

<f:for each="{dce:fal(field:'image', contentObject:contentObject)}" as="fileReference">
<f:image src="{fileReference.uid}" treatIdAsReference="1" />
</f:for>

因此，如果我在其中插入多个图像，那么我知道哪个是正常来源和哪个是备用源的图像之间没有真正的关系。

因此，可以创建一个部分并为图像添加两个字段，我们可以将其限制为每个字段一个图像。但是再次存在 for 循环，它不允许我访问第一个图像的第二个图像的源。

对于使用 dce 的用户来说，这些图像之间应该是可见的关系。

我试图实现这样的事情：

<f:for each="{field.images}" as="images">
<!-- want to achieve something like this -->
<f:image image="{images.foo.src}" data-altsrc="{images.bar.src}">
<!-- thats the normal way iterating through images -->
<f:for each="{images.foo}" as="image">
<f:image image="{image}" />
</f:for>
</f:for>

另一个想法是首先遍历备用图像并将它们存储到数组和主图像上以访问它们，但我不知道这是否可能，这也将限制 dce 对用户的可用性。

有没有办法用 dce 流体实现这一目标？

提前致谢

Answer 1

好吧，我想您可以扩展sys_file_reference表以从那里添加关系。所以你会有嵌套的关系(从来没有这样做过，所以你必须尝试(。

您还必须将字段添加到您需要的位置的 tca 类型中，这可能有点棘手。查看 TCA 类型覆盖。

您可以使用字段"alternative_reference"扩展sys_file_reference表，并添加必要的 TCA 设置。然后，您必须通过FileRepository检索FileReferences，并使用sys_file_reference作为外表(当然还有sys_file_reference uid作为标识符(。

FileRepository::findByRelation(
'sys_file_reference',
'alternative_reference',
$uidOfActualSysFileReferenceRecord
);

另一种可能性是具有 2 种不同sys_file_reference关系的全新记录。该记录(例如：tx_ext_domain_model_imageset(将具有image_default和image_alternate字段，两者都将配置为file_relations。那肯定行得通。

$defaultImages = FileRepository::findByRelation(
'tx_ext_domain_model_imageset',
'image_default',
$uidOfRecord
);
$alternativeImages = FileRepository::findByRelation(
'tx_ext_domain_model_imageset',
'image_alternative',
$uidOfRecord
);

我假设您确实具有有关创建记录，模型，tca等的知识。

我个人更喜欢第二种方式，它更干净，不会改变核心表结构。

还有第二个图像生成视图助手，可能更适合您的需求

<img src="{f:uri.image()}" data-altsrc="{f:uri.image()}" />

但最好的方法可能是为此目的编写自己的 ViewHelper。您可以将对象(ImageSet(作为参数传递并在那里处理所有逻辑。因此，您的模板将更简单，更易于阅读/处理。

Answer 2

您必须使用流体视图助手的数据属性，然后通过内联调用获取图像的 uri。以下是实现的方法：

<f:image src="{fileReference.uid}" data="{altsrc: '{f:uri.image(src: '{fileReference.uid}', treatIdAsReference: 1}" treatIdAsReference="1"/>

这应该可以完成工作。