带有背景图像的网格

Question

我在TYPO3 v8项目上使用了Gridelements。我想显示从此gridelements记录的相关文件中获取的gridelement框架的背景图像。我们可以在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）背景图片将存储在media字段中，该字段与您在gridelements的外观选项卡中看到的“ files”面板相关

3）EXT：yourext取决于gridelements。

TS配置

#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：您的ext / 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>

我认为这应该足够了。

最后说明

使用媒体字段，您将无法使用“裁剪工具”；为此，您必须将图像存储在tt_content数据库表的image字段中；这意味着您必须更改网格元素的TCA才能显示“图像”选项卡。