Gridelments with background image

Question

I'm using Gridelements on my TYPO3 v8 project. I would like to show a background image for the gridelement frame taken from the related file of this gridelements record. We can see this file under the appearance TAB. I think this is a sys_file_reference.

Can I just use it in frontend to make a background image for this gridelements section?

# Two Columns
2 < lib.gridelements.defaultGridSetup
2 {
    columns {
        # 101 reflects colPos
        101 < .default
        101 {
            wrap = <div class="span6">|</div>
        }
        102 < .default
        102 {
            wrap = <div class="span6">|</div>
        }
    }
    wrap =<div class="row-container visible-first"> <div class="container-fluid"><div class="content-inner row-fluid">|</div></div></div>
}

Thanks in advance for the help.

Answer 1

I think it would be possible to do that with TypoScript, but I'll post here my solution, which is based on Fluid.

The solution is based on the following assumptions:

1) you have already created an extension of your own that acts as "frontend configuration provider"; I'll call it "yourext".
If you need help about this topic, please join the TYPO3 Slack channel (https://typo3.slack.com/) and ask for help.

2) the background image will be stored in the media field, that is related to the "files" palette you see in the appearance tab of gridelements

3) EXT:yourext depends on gridelements.

TS Config

#Define the element with 2 columns:

tx_gridelements.setup.twocolumnscontainer {
  title = 2 col container
  description = whatever description you want
  iconIdentifier = 
  config{
    colCount = 2
    rowCount = 1
    rows {
      1 {
        columns {
            1 {
                name = column 1
                colPos = 100
            }
            2 {
                name = column 2
                colPos = 101
            }
        }
      }
    }
  }  
}

TypoScript constants:

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/

TypoScript Template:

# the default gridelement object will be a reference to the default fluidtemplate object shipped with TYPO3 8

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

#define the element with 2 colums as copy of the default object
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 
    }

  }
}

EXT:yourext/Configuration/TCA/Overrides/tt_content.php:

<?php
 defined('TYPO3_MODE') or die();
 //prevent defining global variables 
 call_user_func(function () {
 // only allow 1 image
 $GLOBALS['TCA']['tt_content']['types']['gridelements_pi1']['columnsOverrides']['media']['config']['maxitems']=1;
});

EXT:yourext/Resources/Private/Templates/ContentElements/GridElementTwoColumns.html (use your own html code, here I just use the Bootstrap standard as example)

<f:layout name="Default"/>
<f:section name="Main">

<f:if condition="{backgroundimage.0}">
{f:uri.image(image:backgroundimage.0)}
</f:if>


<div class="row">
    <div class="col-sm-6">
        {data.tx_gridelements_view_column_100-> f:format.raw()}
    </div>
    <div class="col-sm-6">
        {data.tx_gridelements_view_column_101-> f:format.raw()}
    </div>          
</div>
</f:section>

I think this should be sufficient.

Final Note

Using the media field you will not be able to use the "cropping tool"; to do that you have to store your images in the image field of the tt_content database table; this means you'll have to alter the TCA of gridelements to show the "images" tab.

Answer 2

Flexform:

    <backgroundimage>
                    <TCEforms>
                        <label>Hitergundbild</label>
                        <config>
                            <type>inline</type>
                            <maxitems>1</maxitems>
                            <foreign_table>sys_file_reference</foreign_table>
                            <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,svg,gif</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>

HTML Template

style="background-image:url({f:uri.image(src:'{data.flexform_backgroundimage}',treatIdAsReference:'1')})"