Gridelments с фоновым изображением

Я думаю, что это можно сделать с помощью TypoScript, но я опубликую здесь свое решение, основанное на Fluid.

Решение основано на следующих предположениях:

1) вы уже создали собственное расширение, которое действует как «поставщик конфигурации внешнего интерфейса»; Я назову его "yourext".
Если вам нужна помощь по этой теме, присоединяйтесь к каналу TYPO3 Slack (https://typo3.slack.com/) и обратитесь за помощью.

2) фоновое изображение будет сохранено в поле media, которое связано с палитрой «файлы», которую вы видите на вкладке внешнего вида элементов сетки.

3) EXT:yourext зависит от элементов сетки.

Конфигурация ТС

#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:

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:

# 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 (используйте свой собственный HTML-код, здесь я просто использую стандарт Bootstrap в качестве примера)

<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>

Я думаю, этого должно быть достаточно.

Последнее примечание

Используя поле мультимедиа, вы не сможете использовать «инструмент обрезки»; для этого вы должны хранить свои изображения в поле image таблицы базы данных tt_content; это означает, что вам придется изменить TCA элементов сетки, чтобы отобразить вкладку «изображения».

Гибкая форма:

    <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-шаблон

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