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）您已经创建了自己的扩展程序，作为＆＃34;前端配置提供程序＆＃34 ;;我会称之为＆＃34; yourext＆＃34;。
如果您需要有关此主题的帮助，请加入TYPO3 Slack频道（https://typo3.slack.com/）并寻求帮助。

2）背景图像将存储在 media 字段中，该字段与＆＃34;文件＆＃34;相关。您在gridelements的外观标签中看到的调色板

3）EXT：yourext取决于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 /配置/ 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>

我认为这应该足够了。

最后的注释

使用媒体字段，您将无法使用＆＃34;裁剪工具＆＃34 ;;为此，您必须将图像存储在tt_content数据库表的 image 字段中;这意味着你必须改变gridelements的TCA以显示＆＃34;图像＆＃34;标签

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

2 个答案: