Question

我正在尝试向dce-image添加其他来源以进行进一步操作，例如执行某些JavaScript操作的替代源。

想要的输出应该如下所示：

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

问题在于我正在使用它 - 它遍历＆＃34;图像＆＃34;像这样：

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

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

因此，有可能创建一个部分并为图像添加两个字段，我们可以将其限制为每个字段一个图像。但是，for-loop又不允许我访问第一张图像的第二张图像的来源。

对于使用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

您必须使用流体viewhelper的数据属性，然后使用内联调用获取图像的uri。以下是如何实现：

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

这应该做的工作。

Answer 2

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

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

您可以使用字段＆＃34; alternative_reference＆＃34;扩展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。您可以将Object（ImageSet）作为参数传递并处理其中的所有逻辑。因此，您的模板将更简单，更易于阅读/工作。

向Image添加其他来源以获取进一步的操作

2 个答案: