带有背景图片的网格

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 可以做到这一点，但我会 post 在这里我的解决方案，它基于 Fluid。

解决方案基于以下假设：

1) 您已经创建了自己的扩展程序作为 "frontend configuration provider"；我将其命名为 "yourext".
如果您需要有关此主题的帮助，请加入 TYPO3 Slack 频道 (https://typo3.slack.com/) 并寻求帮助。

2) 背景图像将存储在 media 字段中，这与您在 gridelements[=16] 的外观选项卡中看到的 "files" 调色板相关=]

3) EXT:yourext 取决于网格元素。

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

我想这应该足够了。

最后的笔记

使用媒体字段您将无法使用 "cropping tool"；为此，您必须将图像存储在 tt_content 数据库 table 的 image 字段中；这意味着您必须更改 gridelements 的 TCA 才能显示 "images" 选项卡。

Answer 2

弹性变形：

    <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')})"

带有背景图片的网格

Gridelments with background image

typo3

tx-gridelements

typo3-8.x