TYPO3 DCE：部分图像

Question

How can I use a image field in a DCE section?

An image element (myImage) can be accessed like this:

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

But if I loop through a section (mySection), this code does not work.

Solution after lots of debug:

1. Use this element for "myImage": File Abstraction Layer (section use only)

    <config> <type>group</type> <internal_type>db</internal_type> <appearance> <elementBrowserType>file</elementBrowserType> <elementBrowserAllowed>jpg,jpeg,png,gif</elementBrowserAllowed> </appearance> <allowed>sys_file</allowed> <size>1</size> <minitems>1</minitems> <maxitems>1</maxitems> <show_thumbs>1</show_thumbs> </config>

2. Use this template code

    <f:for each="{field.mySection}" as="teaserbox"> <f:image src="{teaserbox.image}" alt="" /> {teaserbox.text} </f:for>

You have to remove treatIdAsReference="1" - it will cause this error:

    No file usage (sys_file_reference) found for given UID.

This is not the 100% perfect solution, as you don't have the fields like alt , but it works. Better solutions are welcome!

Answer 1

This was not possible in older DCE versions. In the newer ones you can choose FAL Image for Section Configuration. That looks like this:

<config>
<type>group</type>
<internal_type>db</internal_type>
<appearance>
    <elementBrowserType>file</elementBrowserType>
    <elementBrowserAllowed>jpg,jpeg,png,gif</elementBrowserAllowed>
</appearance>
<allowed>sys_file</allowed>
<size>5</size>
<minitems>0</minitems>
<maxitems>5</maxitems>
<show_thumbs>1</show_thumbs>
</config>

And in your template this should work:

<f:for each="{item.image -> dce:explode()}" as="imageUid">
    <f:image src="file:{imageUid}"/>                        
</f:for>

Answer 2

//this is file upload control with little changes 

<config>
<type>group</type>
<internal_type>db</internal_type>
<appearance>
    <elementBrowserType>file</elementBrowserType>
    <elementBrowserAllowed>jpg,jpeg,png,gif</elementBrowserAllowed>
</appearance>
<allowed>sys_file</allowed>
<size>5</size>
<minitems>0</minitems>
<maxitems>5</maxitems>
<show_thumbs>1</show_thumbs>

<dce_load_schema>1</dce_load_schema>
<dce_get_fal_objects>1</dce_get_fal_objects>

It will look like In Dce backend it will look like below image

In my case it will look like this

<f:for each="{field.contentBoxes}" as="contentbox">
    <div class="col-lg-4 col-md-4 col-sm-6">
        <div class="choose__item">
            <f:for each="{contentbox.icon}" as="image">
                <f:image image="{image}"  />
            </f:for>
            <f:format.html>{contentbox.content}</f:format.html>
        </div>
     </div>
 </f:for>    

Now In your case you should try like this

<f:for each="{field.mySection}" as="teaserbox">
   <f:for each="{teaserbox.image}" as="img">
      <f:image image="{img}"  />
   </f:for> 
   {teaserbox.text}
</f:for>