带有DCE的自定义内容元素中的单个文件

I installed DCE for custom content elements.

I would like a first div tag set conditionally including the filename. This should do it, but it doesn't - why?

  <f:if condition="{f:count(subject: {dce:fal(field:'bgImage', contentObject:contentObject)})}==1">
      <f:then>

        <f:for each="{dce:fal(field:'image', contentObject:contentObject)}" as="fileReference" iteration="iterator">
            <f:if condition="{iterator.isFirst}">
                <div class="element slide vertical-center picture{f:if(condition: '{field.isWhite} == 1', then: ' white')}" img-fill="{f:uri.image(src:'{fileReference.uid}',treatIdAsReference:'1')}" selectable>
            </f:if>
        </f:for>

    </f:then>
    <f:else>

        <div class="element slide vertical-center{f:if(condition: '{field.isWhite} == 1', then: ' white')}" selectable>

    </f:else>  
  </f:if>

What I need:

I defined a FAL property in DCE and if a file is set, the 'div' should be

<div class="element slide vertical-center picture" img-fill="FILEPATH" selectable>

if not it should be

<div class="element slide vertical-center" selectable>

I did not find a netter solution than this structure:

<f:for each="{dce:fal(field:'image', contentObject:contentObject)}" as="fileReference" iteration="iterator">
    <f:if condition="{iterator.isFirst}">
        <!-- render image by fileReference -->
    </f:if>
</f:for>

I already found the inline notation

{f:if(condition:'{filepath} != EMTPY',then:' picture')}

But how do I check for EMPTY in fluid?

{f:if(condition:'{filepath}',then:' picture')}

When I correctly understood Urs in the comments.

What do I miss?

I found a "solution" on my own:

  <f:for each="{dce:fal(field:'bgImage', contentObject:contentObject)}" as="fileReference" iteration="iterator">

    <f:if condition="{iterator.isFirst}">

      <div class="element slide vertical-center picture{f:if(condition: '{field.isWhite} == 1', then: ' white')}" img-fill-src="/fileadmin{fileReference.originalFile.identifier}">

    </f:if>

  </f:for>

  <f:if condition="<f:count>{dce:fal(field:'bgImage', contentObject:contentObject)}</f:count> < 1">

    <div class="element slide vertical-center{f:if(condition: '{field.isWhite} == 1', then: ' white')}">

  </f:if>

What a mess. Compare to a PHP approach:

<? if (count($image_references) == 1): ?>

  <div class="element slide vertical-center picture" img-fill-src="/fileadmin<? echo $file_references[0].originalFile.identifier; ?>">

<? else: ?>

  <div class="element slide vertical-center">

<? endif; ?>

</div>

And with this Fluid stuff you generate extreme overhead because after all you need a parser that parses the Fluid stuff. This parser is again written in PHP and muss be executed throughout to the frontend. That means everything has to be cached. But caching again is not good. The code is more easy. If you learn fluid you can't apply it somewhere else unlike PHP.

What a bad idea this "Fluid"-System is!

So, you might try something like this (I'm guessing):

<div class="..." img-fill="<f:if condition="{dce:fal(field:'image', contentObject:contentObject)}">
      <f:image image="{dce:fal(field:'image', contentObject:contentObject).0}" />
  </f:if>
  </f:for>">
 ... further content ...
</div>

try to something like this, it's work for me.

  <f:for each="{dce:fal(field:'fal', contentObject:contentObject)}" as="fileReference" iteration="iterator">
    <div class="element slide vertical-center {f:if(condition:'{fileReference.uid}',then:' picture')}">
            <f:image src="{fileReference.uid}" alt="" treatIdAsReference="1" />
    </div>
</f:for>