Render image in fluid template if it exists?

落花浮王杯 提交于 2019-12-25 01:53:04

问题


How can I use f:ifto see if an image exists before trying to render it?

I have tried the following without success:

{f:if(condition: page.files.0, then: ' style="background-image:url({f:uri.image(image:page.files.0, width:300c, height:200c)}"')}

<f:if condition="{page.files.0}">
    style="background-image:url({f:uri.image(image:page.files.0, width:300c, height:200c)}"
</f:if>

It works if there is an image but breaks the element when there is not.


回答1:


When I want to add an image url to the style attribute, I usually do something like this:

<f:if condition="{page.files.0}">
    <f:variable name="imageUri" value="{f:uri.image(
        image: page.files.0,
        width: '300c',
        height: '200c')}"/>
</f:if>

<div style="background-image: url('{imageUri}');">
   ...
</div>

That would simply leave it empty in case the image does not exist. Though I often have an "else" case, where I use one of my custom viewhelpers to generate a placeholder image.



来源:https://stackoverflow.com/questions/58402958/render-image-in-fluid-template-if-it-exists

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!