I want a common field "Images" containing two subfields top image and bottom image. The common field "Images" should be repeatable field that means able to add multiple times. I am attaching the demo below. Can anyone help please?
This is my flexform code. There is two fields of image top image and bottom image. i want to make these two to my functionality.
<T3DataStructure>
<sheets>
<sDEF>
<ROOT>
<TCEforms>
<sheetTitle>Settings</sheetTitle>
</TCEforms>
<type>array</type>
<el>
<settings.gallerytype>
<TCEforms>
<label>Gallery Type</label>
<onChange>reload</onChange>
<config>
<type>select</type>
<renderType>selectSingle</renderType>
<items type="array">
<numIndex index="0" type="array">
<numIndex index="0">-Select-</numIndex>
</numIndex>
<numIndex index="1" type="array">
<numIndex index="0">Simple Gallery</numIndex>
<numIndex index="1">0</numIndex>
</numIndex>
<numIndex index="2" type="array">
<numIndex index="0">Parallax</numIndex>
<numIndex index="1">1</numIndex>
</numIndex>
<numIndex index="3" type="array">
<numIndex index="0">Grid Gallery</numIndex>
<numIndex index="1">2</numIndex>
</numIndex>
<numIndex index="4" type="array">
<numIndex index="0">Sliders</numIndex>
<numIndex index="1">3</numIndex>
</numIndex>
<numIndex index="5" type="array">
<numIndex index="0">Portfolio</numIndex>
<numIndex index="1">4</numIndex>
</numIndex>
<numIndex index="6" type="array">
<numIndex index="0">Filter Gallery</numIndex>
<numIndex index="1">5</numIndex>
</numIndex>
</items>
<minitems>1</minitems>
<maxitems>1</maxitems>
<size>1</size>
</config>
</TCEforms>
</settings.gallerytype>
<settings.gridsubstyle>
<TCEforms>
<label>Select the style for gallery type</label>
<onChange>reload</onChange>
<displayCond>FIELD:settings.gallerytype:=:2</displayCond>
<config>
<type>select</type>
<renderType>selectSingle</renderType>
<items type="array">
<numIndex index="0" type="array">
</numIndex>
<numIndex index="1" type="array">
<numIndex index="0">One column Image display</numIndex>
<numIndex index="1">6</numIndex>
</numIndex>
<numIndex index="2" type="array">
<numIndex index="0">Two column Image display</numIndex>
<numIndex index="1">7</numIndex>
</numIndex>
<numIndex index="3" type="array">
<numIndex index="0">Three column Image display</numIndex>
<numIndex index="1">8</numIndex>
</numIndex>
<numIndex index="4" type="array">
<numIndex index="0">Four column Image display</numIndex>
<numIndex index="1">9</numIndex>
</numIndex>
</items>
<minitems>1</minitems>
<maxitems>1</maxitems>
<size>1</size>
</config>
</TCEforms>
</settings.gridsubstyle>
<settings.slidersubstyle>
<TCEforms>
<label>Select the style for gallery type</label>
<onChange>reload</onChange>
<displayCond>FIELD:settings.gallerytype:=:3</displayCond>
<config>
<type>select</type>
<renderType>selectSingle</renderType>
<items type="array">
<numIndex index="0" type="array">
<numIndex index="0">-Select-</numIndex>
</numIndex>
<numIndex index="1" type="array">
<numIndex index="0">Banner Slider</numIndex>
<numIndex index="1">10</numIndex>
</numIndex>
<numIndex index="2" type="array">
<numIndex index="0">Treadmill</numIndex>
<numIndex index="1">11</numIndex>
</numIndex>
</items>
<minitems>1</minitems>
<maxitems>1</maxitems>
<size>1</size>
</config>
</TCEforms>
</settings.slidersubstyle>
<settings.filtersubstyle>
<TCEforms>
<label>Select the style for gallery type</label>
<onChange>reload</onChange>
<displayCond>FIELD:settings.gallerytype:=:5</displayCond>
<config>
<type>select</type>
<renderType>selectSingle</renderType>
<items type="array">
<numIndex index="0" type="array">
<numIndex index="0">-Select-</numIndex>
</numIndex>
<numIndex index="1" type="array">
<numIndex index="0">Gallery with Filter</numIndex>
<numIndex index="1">12</numIndex>
</numIndex>
<numIndex index="2" type="array">
<numIndex index="0">Standard Gallery with Filter</numIndex>
<numIndex index="1">13</numIndex>
</numIndex>
</items>
<minitems>1</minitems>
<maxitems>1</maxitems>
<size>1</size>
</config>
</TCEforms>
</settings.filtersubstyle>
<settings.gallerytitle>
<TCEforms>
<label>Gallery Title</label>
<config>
<type>input</type>
<size>200</size>
</config>
</TCEforms>
</settings.gallerytitle>
<galleryimage>
<TCEforms>
<label>Images</label>
<onChange>reload</onChange>
<displayCond>
<OR>
<numIndex index="1">FIELD:settings.gallerytype:=:0</numIndex>
<numIndex index="2">FIELD:settings.gallerytype:=:1</numIndex>
<numIndex index="3">FIELD:settings.gallerytype:=:4</numIndex>
<numIndex index="4">FIELD:settings.gridsubstyle:=:6</numIndex>
<numIndex index="5">FIELD:settings.gridsubstyle:=:7</numIndex>
<numIndex index="6">FIELD:settings.gridsubstyle:=:8</numIndex>
<numIndex index="7">FIELD:settings.gridsubstyle:=:9</numIndex>
<numIndex index="8">FIELD:settings.slidersubstyle:=:10</numIndex>
<numIndex index="9">FIELD:settings.filtersubstyle:=:12</numIndex>
<numIndex index="10">FIELD:settings.filtersubstyle:=:13</numIndex>
</OR>
</displayCond>
<config>
<type>inline</type>
<maxitems>2000</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_field>uid_foreign</foreign_field>
<foreign_selector>uid_local</foreign_selector>
<foreign_selector_fieldTcaOverride>
<config>
<appearance>
<elementBrowserType>file</elementBrowserType>
<elementBrowserAllowed>jpg,jpeg,png</elementBrowserAllowed>
</appearance>
</config>
</foreign_selector_fieldTcaOverride>
<foreign_types type="array">
<numIndex index="0">
<showitem>--palette--;LLL:EXT:lang/locallang_tca.xlf:sys_file_reference.imageoverlayPalette;imageoverlayPalette,--palette--;;filePalette</showitem>
</numIndex>
<numIndex index="2">
<showitem>--palette--;LLL:EXT:lang/locallang_tca.xlf:sys_file_reference.imageoverlayPalette;imageoverlayPalette,--palette--;;filePalette</showitem>
</numIndex>
</foreign_types>
<foreign_match_fields>
<fieldname>Galleryimage</fieldname>
<!-- CAUTION!! Replace "fal" with the variable name of this field! -->
</foreign_match_fields>
<appearance type="array">
<newRecordLinkAddTitle>1</newRecordLinkAddTitle>
<useSortable>1</useSortable>
<headerThumbnail>
<field>uid_local</field>
<height>64</height>
<width>64</width>
</headerThumbnail>
<enabledControls>
<info>1</info>
<new>0</new>
<dragdrop>0</dragdrop>
<sort>1</sort>
<hide>1</hide>
<delete>1</delete>
<localize>1</localize>
</enabledControls>
<createNewRelationLinkTitle>LLL:EXT:frontend/Resources/Private/Language/locallang_ttc.xlf:images.addFileReference</createNewRelationLinkTitle>
</appearance>
<behaviour>
<localizationMode>select</localizationMode>
<localizeChildrenAtParentLocalization>1</localizeChildrenAtParentLocalization>
</behaviour>
<overrideChildTca>
<columns type="array">
<uid_local type="array">
<config type="array">
<appearance type="array">
<elementBrowserType>file</elementBrowserType>
<elementBrowserAllowed>jpg,jpeg,png</elementBrowserAllowed>
</appearance>
</config>
</uid_local>
</columns>
<types type="array">
<numIndex index="2">
<showitem>--palette--;LLL:EXT:lang/locallang_tca.xlf:sys_file_reference.imageoverlayPalette;imageoverlayPalette,--palette--;;filePalette</showitem>
</numIndex>
</types>
</overrideChildTca>
</config>
</TCEforms>
</galleryimage>
<topimage>
<TCEforms>
<label>Top Image</label>
<onChange>reload</onChange>
<displayCond>
<OR>
<numIndex index="1">FIELD:settings.slidersubstyle:=:11</numIndex>
</OR>
</displayCond>
<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_field>uid_foreign</foreign_field>
<foreign_selector>uid_local</foreign_selector>
<foreign_selector_fieldTcaOverride>
<config>
<appearance>
<elementBrowserType>file</elementBrowserType>
<elementBrowserAllowed>jpg,jpeg,png</elementBrowserAllowed>
</appearance>
</config>
</foreign_selector_fieldTcaOverride>
<foreign_types type="array">
<numIndex index="0">
<showitem>--palette--;LLL:EXT:lang/locallang_tca.xlf:sys_file_reference.imageoverlayPalette;imageoverlayPalette,--palette--;;filePalette</showitem>
</numIndex>
<numIndex index="2">
<showitem>--palette--;LLL:EXT:lang/locallang_tca.xlf:sys_file_reference.imageoverlayPalette;imageoverlayPalette,--palette--;;filePalette</showitem>
</numIndex>
</foreign_types>
<foreign_match_fields>
<fieldname>Topimage</fieldname>
<!-- CAUTION!! Replace "fal" with the variable name of this field! -->
</foreign_match_fields>
<appearance type="array">
<newRecordLinkAddTitle>1</newRecordLinkAddTitle>
<useSortable>1</useSortable>
<headerThumbnail>
<field>uid_local</field>
<height>64</height>
<width>64</width>
</headerThumbnail>
<enabledControls>
<info>1</info>
<new>0</new>
<dragdrop>0</dragdrop>
<sort>1</sort>
<hide>1</hide>
<delete>1</delete>
<localize>1</localize>
</enabledControls>
<createNewRelationLinkTitle>LLL:EXT:frontend/Resources/Private/Language/locallang_ttc.xlf:images.addFileReference</createNewRelationLinkTitle>
</appearance>
<behaviour>
<localizationMode>select</localizationMode>
<localizeChildrenAtParentLocalization>1</localizeChildrenAtParentLocalization>
</behaviour>
<overrideChildTca>
<columns type="array">
<uid_local type="array">
<config type="array">
<appearance type="array">
<elementBrowserType>file</elementBrowserType>
<elementBrowserAllowed>jpg,jpeg,png</elementBrowserAllowed>
</appearance>
</config>
</uid_local>
</columns>
<types type="array">
<numIndex index="2">
<showitem>--palette--;LLL:EXT:lang/locallang_tca.xlf:sys_file_reference.imageoverlayPalette;imageoverlayPalette,--palette--;;filePalette</showitem>
</numIndex>
</types>
</overrideChildTca>
</config>
</TCEforms>
</topimage>
<bottomimage>
<TCEforms>
<label>Bottom Image</label>
<onChange>reload</onChange>
<displayCond>
<OR>
<numIndex index="1">FIELD:settings.slidersubstyle:=:11</numIndex>
</OR>
</displayCond>
<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_field>uid_foreign</foreign_field>
<foreign_selector>uid_local</foreign_selector>
<foreign_selector_fieldTcaOverride>
<config>
<appearance>
<elementBrowserType>file</elementBrowserType>
<elementBrowserAllowed>jpg,jpeg,png</elementBrowserAllowed>
</appearance>
</config>
</foreign_selector_fieldTcaOverride>
<foreign_types type="array">
<numIndex index="0">
<showitem>--palette--;LLL:EXT:lang/locallang_tca.xlf:sys_file_reference.imageoverlayPalette;imageoverlayPalette,--palette--;;filePalette</showitem>
</numIndex>
<numIndex index="2">
<showitem>--palette--;LLL:EXT:lang/locallang_tca.xlf:sys_file_reference.imageoverlayPalette;imageoverlayPalette,--palette--;;filePalette</showitem>
</numIndex>
</foreign_types>
<foreign_match_fields>
<fieldname>Bottomimage</fieldname>
<!-- CAUTION!! Replace "fal" with the variable name of this field! -->
</foreign_match_fields>
<appearance type="array">
<newRecordLinkAddTitle>1</newRecordLinkAddTitle>
<useSortable>1</useSortable>
<headerThumbnail>
<field>uid_local</field>
<height>64</height>
<width>64</width>
</headerThumbnail>
<enabledControls>
<info>1</info>
<new>0</new>
<dragdrop>0</dragdrop>
<sort>1</sort>
<hide>1</hide>
<delete>1</delete>
<localize>1</localize>
</enabledControls>
<createNewRelationLinkTitle>LLL:EXT:frontend/Resources/Private/Language/locallang_ttc.xlf:images.addFileReference</createNewRelationLinkTitle>
</appearance>
<behaviour>
<localizationMode>select</localizationMode>
<localizeChildrenAtParentLocalization>1</localizeChildrenAtParentLocalization>
</behaviour>
<overrideChildTca>
<columns type="array">
<uid_local type="array">
<config type="array">
<appearance type="array">
<elementBrowserType>file</elementBrowserType>
<elementBrowserAllowed>jpg,jpeg,png</elementBrowserAllowed>
</appearance>
</config>
</uid_local>
</columns>
<types type="array">
<numIndex index="2">
<showitem>--palette--;LLL:EXT:lang/locallang_tca.xlf:sys_file_reference.imageoverlayPalette;imageoverlayPalette,--palette--;;filePalette</showitem>
</numIndex>
</types>
</overrideChildTca>
</config>
</TCEforms>
</bottomimage>
<settings.treadmill>
<TCEforms>
<label>Add media</label>
<onChange>reload</onChange>
<displayCond>
<OR>
<numIndex index="1">FIELD:settings.slidersubstyle:=:11</numIndex>
</OR>
</displayCond>
<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_field>uid_foreign</foreign_field>
<foreign_selector>uid_local</foreign_selector>
<foreign_selector_fieldTcaOverride>
<config>
<appearance>
<elementBrowserType>file</elementBrowserType>
<elementBrowserAllowed>jpg,jpeg,png</elementBrowserAllowed>
</appearance>
</config>
</foreign_selector_fieldTcaOverride>
<foreign_types type="array">
<numIndex index="0">
<showitem>--palette--;LLL:EXT:lang/locallang_tca.xlf:sys_file_reference.imageoverlayPalette;imageoverlayPalette,--palette--;;filePalette</showitem>
</numIndex>
<numIndex index="2">
<showitem>--palette--;LLL:EXT:lang/locallang_tca.xlf:sys_file_reference.imageoverlayPalette;imageoverlayPalette,--palette--;;filePalette</showitem>
</numIndex>
</foreign_types>
<foreign_match_fields>
<fieldname>Bottomimage</fieldname>
<!-- CAUTION!! Replace "fal" with the variable name of this field! -->
</foreign_match_fields>
<appearance type="array">
<newRecordLinkAddTitle>1</newRecordLinkAddTitle>
<useSortable>1</useSortable>
<headerThumbnail>
<field>uid_local</field>
<height>64</height>
<width>64</width>
</headerThumbnail>
<enabledControls>
<info>1</info>
<new>0</new>
<dragdrop>0</dragdrop>
<sort>1</sort>
<hide>1</hide>
<delete>1</delete>
<localize>1</localize>
</enabledControls>
<createNewRelationLinkTitle>LLL:EXT:frontend/Resources/Private/Language/locallang_ttc.xlf:images.addFileReference</createNewRelationLinkTitle>
</appearance>
<behaviour>
<localizationMode>select</localizationMode>
<localizeChildrenAtParentLocalization>1</localizeChildrenAtParentLocalization>
</behaviour>
<overrideChildTca>
<columns type="array">
<uid_local type="array">
<config type="array">
<appearance type="array">
<elementBrowserType>file</elementBrowserType>
<elementBrowserAllowed>jpg,jpeg,png</elementBrowserAllowed>
</appearance>
</config>
</uid_local>
</columns>
<types type="array">
<numIndex index="2">
<showitem>--palette--;LLL:EXT:lang/locallang_tca.xlf:sys_file_reference.imageoverlayPalette;imageoverlayPalette,--palette--;;filePalette</showitem>
</numIndex>
</types>
</overrideChildTca>
</config>
</TCEforms>
</settings.treadmill>
<settings.enablefilter>
<TCEforms>
<label>Enable Filter</label>
<config>
<type>check</type>
<maxitems>2</maxitems>
</config>
</TCEforms>
</settings.enablefilter>
</el>
</ROOT>
</sDEF>
</sheets>
</T3DataStructure>
.
Create an additional record-type "image" (including TCA, SQL-table and so on), having the two required fields "Top image" and "Bottom image". Then configure an IRRE/inline-type field in the parent record.
Related
I've read a lot of posts here about FAL images in TYPO3.
I've updated to TYPO3 v10 and now I need to render my Images with FAL.
I can't find a solution to get it from zero to work.
I use this at a custom Fluid+Extbase extension.
What I've got is the FlexForm:
<settings.image>
<TCEforms>
<label>Headerbild</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_field>uid_foreign</foreign_field>
<foreign_selector>uid_local</foreign_selector>
<foreign_selector_fieldTcaOverride>
<config>
<appearance>
<elementBrowserType>file</elementBrowserType>
<elementBrowserAllowed>gif,jpg,jpeg,png,svg</elementBrowserAllowed>
</appearance>
</config>
</foreign_selector_fieldTcaOverride>
<foreign_types type="array">
<numIndex index="0">
<showitem>--palette--;LLL:EXT:lang/locallang_tca.xlf:sys_file_reference.imageoverlayPalette;imageoverlayPalette,--palette--;;filePalette</showitem>
</numIndex>
<numIndex index="2">
<showitem>--palette--;LLL:EXT:lang/locallang_tca.xlf:sys_file_reference.imageoverlayPalette;imageoverlayPalette,--palette--;;filePalette</showitem>
</numIndex>
</foreign_types>
<foreign_match_fields>
<fieldname>image</fieldname>
</foreign_match_fields>
<appearance type="array">
<newRecordLinkAddTitle>1</newRecordLinkAddTitle>
<headerThumbnail>
<field>uid_local</field>
<height>64</height>
<width>64</width>
</headerThumbnail>
<enabledControls>
<info>1</info>
<new>0</new>
<dragdrop>0</dragdrop>
<sort>1</sort>
<hide>0</hide>
<delete>1</delete>
<localize>1</localize>
</enabledControls>
<createNewRelationLinkTitle>LLL:EXT:frontend/Resources/Private/Language/locallang_ttc.xlf:images.addFileReference</createNewRelationLinkTitle>
</appearance>
<behaviour>
<localizationMode>select</localizationMode>
<localizeChildrenAtParentLocalization>1</localizeChildrenAtParentLocalization>
</behaviour>
<overrideChildTca>
<columns type="array">
<uid_local type="array">
<config type="array">
<appearance type="array">
<elementBrowserType>file</elementBrowserType>
<elementBrowserAllowed>jpg,png,svg,jpeg,gif</elementBrowserAllowed>
</appearance>
</config>
</uid_local>
</columns>
<types type="array">
<numIndex index="2">
<showitem>--palette--;LLL:EXT:lang/locallang_tca.xlf:sys_file_reference.imageoverlayPalette;imageoverlayPalette,--palette--;;filePalette</showitem>
</numIndex>
</types>
</overrideChildTca>
</config>
</TCEforms>
</settings.image>
How can i access this images now?
If I debug it, I just get INT "1" at the frontend.
I know I need a DataProcessor, but where to put it and what to put exactly?
I got a Typoscript Conf, can I put the Processor here?:
page.includeCSS.filedsheader = EXT:dsheader/Resources/Public/Css/dsheader.css
page.includeJSFooter.filedsheader = EXT:dsheader/Resources/Public/Js/dsheader.js
plugin.tx_dsheader {
view {
templateRootPath = {$plugin.tx_dsheader.view.templateRootPath}
partialRootPath = {$plugin.tx_dsheader.view.partialRootPath}
layoutRootPath = {$plugin.tx_dsheader.view.layoutRootPath}
}
persistence {
storagePid = {$plugin.tx_dsheader.persistence.storagePid}
}
features {
# uncomment the following line to enable the new Property Mapper.
# rewrittenPropertyMapper = 1
}
}
My Controller: Maybe I'm missing something here?
<?php
namespace Alroma\Dsheader\Controller;
/**
*
* #category Controller
*/
class ContentController extends \TYPO3\CMS\Extbase\Mvc\Controller\ActionController {
/**
* #var \TYPO3\CMS\Core\Resource\FileRepository
* #TYPO3\CMS\Extbase\Annotation\Inject
*/
protected $fileRepository;
/**
* #return void
*/
public function dsheaderAction() {
$data = $this->configurationManager->getContentObject()->data;
$this->view->assign('data', $data);
}
}
Finally I got my Images rendered.
My Flexform was okay, I just needed to get the File Reference at my Controller:
<?php
namespace Alroma\Dsheader\Controller;
/**
*
* #category Controller
*/
class ContentController extends \TYPO3\CMS\Extbase\Mvc\Controller\ActionController {
/**
* #var TYPO3\CMS\Core\Resource\FileRepository
* #TYPO3\CMS\Extbase\Annotation\Inject
*/
protected $fileRepository;
/**
* #return void
*/
public function dsheaderAction() {
$this->contentObj = $this->configurationManager->getContentObject();
$images=$this->getFileReferences($this->contentObj->data['uid']);
$this->view->assign('images', $images);
$data = $this->configurationManager->getContentObject()->data;
$this->view->assign('data', $data);
}
protected function getFileReferences($tt_content) {
$uid = $tt_content; // content element uid
$fileRepository = \TYPO3\CMS\Core\Utility\GeneralUtility::makeInstance('TYPO3\\CMS\\Core\\Resource\\FileRepository');
$fileObjects = $fileRepository->findByRelation('tt_content', 'image', $uid);
// get Imageobject information
$files = array();
foreach ($fileObjects as $key => $value) {
$files[$key]['reference'] = $value->getReferenceProperties();
$files[$key]['original'] = $value->getOriginalFile()->getProperties();
}
return $files;
}
}
Well, I am not sure what wrong with your code. As you said your debug return int 1 this will probably show the status of the field. Anyway, Check out below configuration I frequently use for my TYPO3 10.x projects.
<bgImg>
<TCEforms>
<label>Select Image</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_field>uid_foreign</foreign_field>
<foreign_selector>uid_local</foreign_selector>
<foreign_selector_fieldTcaOverride>
<config>
<appearance>
<elementBrowserType>file</elementBrowserType>
<elementBrowserAllowed>gif,jpg,jpeg,png,svg</elementBrowserAllowed>
</appearance>
</config>
</foreign_selector_fieldTcaOverride>
<foreign_types type="array">
<numIndex index="0">
<showitem>--palette--;LLL:EXT:lang/locallang_tca.xlf:sys_file_reference.imageoverlayPalette;imageoverlayPalette,--palette--;;filePalette</showitem>
</numIndex>
<numIndex index="2">
<showitem>--palette--;LLL:EXT:lang/locallang_tca.xlf:sys_file_reference.imageoverlayPalette;imageoverlayPalette,--palette--;;filePalette</showitem>
</numIndex>
</foreign_types>
<foreign_match_fields>
<fieldname>bgImg</fieldname>
</foreign_match_fields>
<appearance type="array">
<newRecordLinkAddTitle>1</newRecordLinkAddTitle>
<headerThumbnail>
<field>uid_local</field>
<height>64</height>
<width>64</width>
</headerThumbnail>
<enabledControls>
<info>1</info>
<new>0</new>
<dragdrop>0</dragdrop>
<sort>1</sort>
<hide>0</hide>
<delete>1</delete>
<localize>1</localize>
</enabledControls>
<createNewRelationLinkTitle>LLL:EXT:frontend/Resources/Private/Language/locallang_ttc.xlf:images.addFileReference</createNewRelationLinkTitle>
</appearance>
<behaviour>
<localizationMode>select</localizationMode>
<localizeChildrenAtParentLocalization>1</localizeChildrenAtParentLocalization>
</behaviour>
<overrideChildTca>
<columns type="array">
<uid_local type="array">
<config type="array">
<appearance type="array">
<elementBrowserType>file</elementBrowserType>
<elementBrowserAllowed>jpg,png,svg,jpeg,gif</elementBrowserAllowed>
</appearance>
</config>
</uid_local>
</columns>
<types type="array">
<numIndex index="2">
<showitem>--palette--;LLL:EXT:lang/locallang_tca.xlf:sys_file_reference.imageoverlayPalette;imageoverlayPalette,--palette--;;filePalette</showitem>
</numIndex>
</types>
</overrideChildTca>
</config>
</TCEforms>
</bgImg>
In your frontend template (I assume you have fluid templating), you can get this with below syntax.
{f:uri.image(src:'{data.flexform_bgImg}', treatIdAsReference:'1')}
Above systext will return URL for the resource file. you can either use with standerd HTML img tag.
<img src="{f:uri.image(src:'{data.flexform_bgImg}', treatIdAsReference:'1')}" />
Hope this will get you ride off!
It's not useful, I get an error still version 10.4.3 DCE elements all upload images blocked and showing error backend admin
You are right, you just needed to add a data processor. You can do this in setup.ts:
...
dataProcessing.20 = TYPO3\CMS\Frontend\DataProcessing\FilesProcessor
dataProcessing.20 {
if.isTrue.field = settings.image
references {
fieldName = settings.image
table = tt_content
}
as = ImageNameHere
}
...this will probably return as an array, so in fluid use a foreach to save it to a variable name:
<f:for each="{ImageNameHere}" as="file" iteration="iterator">
<f:variable name="fileurl"><f:uri.image image="{file}"/></f:variable>
</f:for>
...and then you can reference it in HTML
<div style="background-image:url({fileurl});"></div>
I have a flexform with following code:
<image>
<TCEforms>
<label>LLL:EXT:my_slider/Resources/Private/Language/locallang.xlf:flexform.slider.main.slider.image</label>
<config>
<type>group</type>
<internal_type>file</internal_type>
<allowed>jpg, jpeg, gif, png</allowed>
<show_thumbs>1</show_thumbs>
<minitems>0</minitems>
<maxitems>1</maxitems>
<size>1</size>
</config>
</TCEforms>
</image>
Until now this worked. But now in TYPO3 10 I get this error:
TCA internal_type of field "image" in table tt_content must be set to "db" or "folder".
How can I resolve this? How can I migrate my flexform to FAL? I've testet a few solutions but they ended in:
Invalid flex form data structure on field name "pi_flexform" with element "image" in section container "sliderConfiguration": Nesting inline elements in flex form sections is not allowed.
if i write
<el>
<settings.slider type="array">
<title>LLL:EXT:my_slider/Resources/Private/Language/locallang.xlf:flexform.slider.main.slider</title>
<type>array</type>
<section>1</section>
<el>
<sliderConfiguration>
<type>array</type>
<title>LLL:EXT:my_slider/Resources/Private/Language/locallang.xlf:flexform.slider.main.slider.slide</title>
<el>
<media>
<!-- https://stackoverflow.com/questions/47554243/how-to-add-cropvariants-to-an-image-field-in-typo3-flexform -->
<TCEforms>
<label>
LLL:EXT:va_template/Resources/Private/Language/locallang.xlf:content_element.backgroundtext.settings.image
</label>
<config>
<type>inline</type>
<minitems>1</minitems>
<maxitems>1</maxitems>
<appearance type="array">
<enabledControls type="array">
<delete>1</delete>
<dragdrop>1</dragdrop>
<new>0</new>
<hide>1</hide>
<info>1</info>
</enabledControls>
<fileUploadAllowed>1</fileUploadAllowed>
<headerThumbnail type="array">
<field>uid_local</field>
<height>100c</height>
<width>100</width>
</headerThumbnail>
<useSortable>1</useSortable>
</appearance>
<foreign_field>uid_foreign</foreign_field>
<foreign_label>uid_local</foreign_label>
<foreign_match_fields type="array">
<fieldname>media</fieldname>
</foreign_match_fields>
<foreign_selector>uid_local</foreign_selector>
<foreign_sortby>sorting_foreign</foreign_sortby>
<foreign_table>sys_file_reference</foreign_table>
<foreign_table_field>tablenames</foreign_table_field>
</config>
</TCEforms>
</media>
then i get this error
Invalid flex form data structure on field name "pi_flexform" with element "media" in section container "sliderConfiguration": Nesting inline elements in flex form sections is not allowed.
I have written here the full flexform config which will run with typo3 10.
<image>
<TCEforms>
<label>LLL:EXT:ns_theme_healthy/Resources/Private/Language/locallang_flex.xlf:general.image</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_field>uid_foreign</foreign_field>
<foreign_selector>uid_local</foreign_selector>
<foreign_selector_fieldTcaOverride>
<config>
<appearance>
<elementBrowserType>file</elementBrowserType>
<elementBrowserAllowed>gif,jpg,jpeg,png,svg</elementBrowserAllowed>
</appearance>
</config>
</foreign_selector_fieldTcaOverride>
<foreign_types type="array">
<numIndex index="0">
<showitem>--palette--;LLL:EXT:lang/locallang_tca.xlf:sys_file_reference.imageoverlayPalette;imageoverlayPalette,--palette--;;filePalette</showitem>
</numIndex>
<numIndex index="2">
<showitem>--palette--;LLL:EXT:lang/locallang_tca.xlf:sys_file_reference.imageoverlayPalette;imageoverlayPalette,--palette--;;filePalette</showitem>
</numIndex>
</foreign_types>
<foreign_match_fields>
<fieldname>image</fieldname> <!-- CAUTION!! Replace "fal" with the variable name of this field! -->
</foreign_match_fields>
<appearance type="array">
<newRecordLinkAddTitle>1</newRecordLinkAddTitle>
<headerThumbnail>
<field>uid_local</field>
<height>64</height>
<width>64</width>
</headerThumbnail>
<enabledControls>
<info>1</info>
<new>0</new>
<dragdrop>0</dragdrop>
<sort>1</sort>
<hide>0</hide>
<delete>1</delete>
<localize>1</localize>
</enabledControls>
<createNewRelationLinkTitle>LLL:EXT:frontend/Resources/Private/Language/locallang_ttc.xlf:images.addFileReference</createNewRelationLinkTitle>
</appearance>
<behaviour>
<localizationMode>select</localizationMode>
<localizeChildrenAtParentLocalization>1</localizeChildrenAtParentLocalization>
</behaviour>
<overrideChildTca>
<columns type="array">
<uid_local type="array">
<config type="array">
<appearance type="array">
<elementBrowserType>file</elementBrowserType>
<elementBrowserAllowed>jpg,png,svg,jpeg,gif</elementBrowserAllowed>
</appearance>
</config>
</uid_local>
</columns>
<types type="array">
<numIndex index="2">
<showitem>--palette--;LLL:EXT:lang/locallang_tca.xlf:sys_file_reference.imageoverlayPalette;imageoverlayPalette,--palette--;;filePalette</showitem>
</numIndex>
</types>
</overrideChildTca>
</config>
</TCEforms>
</image>
I have tested this will my all-new typo3 10 projects.
I hope it helps you.
Thank you!
Solution by max.haredoom works :)
Great work, man.
It is strange that it only works without "settings..."
If you need this for a custom content element then you can add something like this to your processor file:
if (isset($processedData['content']['images']) &&
(int) $processedData['content']['images'] > 0) {
$fileRepository = GeneralUtility::makeInstance(\TYPO3\CMS\Core\Resource\FileRepository::class);
$fileObjects = $fileRepository->findByRelation('tt_content', 'image', $processedData['data']['uid']);
// now loop over objects and get sys_file uids via $fileObject->getOriginalFile()->getUid();
}
What about doing it like it is done in the standard content elements?
In the TYPO3 Backend go to the module Configuration
and select $GLOBALS['TCA'] (Table configuration array)
then find the path to tt_content.columns.media.config
select those fields and values and insert it as XML in your definition
I found this. The selected image is saved in tt_content. but it doesn't appear in the backend form after saving.
<options.image1>
<TCEforms>
<label>Bild</label>
<config>
<type>inline</type>
<type>group</type>
<internal_type>db</internal_type>
<maxitems>1</maxitems>
<foreign_table>sys_file_reference</foreign_table>
<foreign_field>uid_foreign</foreign_field>
<foreign_sortby>sorting_foreign</foreign_sortby>
<foreign_table_field>tablenames</foreign_table_field>
<foreign_match_fields>
<fieldname>--feldname--</fieldname>
</foreign_match_fields>
<foreign_label>uid_local</foreign_label>
<foreign_selector>uid_local</foreign_selector>
<foreign_selector_fieldTcaOverride>
<config>
<appearance>
<elementBrowserType>file</elementBrowserType>
<elementBrowserAllowed>gif,jpg,jpeg,tif,tiff,bmp,pcx,tga,png,pdf,ai</elementBrowserAllowed>
</appearance>
</config>
</foreign_selector_fieldTcaOverride>
<appearance>
<elementBrowserType>file</elementBrowserType>
<elementBrowserAllowed>jpg,jpeg,png,gif</elementBrowserAllowed>
</appearance>
<allowed>sys_file</allowed>
<size>5</size>
<minitems>0</minitems>
<maxitems>5</maxitems>
<show_thumbs>1</show_thumbs>
</config>
</TCEforms>
</options.image1>
I found a solution: Please see here: How to create a file upload field in flexform of a custom extbase extension in TYPO3 10?
Or for your convenience:
<T3DataStructure>
<sheets>
<sDEF>
<ROOT>
<TCEforms>
<sheetTitle>Example 1</sheetTitle>
</TCEforms>
<type>array</type>
<el>
<!-- example of a working fal image -->
<images>
<label>FAL-Images</label>
<config>
<type>inline</type>
<foreign_table>sys_file_reference</foreign_table>
<foreign_field>uid_foreign</foreign_field>
<foreign_sortby>sorting_foreign</foreign_sortby>
<foreign_table_field>tablenames</foreign_table_field>
<foreign_match_fields>
<fieldname>image</fieldname>
</foreign_match_fields>
<foreign_label>uid_local</foreign_label>
<foreign_selector>uid_local</foreign_selector>
<overrideChildTca>
<columns>
<uid_local>
<config>
<appearance>
<elementBrowserType>file</elementBrowserType>
<elementBrowserAllowed></elementBrowserAllowed>
</appearance>
</config>
</uid_local>
</columns>
</overrideChildTca>
<filter>
<userFunc>TYPO3\CMS\Core\Resource\Filter\FileExtensionFilter->filterInlineChildren</userFunc>
<parameters>
<allowedFileExtensions></allowedFileExtensions>
<disallowedFileExtensions></disallowedFileExtensions>
</parameters>
</filter>
<appearance>
<useSortable>1</useSortable>
<headerThumbnail>
<field>uid_local</field>
<width>45</width>
<height>45c</height>
</headerThumbnail>
<enabledControls>
<info>1</info>
<new>0</new>
<dragdrop>1</dragdrop>
<sort>0</sort>
<hide>1</hide>
<delete>1</delete>
</enabledControls>
</appearance>
</config>
</images>
<!-- end -->
</el>
</ROOT>
</sDEF>
</sheets>
I got a similar bug after updating Typo3 9.x to Typo3 10.x,
if you want to edit a Field which was created by the DCE Extension.
My past config of a dce element, which gave me the error was:
<config>
<type>group</type>
<internal_type>file</internal_type>
<allowed>jpg,jpeg,png,gif</allowed>
<size>1</size>
<minitems>0</minitems>
<maxitems>1</maxitems>
<show_thumbs>1</show_thumbs>
</config>
After changing the <internal_type> from file to folder the error was gone end everything is fine again. The Backend also told me the option "db" will maybe also work in some cases.
<config>
<type>group</type>
<internal_type>folder</internal_type>
<allowed>jpg,jpeg,png,gif</allowed>
<size>1</size>
<minitems>0</minitems>
<maxitems>1</maxitems>
<show_thumbs>1</show_thumbs>
</config>
Have and issue converting a TemplaVoila based website,
I created the necessary gridelements and used templavoila flexforms for do ing that.
The issue I have is when I try to get the data of the flexforms
<?xml version="1.0" encoding="utf-8" standalone="yes" ?>
<T3DataStructure>
<meta type="array">
<langDisable>1</langDisable>
</meta>
<ROOT type="array">
<tx_templavoila type="array">
<title>ROOT</title>
<description>Select the HTML element on the page which you want to be the overall container element for the template.</description>
</tx_templavoila>
<type>array</type>
<el type="array">
<field_b53fc0 type="array">
<type>array</type>
<tx_templavoila type="array">
<title>Element hinzufügen</title>
<eType>input</eType>
<preview></preview>
</tx_templavoila>
<el type="array">
<field_78a762 type="array">
<type>array</type>
<tx_templavoila type="array">
<title>Element hinzufügen</title>
<eType>input</eType>
<TypoScript></TypoScript>
<proc type="array">
<int>0</int>
<HSC>0</HSC>
<stdWrap></stdWrap>
</proc>
<preview></preview>
</tx_templavoila>
<TCEforms type="array">
<label></label>
<config type="array">
</config>
</TCEforms>
<el type="array">
<field_7b6fd2 type="array">
<type>attr</type>
<tx_templavoila type="array">
<title>Maske</title>
<sample_data type="array">
<numIndex index="0"></numIndex>
</sample_data>
<eType>image</eType>
<TypoScript>10 = IMG_RESOURCE
10.stdWrap.wrap = background-image:url(|);
10.file.import = uploads/tx_templavoila/
10.file.import.current = 1
10.file.import.listNum = 0
</TypoScript>
<proc type="array">
<int>0</int>
<HSC>0</HSC>
<stdWrap></stdWrap>
</proc>
<preview></preview>
</tx_templavoila>
<TCEforms type="array">
<label>Hintergrundbild</label>
<config type="array">
<type>group</type>
<internal_type>file</internal_type>
<allowed>gif,png,jpg,jpeg</allowed>
<max_size>1000</max_size>
<uploadfolder>uploads/tx_templavoila</uploadfolder>
<show_thumbs>1</show_thumbs>
<size>1</size>
<maxitems>1</maxitems>
<minitems>0</minitems>
</config>
</TCEforms>
</field_7b6fd2>
<field_4f69c2 type="array">
<tx_templavoila type="array">
<title>Produktbild</title>
<sample_data type="array">
<numIndex index="0"></numIndex>
</sample_data>
<eType>image</eType>
<TypoScript>10 = IMAGE
10.file.import = uploads/tx_templavoila/
10.file.import.current = 1
10.file.import.listNum = 0</TypoScript>
<preview></preview>
<proc type="array">
<int>0</int>
<HSC>0</HSC>
<stdWrap></stdWrap>
</proc>
</tx_templavoila>
<TCEforms type="array">
<label>Produktbild</label>
<config type="array">
<type>group</type>
<internal_type>file</internal_type>
<allowed>gif,png,jpg,jpeg</allowed>
<max_size>1000</max_size>
<uploadfolder>uploads/tx_templavoila</uploadfolder>
<show_thumbs>1</show_thumbs>
<size>1</size>
<maxitems>1</maxitems>
<minitems>0</minitems>
</config>
</TCEforms>
</field_4f69c2>
<field_1a6a3a type="array">
<tx_templavoila type="array">
<title>Headline</title>
<sample_data type="array">
<numIndex index="0"></numIndex>
</sample_data>
<eType>input</eType>
<proc type="array">
<HSC type="integer">1</HSC>
<stdWrap></stdWrap>
</proc>
<preview></preview>
<TypoScript type="NULL"></TypoScript>
</tx_templavoila>
<TCEforms type="array">
<label>Headline</label>
<config type="array">
<type>input</type>
<size>48</size>
<eval>trim</eval>
</config>
</TCEforms>
</field_1a6a3a>
<field_d696e9 type="array">
<tx_templavoila type="array">
<title>Subline</title>
<sample_data type="array">
<numIndex index="0"></numIndex>
</sample_data>
<eType>input</eType>
<proc type="array">
<HSC type="integer">1</HSC>
<stdWrap></stdWrap>
</proc>
<preview></preview>
<TypoScript type="NULL"></TypoScript>
</tx_templavoila>
<TCEforms type="array">
<label>Subline</label>
<config type="array">
<type>input</type>
<size>48</size>
<eval>trim</eval>
</config>
</TCEforms>
</field_d696e9>
<field_055de1 type="array">
<tx_templavoila type="array">
<title>Text</title>
<sample_data type="array">
<numIndex index="0"></numIndex>
</sample_data>
<eType>rte</eType>
<TypoScript><![CDATA[
10 = TEXT
10.current = 1
10.parseFunc = < lib.parseFunc_RTE]]></TypoScript>
<preview></preview>
</tx_templavoila>
<TCEforms type="array">
<label>Text</label>
<config type="array">
<type>text</type>
<cols>48</cols>
<rows>5</rows>
<softref>rtehtmlarea_images,typolink_tag,images,email[subst],url</softref>
</config>
<defaultExtras>richtext:rte_transform[flag=rte_enabled|mode=ts_css]</defaultExtras>
</TCEforms>
</field_055de1>
<field_373e2b type="array">
<tx_templavoila type="array">
<title>Zum Produkt (Link)</title>
<sample_data type="array">
<numIndex index="0"></numIndex>
</sample_data>
<eType>link</eType>
<TypoScript><![CDATA[10 = TEXT
10.field = field_0db16f
10.ifEmpty = {$SLIDER_INDEX_BTN_PROD}
10.innerWrap = <span>|</span>
10.typolink.parameter.current = 1
10.typolink.ATagParams = class="Button"
10.if.isTrue.field = field_373e2b
]]></TypoScript>
<proc type="array">
<int>0</int>
<HSC>0</HSC>
<stdWrap></stdWrap>
</proc>
<preview></preview>
<TypoScript_constants type="array">
<SLIDER_INDEX_BTN_PROD>{$_CONSTANTS.SLIDER_INDEX_BTN_PROD}</SLIDER_INDEX_BTN_PROD>
</TypoScript_constants>
</tx_templavoila>
<TCEforms type="array">
<label>Zum Produkt (Link)</label>
<config type="array">
<type>input</type>
<size>15</size>
<max>256</max>
<checkbox></checkbox>
<eval>trim</eval>
<wizards type="array">
<_PADDING type="integer">2</_PADDING>
<link type="array">
<type>popup</type>
<title>Link</title>
<icon>link_popup.gif</icon>
<script>browse_links.php?mode=wizard</script>
<JSopenParams>height=300,width=500,status=0,menubar=0,scrollbars=1</JSopenParams>
</link>
</wizards>
</config>
</TCEforms>
</field_373e2b>
<field_3bf1df type="array">
<tx_templavoila type="array">
<title>Zur Anwendung (Link)</title>
<sample_data type="array">
<numIndex index="0"></numIndex>
</sample_data>
<eType>link</eType>
<TypoScript_constants type="array">
<SLIDER_INDEX_BTN_ANW>{$_CONSTANTS.SLIDER_INDEX_BTN_ANW}</SLIDER_INDEX_BTN_ANW>
</TypoScript_constants>
<TypoScript><![CDATA[10 = TEXT
10.value = {$SLIDER_INDEX_BTN_ANW}
10.innerWrap = <span>|</span>
10.typolink.parameter.current = 1
10.typolink.ATagParams = class="Button Weiss"
10.if.isTrue.field = field_3bf1df]]></TypoScript>
<proc type="array">
<int>0</int>
<HSC>0</HSC>
<stdWrap></stdWrap>
</proc>
<preview></preview>
</tx_templavoila>
<TCEforms type="array">
<label>Zur Anwendung (Link)</label>
<config type="array">
<type>input</type>
<size>15</size>
<max>256</max>
<checkbox></checkbox>
<eval>trim</eval>
<wizards type="array">
<_PADDING type="integer">2</_PADDING>
<link type="array">
<type>popup</type>
<title>Link</title>
<icon>link_popup.gif</icon>
<script>browse_links.php?mode=wizard</script>
<JSopenParams>height=300,width=500,status=0,menubar=0,scrollbars=1</JSopenParams>
</link>
</wizards>
</config>
</TCEforms>
</field_3bf1df>
<field_a73d1b type="array">
<tx_templavoila type="array">
<title>360° Teaser</title>
<sample_data type="array">
<numIndex index="0"></numIndex>
</sample_data>
<eType>check</eType>
<TypoScript_constants type="array">
<SLIDER_INDEX_PRODAN>{$_CONSTANTS.SLIDER_INDEX_PRODAN}</SLIDER_INDEX_PRODAN>
</TypoScript_constants>
<TypoScript><![CDATA[10 = COA
10 {
10 = TEXT
10.value = <h2>360
20 = TEXT
20.value = <span>°</span></h2>
30 = TEXT
30.value = {$SLIDER_INDEX_PRODAN}
30.wrap = <p>|</p>
}
10.if.isTrue.field = field_a73d1b
]]></TypoScript>
<proc type="array">
<int>0</int>
<HSC>0</HSC>
<stdWrap></stdWrap>
</proc>
<preview></preview>
</tx_templavoila>
<TCEforms type="array">
<label>360° Teaser</label>
<config type="array">
<type>check</type>
<default type="integer">0</default>
</config>
</TCEforms>
</field_a73d1b>
<field_0db16f type="array">
<tx_templavoila type="array">
<title>Zum Produkt (Titel)</title>
<sample_data type="array">
<numIndex index="0"></numIndex>
</sample_data>
<eType>input</eType>
<proc type="array">
<HSC type="integer">1</HSC>
<stdWrap></stdWrap>
</proc>
<preview></preview>
<TypoScript type="NULL"></TypoScript>
</tx_templavoila>
<TCEforms type="array">
<label>Zum Produkt (Titel)</label>
<config type="array">
<type>input</type>
<size>48</size>
<eval>trim</eval>
</config>
</TCEforms>
</field_0db16f>
<field_ad4f50 type="array">
<tx_templavoila type="array">
<title>Video</title>
<sample_data type="array">
<numIndex index="0"></numIndex>
</sample_data>
<eType>check</eType>
<TypoScript><![CDATA[10 = COA
10 {
10 = TEXT
10.field = field_0db16f
10.wrap = <span>|</span>
20 = TEXT
20.field = field_1a6a3a
20.wrap = <h4>|</h4>
30 = TEXT
30.field = field_055de1
30.wrap = <h3>|</h3>
}
10.if.isTrue.field = field_ad4f50]]></TypoScript>
<preview></preview>
<proc type="array">
<int>0</int>
<HSC>0</HSC>
<stdWrap></stdWrap>
</proc>
</tx_templavoila>
<TCEforms type="array">
<label>Video</label>
<config type="array">
<type>check</type>
<default type="integer">0</default>
</config>
</TCEforms>
</field_ad4f50>
<field_b2b651 type="array">
<type>attr</type>
<tx_templavoila type="array">
<title>Youtube-Code</title>
<sample_data type="array">
<numIndex index="0"></numIndex>
</sample_data>
<eType>input</eType>
<TypoScript type="NULL"></TypoScript>
<proc type="array">
<int>0</int>
<HSC>1</HSC>
<stdWrap></stdWrap>
</proc>
<preview></preview>
</tx_templavoila>
<TCEforms type="array">
<label>Youtube-Code</label>
<config type="array">
<type>input</type>
<size>48</size>
<eval>trim</eval>
</config>
</TCEforms>
</field_b2b651>
</el>
</field_78a762>
</el>
<section>1</section>
</field_b53fc0>
</el>
</ROOT>
</T3DataStructure>
tt_content.gridelements_pi1.20.10.setup {
# ID of gridelement // eLearning 2 Spalter
1 < temp.gridelements.defaultGridSetup
1 {
stdWrap.cObject = COA
stdWrap.cObject {
10 = TEXT
10 {
data = field:flexform_field_4f69c2
wrap = <H1>|</H1>
}
20 = IMAGE
20{
file{
import.data = field:flexform_field_7b6fd2
width = 256
}
}
}
wrap = <li>|</li>
}
}
Gridelements seems not supporting flexforms with sections in it what I did was using another extension to solve the work, called XPATH Content Object https://typo3.org/extensions/repository/view/cobj_xpath
10 = XPATH
10 {
source.data = DB:tt_content:{field:uid}:pi_flexform
source.data.insertData = 1
return = string
expression = //field[#index='field_7b6fd2']/value
# configure the resultObj
resultObj {
cObjNum = 1
1.current = 1
1.wrap = <img src="uploads/tx_templavoila/|" />
}
}
You use the wrong field for the header (header field should be field_1a6a3a). Also, you must set the path to the imported image as following
20 = IMAGE
20 {
file {
import = uploads/tx_templavoila/
import.data = field:flexform_field_7b6fd2
width = 256
}
}
I have a question regarding templavoila and Fluid.
I migrated my website from TYPO3 4.7.x to TYPO3 6.2.x where the TYPO3 4.7.x uses Templavoila.
I now want to translate Templavoila code to Fluid/Flux code.
for example I have a TemplaVoila Flexible CE for dropdown:
<?xml version="1.0" encoding="utf-8" standalone="yes" ?>
<T3DataStructure>
<meta type="array">
<langDisable>1</langDisable>
</meta>
<ROOT type="array">
<tx_templavoila type="array">
<title>ROOT</title>
<description>description</description>
</tx_templavoila>
<type>array</type>
<el type="array">
<field_dropdown_toggle type="array">
<tx_templavoila type="array">
<title>Text Dropdown Toggle</title>
<sample_data type="array">
<numIndex index="0">Style</numIndex>
</sample_data>
<eType>input</eType>
<proc type="array">
<HSC type="integer">1</HSC>
</proc>
<TypoScript type="NULL"></TypoScript>
</tx_templavoila>
<TCEforms type="array">
<config type="array">
<type>input</type>
<size>200</size>
<eval>trim</eval>
</config>
<label>Text Dropdown Toggle</label>
</TCEforms>
</field_dropdown_toggle>
<field_dropdown_menu type="array">
<tx_templavoila type="array">
<title>Dropdown-Menü</title>
<sample_data type="array">
<numIndex index="0"></numIndex>
</sample_data>
<eType>ce</eType>
<TypoScript>
10 = RECORDS
10.source.current = 1
10.tables = tt_content
</TypoScript>
<oldStyleColumnNumber type="integer">0</oldStyleColumnNumber>
</tx_templavoila>
<TCEforms type="array">
<config type="array">
<type>group</type>
<internal_type>db</internal_type>
<allowed>tt_content</allowed>
<size>5</size>
<maxitems>200</maxitems>
<minitems>0</minitems>
<multiple>1</multiple>
<show_thumbs>1</show_thumbs>
</config>
<label>Dropdown-Menü</label>
</TCEforms>
</field_dropdown_menu>
<field_dropdown_header type="array">
<tx_templavoila type="array">
<title>Überschrift</title>
<sample_data type="array">
<numIndex index="0"></numIndex>
</sample_data>
<eType>none</eType>
<TypoScript>
10 = TEXT
10.data = register:tx_templavoila_pi1.parentRec.header
</TypoScript>
<preview></preview>
</tx_templavoila>
</field_dropdown_header>
<field_dropdown_header_layout type="array">
<type>attr</type>
<tx_templavoila type="array">
<title>Header Typ</title>
<eType>none</eType>
<TypoScript>
10 = TEXT
10 {
data = register:tx_templavoila_pi1.parentRec.header_layout
wrap = dropdown-header h|
}
</TypoScript>
<proc type="array">
<HSC type="integer">1</HSC>
</proc>
</tx_templavoila>
</field_dropdown_header_layout>
</el>
</ROOT>
</T3DataStructure>
and I would like to transform this code to flux like this:
<flux:field.input name="textToggle" label="Text Dropdown Toggle" />
Is there a documentation how to transform?
here is the screenshot of templavoila
How do I get exactly like using flux/fluid. I can get Input field but cannot get dropdown-menu.
Can anyone please suggest me what to do.
If my question is not clear, please let me know and I will try to explaiin it again.
I would appreciate your Help.
The extension sf_tv2fluidge (I'm the author) only supports migration of TV flexible content elements to GridElements. Since you are using flux, the migration will not work with sf_tv2fluidge.
You could try to use the fork of sf_tv2fluidge from techniConcept. They support flux, but require fluidpages and fluidcontent.
I'm trying to render multiple FCE (gridelements content elements) of the same type. However, images are not rendered.
The flexform defining that FCE has an image field exactly like this:
<image>
<TCEforms>
<config>
<type>inline</type>
<appearance type="array">
<createNewRelationLinkTitle>LLL:EXT:myext/Resources/Private/Language/locallang_db.xlf:createNewRelationLinkTitle</createNewRelationLinkTitle>
<headerThumbnail type="array">
<field>uid_local</field>
<height>45c</height>
<width>45</width>
</headerThumbnail>
</appearance>
<foreign_field>uid_foreign</foreign_field>
<foreign_label>uid_local</foreign_label>
<foreign_match_fields type="array">
<fieldname>image</fieldname>
</foreign_match_fields>
<foreign_selector>uid_local</foreign_selector>
<foreign_selector_fieldTcaOverride type="array">
<config type="array">
<appearance type="array">
<elementBrowserAllowed>gif,jpg,jpeg,tif,tiff,bmp,pcx,tga,png,pdf,ai</elementBrowserAllowed>
<elementBrowserType>file</elementBrowserType>
</appearance>
</config>
</foreign_selector_fieldTcaOverride>
<foreign_sortby>sorting_foreign</foreign_sortby>
<foreign_table>sys_file_reference</foreign_table>
<foreign_table_field>tablenames</foreign_table_field>
<maxitems>1</maxitems>
<minitems>0</minitems>
</config>
</TCEforms>
</image>
The TypoScript defining the element looks this way:
tt_content.gridelements_pi1.20.10.setup {
3 < lib.gridelements.defaultGridSetup
3 {
stdWrap.cObject = COA
stdWrap.cObject {
10 = IMAGE
10 {
stdWrap.wrap = <div class="media-left">|</div>
file {
import.data = field:flexform_image
treatIdAsReference = 1
import.listNum = 0
}
}
}
}
}
The issue
When putting on element onto a page, the image is displayed. Putting multiple elements on the same page leads to each element rendering the image from the first FCE put onto the page. As soon as I edit an FCE (e.g. the second placed element), no images are displayed at all.
How can I solve this?
You need to be sure that filename is unique for every flexform field:
<foreign_match_fields type="array">
<fieldname>image</fieldname>
</foreign_match_fields>
Best is to use the real field name. For example flexform_image.
Here is the flexform
<T3DataStructure>
<meta>
<langDisable>1</langDisable>
</meta>
<ROOT type="array">
<type>array</type>
<el type="array">
<bgimage>
<TCEforms>
<label>Background Image</label>
<config>
<type>inline</type>
<foreign_field>uid_foreign</foreign_field>
<foreign_label>uid_local</foreign_label>
<foreign_match_fields type="array">
<fieldname>bgimage</fieldname>
</foreign_match_fields>
<foreign_selector>uid_local</foreign_selector>
<foreign_selector_fieldTcaOverride type="array">
<config type="array">
<appearance type="array">
<elementBrowserAllowed>gif,jpg,jpeg,tif,tiff,bmp,pcx,tga,png,pdf,ai</elementBrowserAllowed>
<elementBrowserType>file</elementBrowserType>
</appearance>
</config>
</foreign_selector_fieldTcaOverride>
<foreign_sortby>sorting_foreign</foreign_sortby>
<foreign_table>sys_file_reference</foreign_table>
<maxitems>1</maxitems>
<minitems>0</minitems>
</config>
</TCEforms>
</bgimage>
</el>
</ROOT>
</T3DataStructure>