TYPO3 Gridelements render FAL Image using Fluidtemplate

Question

I'm using TYPO3 8.7 and the latest extension gridelements (8.2.3). Now I want to show/render an image in my FLUIDTEMPLATE.. - but I don't know how?!?

Here's my TypoScript:

tt_content {
    gridelements_pi1 = COA
    gridelements_pi1 {
        20 {
            10 {
                setup {
                    SectionColoured < lib.gridelements.defaultGridSetup
                    SectionColoured {
                        cObject = FLUIDTEMPLATE
                        cObject {
                            file = EXT:myext/.../SectionColoured.html
                        }
                    }
                }
            }
        }
    }
}

Now, I upload an image (e.g. for background-image) via flexforms, like this:

<backgroundimage type="array">
                        <TCEforms type="array">
                            <label>LLL:EXT:autefa/Resources/Private/Language/backend.xlf:gridelements.SectionColoured.flexforms.backgroundimage</label>
                            <config type="array">
                                <type>inline</type>
                                <maxitems>1</maxitems>
                                <foreign_table>sys_file_reference</foreign_table>
                                <!--<foreign_field>uid_foreign</foreign_field>-->
                                <foreign_table_field>tablenames</foreign_table_field>
                                <foreign_label>uid_local</foreign_label>
                                <foreign_sortby>sorting_foreign</foreign_sortby>
                                <foreign_selector>uid_local</foreign_selector>
                                <foreign_selector_fieldTcaOverride type="array">
                                    <config>
                                        <appearance>
                                            <elementBrowserType>file</elementBrowserType>
                                            <elementBrowserAllowed>jpg,png</elementBrowserAllowed>
                                        </appearance>
                                    </config>
                                </foreign_selector_fieldTcaOverride>
                                <foreign_match_fields type="array">
                                    <fieldname>image</fieldname>
                                </foreign_match_fields>
                                <appearance type="array">
                                    <newRecordLinkAddTitle>1</newRecordLinkAddTitle>
                                    <headerThumbnail>
                                        <field>uid_local</field>
                                        <height>64</height>
                                        <width>64</width>
                                    </headerThumbnail>
                                </appearance>
                            </config>
                        </TCEforms>
                    </backgroundimage>

That works so far. How can I use the image in my FLUIDTEMPLATE? The debugger returns 12 on {data.flexform_backgroundimage} ?!

<f:debug>{data.flexform_backgroundimage}</f:debug>
<section class="main-content {data.flexform_farbe}">
    <article>
        <f:format.raw>{data.tx_gridelements_view_columns.101}</f:format.raw>
    </article>
</section>

Debug {data}.. THanks for your help!

pi_flexform => array(1 item)
      data => array(1 item)
         general => array(1 item)
            lDEF => array(2 items)
               farbe => array(1 item)
               backgroundimage => array(1 item)
                  vDEF => '12' (2 chars)

Edit: image

Answer 1

It's funny. If I try it with the TYPO3 Fluid ViewHelper:

<section style="background-image:url({f:uri.image(src: '{data.flexform_backgroundimage}', treatIdAsReference: 1)})">
    <article>
        <f:format.raw>{data.tx_gridelements_view_columns.100}</f:format.raw>
    </article>
</section>

I'll get an error You must either specify a string src or a File object.

Now I use vhs:

{namespace v=FluidTYPO3\Vhs\ViewHelpers}

<section style="background-image:url({v:uri.image(src: '{data.flexform_backgroundimage}', treatIdAsReference: 1)})">
    <article>
        <f:format.raw>{data.tx_gridelements_view_columns.100}</f:format.raw>
    </article>
</section>

And everything works .. here's the view helper reference of the vhs extension. Thanks for the helping guys!

Answer 2

This should work for you:

<f:uri.image src="{data.flexform_backgroundimage}" treatIdAsReference="1"/>

Answer 3

Since FAL is working with records instead of plain text paths to the image, you have to use the ID of the record to get the actual image file.

Since I am not 100% sure, you should check if 12 is the ID of the sys_file_reference record or the sys_file record used for that particular image before using the usual < f:image> viewhelper either with or without "treatIdAsReference".

https://docs.typo3.org/typo3cms/ExtbaseGuide/Fluid/ViewHelper/Image.html

If you just need the path to the image and not an image tag you should go for < f:uri.image> instead.

https://docs.typo3.org/typo3cms/ExtbaseGuide/Fluid/ViewHelper/Uri/Image.html

Answer 4

This is how I did it some time ago, using the media field of tt_content instead of using flexform. This solution assumes that

a) you are using a "frontend provider" extension (EXT:yourext) that stores your TypoScript and Fluid Templates

b) EXT:yourext depends on EXT:gridelements

c) In this example, my gridelement object is called twocolumnscontainer

1) TS Constants: use EXT:yourext as alternative path for fluid templates, layouts, partials

styles.templates.templateRootPath = EXT:yourext/Resources/Private/Templates/ContentElements/ 
styles.templates.partialRootPath = EXT:yourext/Resources/Private/Partials/ContentElements/
styles.templates.layoutRootPath = EXT:yourext/Resources/Private/Layouts/ContentElements/

2) in TS Setup, define the template cObject for content grids

lib.gridelements.defaultGridSetup.cObject =<  lib.contentElement

tt_content.gridelements_pi1.20.10.setup.twocolumnscontainer < lib.gridelements.defaultGridSetup
tt_content.gridelements_pi1.20.10.setup.twocolumnscontainer {
  cObject.templateName = GridElementTwoColumns
    cObject.dataProcessing {
        10 = TYPO3\CMS\Frontend\DataProcessing\FilesProcessor
        10 {
            references.fieldName = media
            as = backgroundimage 
        }

    }
}

3) In TS Config:

tx_gridelements.setup.twocolumnscontainer {
  title = Two columns element with background image
  description = whatever
  config{
    colCount = 2
    rowCount = 1
    rows {
        1 {
            columns {
                1 {
                    name = column 1
                    colPos = 100
                }
                2 {
                    name = column 2
                    colPos = 101
                }
            }
        }
    }
  }  
}

4) EXT:yourext/TCA/Overrides/tt_content_element_gridelement.php

<?php
defined('TYPO3_MODE') || die();

call_user_func(function()
{
    /**
     * Limit the number of images in "media" for gridelements contents
     */
    $GLOBALS['TCA']['tt_content']['types']['gridelements_pi1']['columnsOverrides']['media']['config']['maxitems']=1;

});

5) Define the Fluid template (I removed the classes so you can use whatever you want, Bootstrap, Foundation...): EXT:yourext/Resources/Private/Templates/ContentElements/GridElementTwoColumns.html

<f:layout name="Default"/>
<f:section name="Main">
<f:if condition="{backgroundimage.0}">
{f:uri.image(image:backgroundimage.0)}
</f:if>
    <div class="">
        <div class="">
            {data.tx_gridelements_view_column_100-> f:format.raw()}
        </div>
        <div class="">
            {data.tx_gridelements_view_column_101-> f:format.raw()}
        </div>          
    </div>
</f:section>

I hope I have not forgotten important steps :)