[英]TYPO3 DCE (Fluid): How to generate an SVG Object instead of an image tag?
Our TYPO3 users (editors) need to exchange / update SVG files to the TYPO3 website. 我们的TYPO3用户(编辑)需要将SVG文件交换/更新到TYPO3网站。 The svg files are clickable, hence the <img>
html tag does not work for them. svg文件是可单击的,因此<img>
html标记不适用于它们。 We decided in favour of the <object>
tag, with <img>
fallback ( Do I use <img>, <object>, or <embed> for SVG files? ). 我们决定支持<object>
标签,并使用<img>
后备( 我是否对SVG文件使用<img>,<object>或<embed>? )。
The Fluid code for the fronted is easy for generating normal img tags: 前面的Fluid代码很容易生成普通的img标签:
<f:layout name="Default" />
<f:section name="main">
<div class="container">
<f:for each="{dce:fal(field:'image1', contentObject:contentObject)}" as="fileReference" iteration="iterator">
<f:if condition="{iterator.isFirst}">
<f:image src="{fileReference.uid}" alt="" treatIdAsReference="1" />
</f:if>
</f:for>
</div>
</f:section>
However, according to FluidTYPO3 vhs ViewHelper for SVG Images? 但是,根据FluidTYPO3 vhs ViewHelper for SVG Images? , I might be able to use fluid code like this: ,我也许可以使用如下代码:
<img src="{f:uri.image(src: 'uploads/tx_myext/{imgIcon}')}">
which, adapted to object, would be: 根据对象进行调整的是:
<object data="{f:uri.image(src: 'xxx')}" type="image/svg+xml">
<img src="{f:uri.image(src: 'xxx')}">
</object>
Unfortunately, I have no idea what to provide as src. 不幸的是,我不知道作为src提供什么。 {fileReference.uid}
only inserts the unique id of the file (a number). {fileReference.uid}
仅插入文件的唯一ID(数字)。
How can I convert the file id to the relative or absolute URI of the picture? 如何将文件ID转换为图片的相对或绝对URI?
I think the viewhelper attribute treatIdAsReference is what you are looking for. 我认为您正在寻找viewhelper属性TreatIdAsReference 。 f:image as well as f:uri:image can handle Files and FileReferences. f:image以及f:uri:image都可以处理File和FileReferences。
It looks like you have a FileReference, so you should add the attribute with value 1 Here is an example with inline notation: 看起来您具有FileReference,因此应添加值为1的属性。这是一个带有内联符号的示例:
{f:uri.image(src: '{fileReference.uid}', treatIdAsReference:'1')}
The result of this is the path to your file, it can be used in regular HTML-Tags. 结果是文件的路径,可以在常规HTML标记中使用它。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.