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

Question

Я использую Gridelements в своем проекте TYPO3 v8. Я хотел бы показать фоновое изображение для рамки gridelement, взятой из соответствующего файла этой записи gridelements. Мы можем увидеть этот файл под внешним видом TAB. Я думаю, что это sys_file_reference.

Могу ли я просто использовать его во внешнем интерфейсе, чтобы сделать фоновое изображение для этого раздела gridelements?

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

Заранее спасибо за помощь.

Answer 1

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

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

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

2) фоновое изображение будет сохранено в медиа- поле, которое связано с палитрой "файлов", которую вы видите на вкладке "Внешний вид" элементов gridelements.

3) EXT: ваш текст зависит от 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:

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 / Заменяет / 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>

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

Финальная нота

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

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

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