TYPO3 Gridelements отображает изображение FAL с использованием Fluidtemplate

Это забавно. Если я попробую это с помощью 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>

Я получаю сообщение об ошибке You must either specify a string src or a File object.

Сейчас использую 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>

И все работает .. вот справка по помощнику просмотра расширения vhs . Спасибо за помощь, ребята!

Поскольку FAL работает с записями, а не с путями к изображению в виде обычного текста, вы должны использовать идентификатор записи, чтобы получить фактический файл изображения.

Поскольку я не уверен на 100%, вы должны проверить, является ли 12 идентификатором записи sys_file_reference или записи sys_file, используемой для этого конкретного изображения, прежде чем использовать обычную команду ‹f: image> viewhelper с или без« TreatIdAsReference ».

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

Если вам нужен только путь к изображению, а не тег изображения, вы должны вместо этого использовать ‹f: uri.image>.

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

Вот как я сделал это некоторое время назад, используя поле media tt_content вместо использования flexform. Это решение предполагает, что

а) вы используете расширение "внешнего поставщика" (EXT: yourext), в котором хранятся ваши шаблоны TypoScript и Fluid

б) EXT: yourext зависит от EXT: gridelements

c) В этом примере мой объект gridelement называется twocolumnscontainer

1) Константы TS: используйте EXT: yourext в качестве альтернативного пути для гибких шаблонов, макетов, партиалов.

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) в TS Setup определите шаблон cObject для контентных сеток.

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) В 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) Определите шаблон Fluid (я удалил классы, чтобы вы могли использовать все, что хотите, 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>

Надеюсь, я не забыл важные шаги :)

Это должно сработать для вас:

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