向图像添加其他源以进行进一步操作

Question

我正在尝试向 dce-image 添加一个额外的源以进行进一步的操作，例如执行某些 JavaScript 操作的备用来源。

所需的输出应如下所示：

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

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

<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-fluid 实现这个？

提前致谢

Answer 1

您必须使用 fluid viewhelper 的数据属性，然后通过内联调用获取图像的 uri。实现方法如下：

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

这应该可以完成工作。

Answer 2

好吧，我猜你可以扩展 sys_file_reference table 从那里添加一个关系。所以你会有嵌套关系（从来没有这样做过，所以你必须尝试）。

您还必须在需要的地方将该字段添加到 tca 类型，这可能有点棘手。看看 Tca types overrides.

您可以使用 "alternative_reference" 字段扩展 sys_file_reference table 并添加必要的 TCA 设置。然后你必须通过 FileRepository 检索 FileReferences 并使用 sys_file_reference 作为外部 table （当然还有 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 等的知识。

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

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

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

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

向图像添加其他源以进行进一步操作

Add additional source to Image for further actions

typo3

fluid

tx-dce