Eigene Kontent-Elemente mit Typo3 10.4: Unterschied zwischen den Versionen
Aus Debacher-Wiki
(→grid4col.html) |
(→udroundbox.html) |
||
| Zeile 940: | Zeile 940: | ||
</f:if> | </f:if> | ||
| − | <div class="boxUD"> | + | <div class="boxUD" id="box-{data.uid}"> |
<div class="boxUDContent" style=" | <div class="boxUDContent" style=" | ||
<f:if condition="{data.flexform_bordercolor}"> | <f:if condition="{data.flexform_bordercolor}"> | ||
Version vom 22. November 2020, 13:42 Uhr
Nach dem zwischenzeitlichen Ende von TemplaVoila und der Umstellung des Templating auf Fluid musste ich mir für eigene Kontent-Elemente eine neue Umgebung suchen. Nach den Beschreibungen kommen in Frage:
- Mask
- DCE
- Gridelements
Für Gridelements habe ich mich entschieden, da nur damit beliebige Inhalte innerhalb der eigenen Elemente möglich sind. Ich habe mir in der Zwischenzeit eine Reihe von eigenen Elementen erarbeitet (wie oft bei Typo3 sehr mühsam erarbeitet).
Ich habe festgestellt, dass die Entwicklung weiterer Elemente für mich flexibler zu gestalten ist, wenn ich die Definitionen in Dateien auslagere, da ich auch viele alte Typo3-Systeme umstellen muss. Meine gridelemente habe ich in eine eigene Extension nettgrids ausgelagert. Die folgende Beschreibung bezieht sich auf diese Extension.
Inhaltsverzeichnis
Nettgrids
Die Extension stellt momentan 11 Elemente zur Verfügung, die im Backend unter Raster-Elemente augewählt werden können.
Installation
Die Installation ist relativ einfach. Es muss nur die Extension installiert werden.
Dann muss noch das statische Template eingebunden werden und zwar nach dem von gridelements.
Danach stehen die Elemente zur Verfügung.
Konfiguration
Eine Konfiguration ist nicht notwendig und bisher auch nicht möglich. In einer späteren Version will ich die Einbindung des Flexsliders konfigurierbar machen.
Was natürlich möglich und sinnvoll ist ist die Anpassung der Elemente per CSS.
Für alle Elemente notwendig
ext_emconf.php
<?php
/***************************************************************
* Extension Manager/Repository config file for ext: "nettgrids"
*
* Auto generated by Extension Builder 2017-07-20
*
* Manual updates:
* Only the data in the array - anything else is removed by next write.
* "version" and "dependencies" must not be touched!
***************************************************************/
$EM_CONF[$_EXTKEY] = [
'title' => 'Netthelp Grids',
'description' => 'Gridelements from Netthelp, based on Bootstrap and Extension gridelements',
'category' => 'misc',
'author' => 'Uwe Debacher',
'author_email' => 'typo3@meine-maildomain.de',
'state' => 'stable',
'internal' => '',
'uploadfolder' => '0',
'createDirs' => '',
'clearCacheOnLoad' => 0,
'version' => '2.0.3',
'constraints' => [
'depends' => [
'typo3' => '8.6.0-10.9.99',
'gridelements' => '',
],
'conflicts' => [],
'suggests' => [],
],
'autoload' => [
'psr-4' => [
'Netthelp\\nettgrids\\ViewHelpers\\' => 'Classes'
]
],
];
Den Bereich autoload habe ich nach nervigen Recherchen ergänzt. Er dient dazu dass die ViewHelper gefunden werden. Der Text unter http://insight.helhum.io/post/130876393595/how-to-configure-class-loading-for-extensions-in hat mir hier weiter geholfen.
ext_localconf.php
Es müssen zwei Typoscript-Elemente eingebunden werden. Ein PagTSConfig -Element (hier tsconfig.ts) für die Backend-Definition und Ein TypoSript-Element (hier setup.txt) quasi für die Frontend-Definitionen. Diese beiden Dateien binde ich über die Datei ext_localconf quasi automatisch mit der Extension ein.
<?php
if (!defined('TYPO3_MODE')) { die('Access denied.'); }
call_user_func(
function ($extConfString) {
// Add pageTS config
\TYPO3\CMS\Core\Utility\ExtensionManagementUtility::addPageTSConfig('<INCLUDE_TYPOSCRIPT: source="FILE:EXT:nettgrids/Configuration/TypoScript/tsconfig.ts">');
},$_EXTCONF
);
?>
Bei den Dateinamen und Pfaden habe ich versucht mich weitestgehend an die Standards zu halten, die ich gefunden habe.
ext_tables.php
<?php
defined('TYPO3_MODE') || die('Access denied.');
call_user_func(
function()
{
\TYPO3\CMS\Core\Utility\ExtensionManagementUtility::addStaticFile('nettgrids', 'Configuration/TypoScript', 'Netthelp Grids');
}
);
tsconfig.ts
In dieser Datei finden sich alle Inhalte, die bei den Elementen im Backend unter Rasterkonfiguration zu finden waren, in einer gemeinsamen Datei. Es gibt aber drei deutliche Veränderungen:
- Am Anfang steht statt mod.web_layout.BackendLayouts hier tx_gridelements
- Im Backend gab es nach config ein Element backend_layout, das muss man hier weglassen, sonst tauchen die Elemente als Backend-Layout der Seite auf
- Mit dem frame=2 erreiche ich, dass im Seiten-Backend der Name des Elemente angezeigt wird, in Grün
tx_gridelements {
# boolean; Usually if the ID of the TSconfig is the same like the record ID of grid elements,
# the configuration of the TSconfig overrides the record configuration recursively (!).
# If this option is set the record configuration overrides the TSconfig.
overruleRecords = 1
# string; With this option you can disable single layouts. Use the record or TSconfig ID.
#excludeLayoutIds = 3,slider
setup {
# mixed; This will be the layout ID. It can be a string or a integer.
udpanel {
title = UDPanel
description = Bootstrap Panel mit wählbarer Klasse
icon = EXT:nettgrids/Resources/Public/Bilder/udpanel.png
frame = 2
config {
colCount = 1
rowCount = 1
rows {
1 {
columns {
1 {
name = Inhalt
colPos = 110
} #1
} #columns
} #1
} #rows
} #config
flexformDS = FILE:EXT:nettgrids/Configuration/FlexForm/flexform_udpanel.xml
} #udpanel
galerie {
title = Galerie
description = Galerie für Bilder aus einem Verzeichnis
# integer; Colored frame. 0, 1 = red, 2 = green, 3 = blue
frame = 2
icon = EXT:nettgrids/Resources/Public/Bilder/vgalerie.png
config {
colCount = 1
rowCount = 1
rows {
1 {
columns {
1 {
name = Inhalt
colPos = 110
} #1
} #columns
} #1
} #rows
} #config
flexformDS = FILE:EXT:nettgrids/Configuration/FlexForm/flexform_galerie.xml
} #gallerie
verzeichnisslider {
title = Verzeichnisslider
description = Slider für Bilder aus einem Verzeichnis
icon = EXT:nettgrids/Resources/Public/Bilder/vslider.png
# integer; Colored frame. 0, 1 = red, 2 = green, 3 = blue
frame = 2
config {
colCount = 1
rowCount = 1
rows {
1 {
columns {
1 {
name = Inhalt
colPos = 110
} #1
} #columns
} #1
} #rows
} #config
flexformDS = FILE:EXT:nettgrids/Configuration/FlexForm/flexform_vslider.xml
} #verzeichnisslider
bilderslider {
title = Bilderslider
description = Slider nur für Bilder ohne extra Content-Elemente
frame = 2
icon = EXT:nettgrids/Resources/Public/Bilder/imageslider.png
config {
colCount = 1
rowCount = 1
rows {
1 {
columns {
1 {
name = Inhalt
colPos = 110
} #1
} #columns
} #1
} #rows
} #config
flexformDS = FILE:EXT:nettgrids/Configuration/FlexForm/flexform_bilderslider.xml
} #bilderslider
contentslider {
title = Contentslider
description = Die kompletten Inhaltselemente Sliden
icon = EXT:nettgrids/Resources/Public/Bilder/contentslider.png
frame = 2
config {
colCount = 1
rowCount = 1
rows {
1 {
columns {
1 {
name = Inhalt
colPos = 110
} #1
} #columns
} #1
} #rows
} #config
flexformDS = FILE:EXT:nettgrids/Configuration/FlexForm/flexform_contentslider.xml
} #contentslider
tabs {
title = Tabs mit Elementen
description = Die Inhaltselemente werden in Tabs angeordnet
icon = EXT:nettgrids/Resources/Public/Bilder/tabs.png
# topLevelLayout = 1
frame = 2
config {
colCount = 1
rowCount = 1
rows {
1 {
columns {
1 {
name = TabInhalt
colPos = 110
} #1
} #columns
} #1
} #rows
} #config
} #tabs
accordion {
title = Accordion
description = Die Inhaltselemente werden als Akkordion angeordnet
icon = EXT:nettgrids/Resources/Public/Bilder/accordion.png
frame = 2
config {
colCount = 1
rowCount = 1
rows {
1 {
columns {
1 {
name = Inhalt
colPos = 110
} #1
} #columns
} #1
} #rows
} #config
} #accordion
udroundbox {
title = UDRoundBox
description = Box mit Rahmen, Hintergrund und runden Ecken
icon = EXT:nettgrids/Resources/Public/Bilder/UDroundBox.png
frame = 2
config {
colCount = 1
rowCount = 1
rows {
1 {
columns {
1 {
name = Inhalt
colPos = 110
} #1
} #columns
} #1
} #rows
} #config
flexformDS = FILE:EXT:nettgrids/Configuration/FlexForm/flexform_udroundbox.xml
} #udroundbox
spalten2 {
title = 2-spaltig flexibel
description = 2 Spalten, Breiten-Verhältnis in einem im 12er-Rester wählbar
icon = EXT:nettgrids/Resources/Public/Bilder/spalten2.png
frame = 2
config {
colCount = 2
rowCount = 1
rows {
1 {
columns {
1 {
name = SpalteLinks
colPos = 110
}
2 {
name = SpalteRechts
colPos = 111
}
}
}
}
} #config
flexformDS = FILE:EXT:nettgrids/Configuration/FlexForm/flexform_spalten2.xml
} #spalten2
spalten3 {
title = 3-spaltig flexibel
description = 3 Spalten, Breiten-Verhältnis in einem im 12er-Rester wählbar
icon = EXT:nettgrids/Resources/Public/Bilder/spalten3.png
frame = 2
config {
colCount = 3
rowCount = 1
rows {
1 {
columns {
1 {
name = SpalteLinks
colPos = 110
}
2 {
name = SpalteMitte
colPos = 111
}
3 {
name = SpalteRechts
colPos = 112
}
}
}
}
} #config
flexformDS = FILE:EXT:nettgrids/Configuration/FlexForm/flexform_spalten3.xml
} #spalten3
spalten4 {
title = 4-spaltig flexibel
description = 4 Spalten, Breiten-Verhältnis in einem im 12er-Rester wählbar
icon = EXT:nettgrids/Resources/Public/Bilder/spalten4.png
frame = 2
config {
colCount = 4
rowCount = 1
rows {
1 {
columns {
1 {
name = SpalteLinks
colPos = 110
}
2 {
name = SpalteMitteLinks
colPos = 111
}
3 {
name = SpalteMitteRechts
colPos = 112
}
4 {
name = SpalteRechts
colPos = 113
}
}
}
}
} #config
flexformDS = FILE:EXT:nettgrids/Configuration/FlexForm/flexform_spalten4.xml
} #spalten4
} #setup
} #tx_gridelements
Bei den einzelnen Elementen werden dann auch die FlexForm-Dateien für die Gestaltung im Backend eingebunden. Bei einigen Elementen (z.B. tabs) ist kein FlexForm angegeben, da keine eigenen Felder benutzt werden, sondern nur Inhaltselemente.
Die Koppelung mit den Typosript-Elementen für das Frontend erfolgt über die Bezeichner.
constants.ts
plugin.nettgrids {
#cat=plugin.nettgrids/other; type=boolean; label=Binde Flexslider Js und CSS automatisch mit ein
config.flexslider = 1
}
Damit kann die Einbindung der Flexslider-Dateien verhindert werden, siehe auch die letzten Zeilen in setup.txt.
setup.txt
tt_content.gridelements_pi1.20.10.setup {
udpanel < lib.gridelements.defaultGridSetup
udpanel {
cObject = FLUIDTEMPLATE
cObject.file = EXT:nettgrids/Resources/gridelements/Private/udpanel.html
}
galerie < lib.gridelements.defaultGridSetup
galerie {
cObject = FLUIDTEMPLATE
cObject {
file = EXT:nettgrids/Resources/gridelements/Private/verzeichnisgalerie.html
variables {
SpalteMd = TEXT
SpalteMd.data = field:flexform_cols
SpalteMd.split {
token = -
returnKey = 1
cObjNum = 1
1.current = 1
}
SpalteSm = TEXT
SpalteSm.data = field:flexform_cols
SpalteSm.split {
token = -
returnKey = 2
cObjNum = 1
1.current = 1
}
SpalteXs = TEXT
SpalteXs.data = field:flexform_cols
SpalteXs.split {
token = -
returnKey = 3
cObjNum = 1
1.current = 1
}
SpalteLg = TEXT
SpalteLg.data = field:flexform_cols
SpalteLg.split {
token = -
returnKey = 0
cObjNum = 1
1.current = 1
}
}
}
}
verzeichnisslider < lib.gridelements.defaultGridSetup
verzeichnisslider {
cObject = FLUIDTEMPLATE
cObject.file = EXT:nettgrids/Resources/gridelements/Private/verzeichnisslider.html
}
bilderslider < lib.gridelements.defaultGridSetup
bilderslider {
cObject = FLUIDTEMPLATE
cObject.file = EXT:nettgrids/Resources/gridelements/Private/bilderslider.html
}
contentslider < lib.gridelements.defaultGridSetup
contentslider {
cObject = FLUIDTEMPLATE
cObject.file = EXT:nettgrids/Resources/gridelements/Private/contentslider.html
}
tabs < lib.gridelements.defaultGridSetup
tabs {
cObject = FLUIDTEMPLATE
cObject.file = EXT:nettgrids/Resources/gridelements/Private/tabs.html
}
udroundbox < lib.gridelements.defaultGridSetup
udroundbox {
cObject = FLUIDTEMPLATE
cObject.file = EXT:nettgrids/Resources/gridelements/Private/udroundbox.html
}
accordion < lib.gridelements.defaultGridSetup
accordion {
cObject = FLUIDTEMPLATE
cObject.file = EXT:nettgrids/Resources/gridelements/Private/accordion.html
}
spalten2 < lib.gridelements.defaultGridSetup
spalten2 {
cObject = FLUIDTEMPLATE
cObject {
file = EXT:nettgrids/Resources/gridelements/Private/grid2col.html
variables {
SpalteLinks = TEXT
SpalteLinks.data = field:flexform_cols
SpalteLinks.split {
token = -
returnKey = 0
cObjNum = 1
1.current = 1
}
SpalteRechts = TEXT
SpalteRechts.data = field:flexform_cols
SpalteRechts.split {
token = -
returnKey = 1
cObjNum = 1
1.current = 1
}
}
}
}
spalten3 < lib.gridelements.defaultGridSetup
spalten3 {
cObject = FLUIDTEMPLATE
cObject {
file = EXT:nettgrids/Resources/gridelements/Private/grid3col.html
variables {
SpalteLinks = TEXT
SpalteLinks.data = field:flexform_cols
SpalteLinks.split {
token = -
returnKey = 0
cObjNum = 1
1.current = 1
}
SpalteMitte = TEXT
SpalteMitte.data = field:flexform_cols
SpalteMitte.split {
token = -
returnKey = 1
cObjNum = 1
1.current = 1
}
SpalteRechts = TEXT
SpalteRechts.data = field:flexform_cols
SpalteRechts.split {
token = -
returnKey = 2
cObjNum = 1
1.current = 1
}
}
}
}
spalten4 < lib.gridelements.defaultGridSetup
spalten4 {
cObject = FLUIDTEMPLATE
cObject {
file = EXT:nettgrids/Resources/gridelements/Private/grid4col.html
variables {
SpalteLinks = TEXT
SpalteLinks.data = field:flexform_cols
SpalteLinks.split {
token = -
returnKey = 0
cObjNum = 1
1.current = 1
}
SpalteMitteLinks = TEXT
SpalteMitteLinks.data = field:flexform_cols
SpalteMitteLinks.split {
token = -
returnKey = 1
cObjNum = 1
1.current = 1
}
SpalteMitteRechts = TEXT
SpalteMitteRechts.data = field:flexform_cols
SpalteMitteRechts.split {
token = -
returnKey = 2
cObjNum = 1
1.current = 1
}
SpalteRechts = TEXT
SpalteRechts.data = field:flexform_cols
SpalteRechts.split {
token = -
returnKey = 3
cObjNum = 1
1.current = 1
}
}
}
}
} #tt_content
[{$plugin.nettgrids.config.flexslider} == 1]
page {
includeCSS.flexslider2 = EXT:nettgrids/Resources/gridelements/Public/Flexslider2/flexslider.css
includeJSFooterlibs.flexslider2 = EXT:nettgrids/Resources/gridelements/Public/Flexslider2/jquery.flexslider-min.js
}
[global]
In der Regel passiert hier nicht mehr, als die Einbindung der Template-Dateien. Für die Slider binde ich dann auch noch das notwendige Javascript und CSS ein. Das Einbinden dieser Dateien kann über den Konstanten-Editor verhindert werden. Dann kann man die Positionierung dieser Einbindungen innerhalb der Seite selbst bestimmen.
2 Spalten
flexform_spalten2.xml
Ursprünglich habe ich mehrere zweispaltige Elemente benutzt. Einfacher und flexibler ist es nur ein Element zu nutzen und die Spaltenbreiten konfigurierbar zu machen. Grundlage ist das 12er Raster von Bootstrap.
<?xml version="1.0" encoding="UTF-8"?>
<T3DataStructure>
<ROOT type="array">
<type>array</type>
<el type="array">
<cols type="array">
<TCEforms type="array">
<label>Spaltenverhältnis in %</label>
<config type="array">
<type>select</type>
<renderType>selectSingle</renderType>
<default>6-6</default>
<items type="array">
<numindex index="0" type="array">
<numindex index="0">8 / 92</numindex>
<numindex index="1">1-11</numindex>
</numindex>
<numindex index="1" type="array">
<numindex index="0">17 / 83</numindex>
<numindex index="1">2-10</numindex>
</numindex>
<numindex index="2" type="array">
<numindex index="0">25 / 75</numindex>
<numindex index="1">3-9</numindex>
</numindex>
<numindex index="3" type="array">
<numindex index="0">33 / 66</numindex>
<numindex index="1">4-8</numindex>
</numindex>
<numindex index="4" type="array">
<numindex index="0">42 / 58</numindex>
<numindex index="1">5-7</numindex>
</numindex>
<numindex index="5" type="array">
<numindex index="0">50 / 50</numindex>
<numindex index="1">6-6</numindex>
</numindex>
<numindex index="6" type="array">
<numindex index="0">58 / 42</numindex>
<numindex index="1">7-5</numindex>
</numindex>
<numindex index="7" type="array">
<numindex index="0">66 / 33</numindex>
<numindex index="1">8-4</numindex>
</numindex>
<numindex index="8" type="array">
<numindex index="0">75 / 25</numindex>
<numindex index="1">9-3</numindex>
</numindex>
<numindex index="9" type="array">
<numindex index="0">83 / 17</numindex>
<numindex index="1">10-2</numindex>
</numindex>
<numindex index="10" type="array">
<numindex index="0">92 / 8</numindex>
<numindex index="1">11-1</numindex>
</numindex>
</items>
<minitems>0</minitems>
<maxitems>1</maxitems>
<size>1</size>
</config>
</TCEforms>
</cols>
</el>
</ROOT>
</T3DataStructure>
grid2col.html
<f:if condition="{data.header}">
<f:then><h1 class="pagetitle">{data.header}</h1></f:then>
</f:if>
<div class="row" id="row-{data.uid}">
<div class="col-md-{SpalteLinks}">
<f:format.raw>{data.tx_gridelements_view_column_110}</f:format.raw>
</div>
<div class="col-md-{SpalteRechts}">
<f:format.raw>{data.tx_gridelements_view_column_111}</f:format.raw>
</div>
</div>
3 Spalten
flexform_spalten3.xml
<?xml version="1.0" encoding="UTF-8"?>
<T3DataStructure>
<ROOT type="array">
<type>array</type>
<el type="array">
<cols type="array">
<TCEforms type="array">
<label>Spaltenverhältnis in %</label>
<config type="array">
<type>select</type>
<renderType>selectSingle</renderType>
<default>4-4-4</default>
<items type="array">
<numindex index="0" type="array">
<numindex index="0">8 / 84 / 8</numindex>
<numindex index="1">1-10-1</numindex>
</numindex>
<numindex index="1" type="array">
<numindex index="0">84 / 8 / 8</numindex>
<numindex index="1">10-1-1</numindex>
</numindex>
<numindex index="2" type="array">
<numindex index="0">8 / 8 / 84</numindex>
<numindex index="1">1-1-10</numindex>
</numindex>
<numindex index="3" type="array">
<numindex index="0">17 / 66 / 17</numindex>
<numindex index="1">2-8-2</numindex>
</numindex>
<numindex index="4" type="array">
<numindex index="0">66 / 17 / 17</numindex>
<numindex index="1">8-2-2</numindex>
</numindex>
<numindex index="5" type="array">
<numindex index="0">17 / 17 / 66</numindex>
<numindex index="1">2-2-8</numindex>
</numindex>
<numindex index="6" type="array">
<numindex index="0">25 / 50 / 25</numindex>
<numindex index="1">3-6-3</numindex>
</numindex>
<numindex index="7" type="array">
<numindex index="0">50 / 25 / 25</numindex>
<numindex index="1">6-3-3</numindex>
</numindex>
<numindex index="8" type="array">
<numindex index="0">25 / 25 / 50</numindex>
<numindex index="1">3-3-6</numindex>
</numindex>
<numindex index="9" type="array">
<numindex index="0">33 / 33 / 33</numindex>
<numindex index="1">4-4-4</numindex>
</numindex>
</items>
<minitems>0</minitems>
<maxitems>1</maxitems>
<size>1</size>
</config>
</TCEforms>
</cols>
</el>
</ROOT>
</T3DataStructure>
grid3col.html
<f:if condition="{data.header}">
<f:then><h1 class="pagetitle">{data.header}</h1></f:then>
</f:if>
<div class="row" id="row-{data.uid}">
<div class="col-md-{SpalteLinks}">
<f:format.raw>{data.tx_gridelements_view_column_110}</f:format.raw>
</div>
<div class="col-md-{SpalteMitte}">
<f:format.raw>{data.tx_gridelements_view_column_111}</f:format.raw>
</div>
<div class="col-md-{SpalteRechts}">
<f:format.raw>{data.tx_gridelements_view_column_112}</f:format.raw>
</div>
</div>
4 Spalten
flexform_spalten4.xml
<?xml version="1.0" encoding="UTF-8"?>
<T3DataStructure>
<ROOT type="array">
<type>array</type>
<el type="array">
<cols type="array">
<TCEforms type="array">
<label>Spaltenverhältnis in %</label>
<config type="array">
<type>select</type>
<renderType>selectSingle</renderType>
<default>3-3-3-3</default>
<items type="array">
<numindex index="0" type="array">
<numindex index="0">8 / 42 / 42 / 8</numindex>
<numindex index="1">1-5-5-1</numindex>
</numindex>
<numindex index="1" type="array">
<numindex index="0">42 / 8 / 8 / 42</numindex>
<numindex index="1">5-1-1-5</numindex>
</numindex>
<numindex index="2" type="array">
<numindex index="0">8 / 42 / 8 / 42</numindex>
<numindex index="1">1-5-1-5</numindex>
</numindex>
<numindex index="3" type="array">
<numindex index="0">42 / 8 / 42 / 8</numindex>
<numindex index="1">5-1-5-1</numindex>
</numindex>
<numindex index="4" type="array">
<numindex index="0">17 / 33 / 33 / 17</numindex>
<numindex index="1">2-4-4-2</numindex>
</numindex>
<numindex index="5" type="array">
<numindex index="0">33 / 17 / 17 / 33</numindex>
<numindex index="1">4-2-2-4</numindex>
</numindex>
<numindex index="6" type="array">
<numindex index="0">17 / 33 / 17 / 33</numindex>
<numindex index="1">2-4-2-4</numindex>
</numindex>
<numindex index="7" type="array">
<numindex index="0">33 / 17 / 17 / 33</numindex>
<numindex index="1">4-2-2-4</numindex>
</numindex>
<numindex index="8" type="array">
<numindex index="0">25 / 25 / 25 / 25</numindex>
<numindex index="1">3-3-3-3</numindex>
</numindex>
</items>
<minitems>0</minitems>
<maxitems>1</maxitems>
<size>1</size>
</config>
</TCEforms>
</cols>
</el>
</ROOT>
</T3DataStructure>
grid4col.html
<f:if condition="{data.header}">
<f:then><h1 class="pagetitle">{data.header}</h1></f:then>
</f:if>
<div class="row" id="row-{data.uid}">
<div class="col-md-{SpalteLinks}">
<f:format.raw>{data.tx_gridelements_view_column_110}</f:format.raw>
</div>
<div class="col-md-{SpalteMitteLinks}">
<f:format.raw>{data.tx_gridelements_view_column_111}</f:format.raw>
</div>
<div class="col-md-{SpalteMitteRechts}">
<f:format.raw>{data.tx_gridelements_view_column_112}</f:format.raw>
</div>
<div class="col-md-{SpalteRechts}">
<f:format.raw>{data.tx_gridelements_view_column_113}</f:format.raw>
</div>
</div>
udroundbox
flexform_udroundbox.xml
<?xml version="1.0" encoding="UTF-8"?>
<T3DataStructure>
<ROOT type="array">
<type>array</type>
<el type="array">
<bgcolor>
<TCEforms>
<label>Hintergrundfarbe (#eee wenn leer)</label>
<config>
<type>input</type>
<size>20</size>
<max>30</max>
<eval>trim</eval>
</config>
</TCEforms>
</bgcolor>
<bordercolor>
<TCEforms>
<label>Rahmenfarbe (#aaa wenn leer)</label>
<config>
<type>input</type>
<size>20</size>
<max>30</max>
<eval>trim</eval>
</config>
</TCEforms>
</bordercolor>
<borderradius>
<TCEforms>
<label>Rahmenradius (10px wenn leer)</label>
<config>
<type>input</type>
<size>20</size>
<max>30</max>
<eval>trim</eval>
</config>
</TCEforms>
</borderradius>
</el>
</ROOT>
</T3DataStructure>
udroundbox.html
Diese Konfiguration habe ich aus alten TemplaVoila-Zeiten übernommen.
<f:if condition="{data.header}">
<f:then><h1 class="pagetitle">{data.header}</h1></f:then>
</f:if>
<div class="boxUD" id="box-{data.uid}">
<div class="boxUDContent" style="
<f:if condition="{data.flexform_bordercolor}">
<f:then>border-color: {data.flexform_bordercolor};</f:then>
<f:else>border-color: #aaa;</f:else>
</f:if>
<f:if condition="{data.flexform_bgcolor}">
<f:then>background-color: {data.flexform_bgcolor};</f:then>
<f:else>background-color: #eee;</f:else>
</f:if>
<f:if condition="{data.flexform_borderradius}">
<f:then>border-radius: {data.flexform_borderradius};</f:then>
<f:else>border-radius: 10px;</f:else>
</f:if>
">
<f:format.raw>
{data.tx_gridelements_view_column_110->f:format.raw()}
</f:format.raw>
</div>
</div>
Tabs
kein FlexForm
Dieses Element braucht kein FlexForm, da keine Einstellungen vorgenommen werden. Es werden lediglich Inhaltselemente eingefügt.
tabs.html
<div id="tabs-{data.uid}" class="panel-group">
<ul class="nav nav-tabs">
<f:for each="{data.tx_gridelements_view_children}" as="content" iteration="iterator">
<li class="{f:if(condition: iterator.isFirst, then: 'active')}">
<a data-toggle="tab" href="#t{content.uid}">
{f:if(condition: content.header, then: '{content.header}', else: 'Tab{iterator.cycle}')}
</a>
</li>
</f:for>
</ul>
<div class="tab-content">
<f:for each="{data.tx_gridelements_view_children}" as="content" iteration="iterator">
<div id="t{content.uid}" class="tab-pane fade {f:if(condition: iterator.isFirst, then: ' in active')}">
<f:format.raw>
{data.tx_gridelements_view_child_{content.uid}}
</f:format.raw>
</div>
</f:for>
</div>
</div>
Die hervorgehobenen Zeilen stellen die Inhaltselemente mit ihrer Überschrift dar. Will man auf die Überschrift verzichten, da sie ja bereit im Tab-Header ausgegeben wird, dann ersetzt man die Zeilen durch:
<f:format.raw>
{content.bodytext}
</f:format.raw>
Accordion
kein FlexForm
Auch für das Accordion ist kein eigenes FlexForm notwendig.
accordion.html
<div id="accordion-{data.uid}" class="panel-group">
<f:for each="{data.tx_gridelements_view_children}" as="content" iteration="iterator">
<div class="panel panel-default">
<div class="panel-heading" id="heading{content.uid}">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion{data.uid}" href="#collapse{content.uid}">
{f:if(condition: content.header, then: '{content.header}', else: 'Element{iterator.cycle}')}
<i class="glyphicon glyphicon-menu-down pull-right"></i>
</a>
</h4>
</div>
<div id="collapse{content.uid}" class="panel-collapse collapse {f:if(condition: iterator.isFirst, then: 'in')}">
<div class="panel-body">
<f:format.raw>
{data.tx_gridelements_view_child_{content.uid}}
</f:format.raw>
</div>
</div>
</div>
</f:for>
</div>
Auch hier könnte man natürlich auf die Überschriften im Element verzichten (siehe Tabs) Hier gibt es noch eine Einstellmöglichkeit. Momentan kann man alle Teile des Accordions einzeln öffnen und schließen. Soll immer nur ein Element zu Zeit geöffnet sein, dann muss die ID des äußeren DIVs korrigiert werden zu: id="accordion{data.uid}", das Minuszeichen muss also weg oder beim data-toggler hinzu.
Bilderslider
flexform_bilderslider.xml
Neben der Steuerung für den Flexslider ist hier vor allem der Bereich wichtig, über den die einzelnen Bilder eingebunden werden.
<?xml version="1.0" encoding="utf-8" standalone="yes" ?>
<T3DataStructure>
<meta>
<langDisable>1</langDisable>
</meta>
<sheets>
<sDEF>
<ROOT type="array">
<TCEforms>
<sheetTitle>Animation</sheetTitle>
</TCEforms>
<type>array</type>
<el type="array">
<direction type="array">
<TCEforms type="array">
<label>Richtung</label>
<config type="array">
<type>select</type>
<renderType>selectSingle</renderType>
<items type="array">
<numIndex index="0" type="array">
<numIndex index="0">vertical</numIndex>
<numIndex index="1">vertical</numIndex>
</numIndex>
<numIndex index="1" type="array">
<numIndex index="0">horizontal</numIndex>
<numIndex index="1">horizontal</numIndex>
</numIndex>
</items>
</config>
</TCEforms>
</direction>
<slidespeed type="array">
<TCEforms type="array">
<label>Geschwindigkeit</label>
<config type="array">
<type>input</type>
<size>5</size>
<max>8</max>
<default>4000</default>
<range>
<lower>500</lower>
</range>
<eval>int</eval>
</config>
</TCEforms>
</slidespeed>
<animation type="array">
<TCEforms type="array">
<label>Animationsart</label>
<config type="array">
<type>select</type>
<renderType>selectSingle</renderType>
<items type="array">
<numIndex index="0" type="array">
<numIndex index="0">fade</numIndex>
<numIndex index="1">fade</numIndex>
</numIndex>
<numIndex index="1" type="array">
<numIndex index="0">slide</numIndex>
<numIndex index="1">slide</numIndex>
</numIndex>
</items>
</config>
</TCEforms>
</animation>
<animationspeed type="array">
<TCEforms type="array">
<label>Animations Geschwindigkeit</label>
<config type="array">
<type>input</type>
<size>5</size>
<max>8</max>
<default>600</default>
<range>
<lower>100</lower>
</range>
<eval>int</eval>
</config>
</TCEforms>
</animationspeed></nowiki>
<b><nowiki><sliderImages>
<TCEforms>
<label>sliderImages</label>
<config>
<type>inline</type>
<maxitems>99</maxitems>
<foreign_table>sys_file_reference</foreign_table>
<!--<foreign_field>uid_foreign</foreign_field>-->
<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</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>
</sliderImages></nowiki></b>
<nowiki></el>
</ROOT>
</sDEF>
<scontrols>
<ROOT type="array">
<TCEforms>
<sheetTitle>Steuerung</sheetTitle>
</TCEforms>
<type>array</type>
<el type="array">
<showcontrolnav type="array">
<TCEforms type="array">
<label>Zeige Steuerung</label>
<config type="array">
<type>select</type>
<renderType>selectSingle</renderType>
<items type="array">
<numIndex index="0" type="array">
<numIndex index="0">ja</numIndex>
<numIndex index="1">true</numIndex>
</numIndex>
<numIndex index="1" type="array">
<numIndex index="0">nein</numIndex>
<numIndex index="1">false</numIndex>
</numIndex>
</items>
</config>
</TCEforms>
</showcontrolnav>
<showdirnav type="array">
<TCEforms type="array">
<label>Zeige Richtungswahl</label>
<config type="array">
<type>select</type>
<renderType>selectSingle</renderType>
<items type="array">
<numIndex index="0" type="array">
<numIndex index="0">nein</numIndex>
<numIndex index="1">false</numIndex>
</numIndex>
<numIndex index="1" type="array">
<numIndex index="0">ja</numIndex>
<numIndex index="1">true</numIndex>
</numIndex>
</items>
</config>
</TCEforms>
</showdirnav>
<showpause type="array">
<TCEforms type="array">
<label>Zeige Pause</label>
<config type="array">
<type>select</type>
<renderType>selectSingle</renderType>
<items type="array">
<numIndex index="0" type="array">
<numIndex index="0">nein</numIndex>
<numIndex index="1">false</numIndex>
</numIndex>
<numIndex index="1" type="array">
<numIndex index="0">ja</numIndex>
<numIndex index="1">true</numIndex>
</numIndex>
</items>
</config>
</TCEforms>
</showpause>
<pauseonhover type="array">
<TCEforms type="array">
<label>Pause bei Maus-Over</label>
<config type="array">
<type>select</type>
<renderType>selectSingle</renderType>
<items type="array">
<numIndex index="0" type="array">
<numIndex index="0">ja</numIndex>
<numIndex index="1">true</numIndex>
</numIndex>
<numIndex index="1" type="array">
<numIndex index="0">nein</numIndex>
<numIndex index="1">false</numIndex>
</numIndex>
</items>
</config>
</TCEforms>
</pauseonhover>
</el>
</ROOT>
</scontrols>
<soptions>
<ROOT type="array">
<TCEforms>
<sheetTitle>Optionen</sheetTitle>
</TCEforms>
<type>array</type>
<el type="array">
<initdelay type="array">
<TCEforms type="array">
<label>Anfangsverzögerung</label>
<config type="array">
<type>input</type>
<size>5</size>
<default>0</default>
<eval>int</eval>
</config>
</TCEforms>
</initdelay>
<randomize type="array">
<TCEforms type="array">
<label>Zufalls-Reihenfolge</label>
<config type="array">
<type>select</type>
<renderType>selectSingle</renderType>
<items type="array">
<numIndex index="0" type="array">
<numIndex index="0">nein</numIndex>
<numIndex index="1">false</numIndex>
</numIndex>
<numIndex index="1" type="array">
<numIndex index="0">ja</numIndex>
<numIndex index="1">true</numIndex>
</numIndex>
</items>
</config>
</TCEforms>
</randomize>
<animationloop type="array">
<TCEforms type="array">
<label>Animation unendlich</label>
<config type="array">
<type>select</type>
<renderType>selectSingle</renderType>
<items type="array">
<numIndex index="0" type="array">
<numIndex index="0">ja</numIndex>
<numIndex index="1">true</numIndex>
</numIndex>
<numIndex index="1" type="array">
<numIndex index="0">nein</numIndex>
<numIndex index="1">false</numIndex>
</numIndex>
</items>
</config>
</TCEforms>
</animationloop>
<reverse type="array">
<TCEforms type="array">
<label>Umgekehrte Richtung</label>
<config type="array">
<type>select</type>
<renderType>selectSingle</renderType>
<items type="array">
<numIndex index="0" type="array">
<numIndex index="0">nein</numIndex>
<numIndex index="1">false</numIndex>
</numIndex>
<numIndex index="1" type="array">
<numIndex index="0">ja</numIndex>
<numIndex index="1">true</numIndex>
</numIndex>
</items>
</config>
</TCEforms>
</reverse>
<elementbreite type="array">
<TCEforms type="array">
<label>Breite des Elements mit Einheit (Pixel oder %)</label>
<config type="array">
<type>input</type>
<size>5</size>
<max>8</max>
<default>100%</default>
<eval>trim,required</eval>
</config>
</TCEforms>
</elementbreite>
<bildhoehe type="array">
<TCEforms type="array">
<label>Höhe der Bilder in px</label>
<config type="array">
<type>input</type>
<size>5</size>
<max>8</max>
<default>300</default>
<eval>trim,int</eval>
</config>
</TCEforms>
</bildhoehe>
</el>
</ROOT>
</soptions>
</sheets>
</T3DataStructure>
bilderslider.html
{namespace m=Netthelp\nettgrids\ViewHelpers}
<f:if condition="{data.header}">
<f:then><h1 class="pagetitle">{data.header}</h1></f:then>
</f:if>
<div class="flexslider udslider" id="flexslider{data.pid}"
<f:if condition="{data.flexform_elementbreite}">
style="width: {data.flexform_elementbreite}; ">
</f:if>
<ul class="slides">
<f:for each="{m:explode(string: '{data.flexform_sliderImages}', delimiter:',')}" as="image" iteration="iterator">
<li>
<div id="c{iterator.cycle}" class="frame frame-default frame-type-image frame-layout-0">
<div class="ce-image ce-center ce-above">
<div class="ce-gallery" data-ce-columns="1" data-ce-images="1">
<div class="ce-outer">
<div class="ce-inner">
<figure class="image">
<a class="lightbox" href="<f:uri.image src="{image}" treatIdAsReference="1" maxWidth="800" maxHeight="300" />" rel="lightbox{data.uid}">
<f:image src="{image}" treatIdAsReference="1" height="{data.flexform_bildhoehe}" maxHeight="{data.flexform_bildhoehe}" />
</a>
</figure>
</div>
</div>
</div>
</div>
</div>
</li>
</f:for>
</ul>
</div>
<script>
( function($) {
$(document).ready(function()
{$('#flexslider{data.pid}').flexslider({
direction: <f:comment>wake up, fluid!</f:comment>"{data.flexform_direction}",
slideshowSpeed: {data.flexform_slidespeed},
animation: "{data.flexform_animation}",
animationSpeed: {data.flexform_animationspeed},
animationLoop: {data.flexform_animationloop},
useCSS: false,
controlNav: {data.flexform_showcontrolnav},
directionNav: {data.flexform_showdirnav},
pausePlay: {data.flexform_showpause},
pauseOnHover: {data.flexform_pauseonhover},
initDelay: {data.flexform_initdelay},
randomize: {data.flexform_randomize},
reverse: false
});
});
}) (jQuery);
</script>
Hier ist ein eigener ViewHelper notwendig, da in der Datenbank eine Liste mit den IDs der Bilder gespeichert wird und für die Iteration ein Array benötigt wird.
ExplodeViweHelper.php
namespace Netthelp\nettgrids\ViewHelpers;
/**
* ViewHelper zur Rückgabe eines Array aus einer Liste
* @author Uwe Debacher
* @version 2.0.1 vom 6.10.2020
*/
#use TYPO3Fluid\Fluid\Core\ViewHelper\AbstractViewHelper;
class ExplodeViewHelper extends \TYPO3Fluid\Fluid\Core\ViewHelper\AbstractViewHelper {
// output html since TYPO3 8LTS
protected $escapeOutput = false;
public function initializeArguments()
{
$this->registerArgument('string', 'string', 'der String', true);
$this->registerArgument('delimiter', 'string', 'das Trennzeichen', true);
}
/**
* Wandle Liste in Array um
*
* @param string $string mit delimiter separierte Liste von Elementen
* @param string $delimiter Trennzeichen in der Liste, in der Regel das ,
* @return array die Liste aus dem String als Array
*/
public function render() {
$delimiter = $this->arguments['delimiter'];
$string = $this->arguments['string'];
return explode($delimiter, $string);
}
}
Content-Slider
flexform_contentslider.xml
Neben den Elementen zur Steuerung des Flexsliders habe ich hier noch ein Feld ergänzt um die Gesamtbreite für den Slider zu beschränken.
<?xml version="1.0" encoding="utf-8" standalone="yes" ?>
<T3DataStructure>
<meta>
<langDisable>1</langDisable>
</meta>
<sheets>
<sDEF>
<ROOT type="array">
<TCEforms>
<sheetTitle>Animation</sheetTitle>
</TCEforms>
<type>array</type>
<el type="array">
<direction type="array">
<TCEforms type="array">
<label>Richtung</label>
<config type="array">
<type>select</type>
<renderType>selectSingle</renderType>
<items type="array">
<numIndex index="0" type="array">
<numIndex index="0">vertical</numIndex>
<numIndex index="1">vertical</numIndex>
</numIndex>
<numIndex index="1" type="array">
<numIndex index="0">horizontal</numIndex>
<numIndex index="1">horizontal</numIndex>
</numIndex>
</items>
</config>
</TCEforms>
</direction>
<slidespeed type="array">
<TCEforms type="array">
<label>Geschwindigkeit</label>
<config type="array">
<type>input</type>
<size>5</size>
<max>8</max>
<default>8000</default>
<range>
<lower>500</lower>
</range>
<eval>int</eval>
</config>
</TCEforms>
</slidespeed>
<animation type="array">
<TCEforms type="array">
<label>Animationsart</label>
<config type="array">
<type>select</type>
<renderType>selectSingle</renderType>
<items type="array">
<numIndex index="0" type="array">
<numIndex index="0">fade</numIndex>
<numIndex index="1">fade</numIndex>
</numIndex>
<numIndex index="1" type="array">
<numIndex index="0">slide</numIndex>
<numIndex index="1">slide</numIndex>
</numIndex>
</items>
</config>
</TCEforms>
</animation>
<animationspeed type="array">
<TCEforms type="array">
<label>Animations Geschwindigkeit</label>
<config type="array">
<type>input</type>
<size>5</size>
<max>8</max>
<default>600</default>
<range>
<lower>100</lower>
</range>
<eval>int</eval>
</config>
</TCEforms>
</animationspeed>
</el>
</ROOT>
</sDEF>
<scontrols>
<ROOT type="array">
<TCEforms>
<sheetTitle>Steuerung</sheetTitle>
</TCEforms>
<type>array</type>
<el type="array">
<showcontrolnav type="array">
<TCEforms type="array">
<label>Zeige Steuerung</label>
<config type="array">
<type>select</type>
<renderType>selectSingle</renderType>
<items type="array">
<numIndex index="0" type="array">
<numIndex index="0">ja</numIndex>
<numIndex index="1">true</numIndex>
</numIndex>
<numIndex index="1" type="array">
<numIndex index="0">nein</numIndex>
<numIndex index="1">false</numIndex>
</numIndex>
</items>
</config>
</TCEforms>
</showcontrolnav>
<showdirnav type="array">
<TCEforms type="array">
<label>Zeige Richtungswahl</label>
<config type="array">
<type>select</type>
<renderType>selectSingle</renderType>
<items type="array">
<numIndex index="0" type="array">
<numIndex index="0">nein</numIndex>
<numIndex index="1">false</numIndex>
</numIndex>
<numIndex index="1" type="array">
<numIndex index="0">ja</numIndex>
<numIndex index="1">true</numIndex>
</numIndex>
</items>
</config>
</TCEforms>
</showdirnav>
<showpause type="array">
<TCEforms type="array">
<label>Zeige Pause</label>
<config type="array">
<type>select</type>
<renderType>selectSingle</renderType>
<items type="array">
<numIndex index="0" type="array">
<numIndex index="0">nein</numIndex>
<numIndex index="1">false</numIndex>
</numIndex>
<numIndex index="1" type="array">
<numIndex index="0">ja</numIndex>
<numIndex index="1">true</numIndex>
</numIndex>
</items>
</config>
</TCEforms>
</showpause>
<pauseonhover type="array">
<TCEforms type="array">
<label>Pause bei Maus-Over</label>
<config type="array">
<type>select</type>
<renderType>selectSingle</renderType>
<items type="array">
<numIndex index="0" type="array">
<numIndex index="0">ja</numIndex>
<numIndex index="1">true</numIndex>
</numIndex>
<numIndex index="1" type="array">
<numIndex index="0">nein</numIndex>
<numIndex index="1">false</numIndex>
</numIndex>
</items>
</config>
</TCEforms>
</pauseonhover>
</el>
</ROOT>
</scontrols>
<soptions>
<ROOT type="array">
<TCEforms>
<sheetTitle>Optionen</sheetTitle>
</TCEforms>
<type>array</type>
<el type="array">
<initdelay type="array">
<TCEforms type="array">
<label>Anfangsverzögerung</label>
<config type="array">
<type>input</type>
<size>5</size>
<default>0</default>
<eval>int</eval>
</config>
</TCEforms>
</initdelay>
<randomize type="array">
<TCEforms type="array">
<label>Zufalls-Reihenfolge</label>
<config type="array">
<type>select</type>
<renderType>selectSingle</renderType>
<items type="array">
<numIndex index="0" type="array">
<numIndex index="0">nein</numIndex>
<numIndex index="1">false</numIndex>
</numIndex>
<numIndex index="1" type="array">
<numIndex index="0">ja</numIndex>
<numIndex index="1">true</numIndex>
</numIndex>
</items>
</config>
</TCEforms>
</randomize>
<animationloop type="array">
<TCEforms type="array">
<label>Animation unendlich</label>
<config type="array">
<type>select</type>
<renderType>selectSingle</renderType>
<items type="array">
<numIndex index="0" type="array">
<numIndex index="0">ja</numIndex>
<numIndex index="1">true</numIndex>
</numIndex>
<numIndex index="1" type="array">
<numIndex index="0">nein</numIndex>
<numIndex index="1">false</numIndex>
</numIndex>
</items>
</config>
</TCEforms>
</animationloop>
<reverse type="array">
<TCEforms type="array">
<label>Umgekehrte Richtung</label>
<config type="array">
<type>select</type>
<renderType>selectSingle</renderType>
<items type="array">
<numIndex index="0" type="array">
<numIndex index="0">nein</numIndex>
<numIndex index="1">false</numIndex>
</numIndex>
<numIndex index="1" type="array">
<numIndex index="0">ja</numIndex>
<numIndex index="1">true</numIndex>
</numIndex>
</items>
</config>
</TCEforms>
</reverse></nowiki>
<b><nowiki><elementbreite type="array">
<TCEforms type="array">
<label>Breite des Elements mit Einheit (Pixel oder %)</label>
<config type="array">
<type>input</type>
<size>5</size>
<max>8</max>
<default>100%</default>
<eval>trim,required</eval>
</config>
</TCEforms>
</elementbreite></nowiki></b>
<nowiki> </el>
</ROOT>
</soptions>
</sheets>
</T3DataStructure>
contentslider.html
{namespace m=Netthelp\nettgrids\ViewHelpers}
<f:if condition="{data.header}">
<f:then><h1 class="pagetitle">{data.header}</h1></f:then>
</f:if>
<div class="flexslider" id="flexslider{data.uid}" style="width:{data.flexform_elementbreite};">
<ul class="slides">
<f:for each="{data.tx_gridelements_view_children}" as="content" iteration="iterator">
<li><m:Content uid="{content.uid}" /></li>
</f:for>
</ul>
</div>
<script>
( function($) {
$(document).ready(function()
{$('#flexslider{data.uid}').flexslider({
<f:comment>wake up, fluid!</f:comment>
direction: "{data.flexform_direction}",
slideshowSpeed: {data.flexform_slidespeed},
animation: "{data.flexform_animation}",
animationSpeed: {data.flexform_animationspeed},
animationLoop: {data.flexform_animationloop},
useCSS: false,
controlNav: {data.flexform_showcontrolnav},
directionNav: {data.flexform_showdirnav},
pausePlay: {data.flexform_showpause},
pauseOnHover: {data.flexform_pauseonhover},
initDelay: {data.flexform_initdelay},
randomize: {data.flexform_randomize},
reverse: {data.flexform_reverse}
});
});
}) (jQuery);
</script>
Verzeichnisslider
flexform_vslider.xml
Neben der Steuerung für den Flexslider ist hier vor allem das Element wichtig, über das ein Verzeichnis ausgewählt werden kann.
<nowiki><?xml version="1.0" encoding="utf-8" standalone="yes" ?>
<T3DataStructure>
<meta>
<langDisable>1</langDisable>
</meta>
<sheets>
<sDEF>
<ROOT type="array">
<TCEforms>
<sheetTitle>Animation</sheetTitle>
</TCEforms>
<type>array</type>
<el type="array">
<direction type="array">
<TCEforms type="array">
<label>Richtung</label>
<config type="array">
<type>select</type>
<renderType>selectSingle</renderType>
<items type="array">
<numIndex index="0" type="array">
<numIndex index="0">vertical</numIndex>
<numIndex index="1">vertical</numIndex>
</numIndex>
<numIndex index="1" type="array">
<numIndex index="0">horizontal</numIndex>
<numIndex index="1">horizontal</numIndex>
</numIndex>
</items>
</config>
</TCEforms>
</direction>
<slidespeed type="array">
<TCEforms type="array">
<label>Geschwindigkeit</label>
<config type="array">
<type>input</type>
<size>5</size>
<max>8</max>
<default>4000</default>
<range>
<lower>500</lower>
</range>
<eval>int</eval>
</config>
</TCEforms>
</slidespeed>
<animation type="array">
<TCEforms type="array">
<label>Animationsart</label>
<config type="array">
<type>select</type>
<renderType>selectSingle</renderType>
<items type="array">
<numIndex index="0" type="array">
<numIndex index="0">fade</numIndex>
<numIndex index="1">fade</numIndex>
</numIndex>
<numIndex index="1" type="array">
<numIndex index="0">slide</numIndex>
<numIndex index="1">slide</numIndex>
</numIndex>
</items>
</config>
</TCEforms>
</animation>
<animationspeed type="array">
<TCEforms type="array">
<label>Animations Geschwindigkeit</label>
<config type="array">
<type>input</type>
<size>5</size>
<max>8</max>
<default>600</default>
<range>
<lower>100</lower>
</range>
<eval>int</eval>
</config>
</TCEforms>
</animationspeed></nowiki>
<b><nowiki><imagefolder>
<TCEforms>
<label>Ordner mit den anzuzeigenden Bildern</label>
<config>
<type>group</type>
<internal_type>folder</internal_type>
<maxitems>1</maxitems>
<size>1</size>
</config>
</TCEforms>
</imagefolder></nowiki></b>
<nowiki></el>
</ROOT>
</sDEF>
<scontrols>
<ROOT type="array">
<TCEforms>
<sheetTitle>Steuerung</sheetTitle>
</TCEforms>
<type>array</type>
<el type="array">
<showcontrolnav type="array">
<TCEforms type="array">
<label>Zeige Steuerung</label>
<config type="array">
<type>select</type>
<renderType>selectSingle</renderType>
<items type="array">
<numIndex index="0" type="array">
<numIndex index="0">ja</numIndex>
<numIndex index="1">true</numIndex>
</numIndex>
<numIndex index="1" type="array">
<numIndex index="0">nein</numIndex>
<numIndex index="1">false</numIndex>
</numIndex>
</items>
</config>
</TCEforms>
</showcontrolnav>
<showdirnav type="array">
<TCEforms type="array">
<label>Zeige Richtungswahl</label>
<config type="array">
<type>select</type>
<renderType>selectSingle</renderType>
<items type="array">
<numIndex index="0" type="array">
<numIndex index="0">nein</numIndex>
<numIndex index="1">false</numIndex>
</numIndex>
<numIndex index="1" type="array">
<numIndex index="0">ja</numIndex>
<numIndex index="1">true</numIndex>
</numIndex>
</items>
</config>
</TCEforms>
</showdirnav>
<showpause type="array">
<TCEforms type="array">
<label>Zeige Pause</label>
<config type="array">
<type>select</type>
<renderType>selectSingle</renderType>
<items type="array">
<numIndex index="0" type="array">
<numIndex index="0">nein</numIndex>
<numIndex index="1">false</numIndex>
</numIndex>
<numIndex index="1" type="array">
<numIndex index="0">ja</numIndex>
<numIndex index="1">true</numIndex>
</numIndex>
</items>
</config>
</TCEforms>
</showpause>
<pauseonhover type="array">
<TCEforms type="array">
<label>Pause bei Maus-Over</label>
<config type="array">
<type>select</type>
<renderType>selectSingle</renderType>
<items type="array">
<numIndex index="0" type="array">
<numIndex index="0">ja</numIndex>
<numIndex index="1">true</numIndex>
</numIndex>
<numIndex index="1" type="array">
<numIndex index="0">nein</numIndex>
<numIndex index="1">false</numIndex>
</numIndex>
</items>
</config>
</TCEforms>
</pauseonhover>
</el>
</ROOT>
</scontrols>
<soptions>
<ROOT type="array">
<TCEforms>
<sheetTitle>Optionen</sheetTitle>
</TCEforms>
<type>array</type>
<el type="array">
<initdelay type="array">
<TCEforms type="array">
<label>Anfangsverzögerung</label>
<config type="array">
<type>input</type>
<size>5</size>
<default>0</default>
<eval>int</eval>
</config>
</TCEforms>
</initdelay>
<randomize type="array">
<TCEforms type="array">
<label>Zufalls-Reihenfolge</label>
<config type="array">
<type>select</type>
<renderType>selectSingle</renderType>
<items type="array">
<numIndex index="0" type="array">
<numIndex index="0">nein</numIndex>
<numIndex index="1">false</numIndex>
</numIndex>
<numIndex index="1" type="array">
<numIndex index="0">ja</numIndex>
<numIndex index="1">true</numIndex>
</numIndex>
</items>
</config>
</TCEforms>
</randomize>
<animationloop type="array">
<TCEforms type="array">
<label>Animation unendlich</label>
<config type="array">
<type>select</type>
<renderType>selectSingle</renderType>
<items type="array">
<numIndex index="0" type="array">
<numIndex index="0">ja</numIndex>
<numIndex index="1">true</numIndex>
</numIndex>
<numIndex index="1" type="array">
<numIndex index="0">nein</numIndex>
<numIndex index="1">false</numIndex>
</numIndex>
</items>
</config>
</TCEforms>
</animationloop>
<reverse type="array">
<TCEforms type="array">
<label>Umgekehrte Richtung</label>
<config type="array">
<type>select</type>
<renderType>selectSingle</renderType>
<items type="array">
<numIndex index="0" type="array">
<numIndex index="0">nein</numIndex>
<numIndex index="1">false</numIndex>
</numIndex>
<numIndex index="1" type="array">
<numIndex index="0">ja</numIndex>
<numIndex index="1">true</numIndex>
</numIndex>
</items>
</config>
</TCEforms>
</reverse>
<elementbreite type="array">
<TCEforms type="array">
<label>Breite des Elements mit Einheit (Pixel oder %)</label>
<config type="array">
<type>input</type>
<size>5</size>
<max>8</max>
<default>100%</default>
<eval>trim,required</eval>
</config>
</TCEforms>
</elementbreite>
<bildhoehe type="array">
<TCEforms type="array">
<label>Höhe der Bilder in px</label>
<config type="array">
<type>input</type>
<size>5</size>
<max>8</max>
<default>300</default>
<eval>trim,int</eval>
</config>
</TCEforms>
</bildhoehe>
</el>
</ROOT>
</soptions>
</sheets>
</T3DataStructure>
verzeichnisslider.html
{namespace m=Netthelp\nettgrids\ViewHelpers}
<f:if condition="{data.header}">
<f:then><h1 class="pagetitle">{data.header}</h1></f:then>
</f:if>
<div class="flexslider udslider" id="flexslider{data.uid}"
<f:if condition="{data.flexform_elementbreite}">
style="width: {data.flexform_elementbreite}; ">
</f:if>
<ul class="slides">
<f:for each="{m:Verzeichnis(verzeichnis: '{data.flexform_imagefolder}')}" as="image" iteration="iterator">
<li>
<div id="c{iterator.cycle}" class="frame frame-default frame-type-image frame-layout-0">
<div class="ce-image ce-center ce-above">
<div class="ce-gallery" data-ce-columns="1" data-ce-images="1">
<div class="ce-outer">
<div class="ce-inner">
<figure class="image">
<a class="lightbox" href="<f:uri.image src="{image}" treatIdAsReference="1" maxWidth="800" maxHeight="300" />" rel="lightbox{data.uid}">
<f:image src="{image}" treatIdAsReference="1" height="{data.flexform_bildhoehe}" maxHeight="{data.flexform_bildhoehe}" maxHeight="{data.flexform_bildhoehe}" />
</a>
</figure>
</div>
</div>
</div>
</div>
</div>
</li>
</f:for>
</ul>
</div>
<script>
( function($) {
$(document).ready(function()
{$('#flexslider{data.uid}').flexslider({
direction: <f:comment>wake up, fluid!</f:comment>"{data.flexform_direction}",
slideshowSpeed: {data.flexform_slidespeed},
animation: "{data.flexform_animation}",
animationSpeed: {data.flexform_animationspeed},
animationLoop: {data.flexform_animationloop},
useCSS: false,
controlNav: {data.flexform_showcontrolnav},
directionNav: {data.flexform_showdirnav},
pausePlay: {data.flexform_showpause},
pauseOnHover: {data.flexform_pauseonhover},
initDelay: {data.flexform_initdelay},
randomize: {data.flexform_randomize},
reverse: false
});
});
}) (jQuery);
</script>
Für dieses Element habe ich gleich einen eigenen VerzeichnisViewHelper benötigt, der mir alle Bilddateien in einen Verzeichnis liefert.
VerzeichnisViewHelper.php
<?php
namespace Netthelp\nettgrids\ViewHelpers;
/**
* ViewHelper zur Rückgabe einer Liste von Bildern in einem Verzeichnis
* @author Uwe Debacher
* @version 2.0.1 vom 6.10.2020
*/
class VerzeichnisViewHelper extends \TYPO3Fluid\Fluid\Core\ViewHelper\AbstractViewHelper {
// output html since TYPO3 8LTS
protected $escapeOutput = false;
public function initializeArguments()
{
$this->registerArgument('verzeichnis', 'string', 'Verzeichnisname', true);
}
/**
* Hole die Dateien im Pfad
*
* @param verzeichnis $string mit dem Verzeichnispfad
* @return array die Liste der Dateien mit Pfad
*/
public function render() {
$verzeichnis = $this->arguments['verzeichnis'];
$root=$_SERVER['DOCUMENT_ROOT'];
$pfad=str_replace("1:", "/fileadmin", $verzeichnis);
$dateien=array();
$d = scandir($root.$pfad);
foreach ($d as $eintrag) {
if (is_file($root.$pfad.$eintrag))
if (in_array(substr($eintrag, -3), array('png', 'PNG', 'gif', 'GIF', 'jpg', 'JPG' ) ))
$dateien[]= $pfad.$eintrag;
}
return ($dateien);
}
}
Galerie
flexform_galerie.xml
<?xml version="1.0" encoding="utf-8" standalone="yes" ?>
<T3DataStructure>
<ROOT type="array">
<type>array</type>
<el type="array">
<ibreite>
<TCEforms>
<label>max. Breite eines Bildes (Default 400)</label>
<config>
<type>input</type>
<size>20</size>
<max>30</max>
<eval>trim,int</eval>
<default>400</default>
</config>
</TCEforms>
</ibreite>
<ihoehe>
<TCEforms>
<label>max. Höhe eines Bildes (Default 300) </label>
<config>
<type>input</type>
<size>20</size>
<max>30</max>
<eval>trim,int</eval>
<default>400</default>
</config>
</TCEforms>
</ihoehe>
<imagefolder>
<TCEforms>
<label>Ordner mit den anzuzeigenden Bildern</label>
<config>
<type>group</type>
<internal_type>folder</internal_type>
<maxitems>1</maxitems>
<size>1</size>
</config>
</TCEforms>
</imagefolder>
<cols type="array">
<TCEforms type="array">
<label>Anzahl Bilder pro Zeile (Default 4)</label>
<config type="array">
<type>select</type>
<renderType>selectSingle</renderType>
<default>3-3-4-6</default>
<items type="array">
<numindex index="0" type="array">
<numindex index="0">12</numindex>
<numindex index="1">1-1-1-1</numindex>
</numindex>
<numindex index="1" type="array">
<numindex index="0">6</numindex>
<numindex index="1">2-3-4-6</numindex>
</numindex>
<numindex index="2" type="array">
<numindex index="0">4</numindex>
<numindex index="1">3-3-4-6</numindex>
</numindex>
<numindex index="3" type="array">
<numindex index="0">3</numindex>
<numindex index="1">4-4-6-6</numindex>
</numindex>
<numindex index="4" type="array">
<numindex index="0">2</numindex>
<numindex index="1">6-6-6-6</numindex>
</numindex>
<numindex index="5" type="array">
<numindex index="0">1</numindex>
<numindex index="1">12-12-12-12</numindex>
</numindex>
</items>
<minitems>0</minitems>
<maxitems>1</maxitems>
<size>1</size>
</config>
</TCEforms>
</cols>
</el>
</ROOT>
</T3DataStructure>
verzeichnisgalerie.html
{namespace m=Netthelp\nettgrids\ViewHelpers}
<f:if condition="{data.header}">
<f:then><h1 class="pagetitle">{data.header}</h1></f:then>
</f:if>
<div class="udgalerie" id="galerie{data.uid}" >
<div class="container-fluid">
<div class="row">
<f:for each="{m:Verzeichnis(verzeichnis: '{data.flexform_imagefolder}')}" as="image" iteration="iterator">
<div id="c{iterator.cycle}" class="thumb col-xs-{SpalteXs} col-sm-{SpalteSn} col-md-{SpalteMd} col-lg-{SpalteLg}">
<a class="lightbox" href="<f:uri.image src="{image}" treatIdAsReference="1" maxWidth="800" maxHeight="300" />" rel="lightbox{data.uid}">
<f:image src="{image}" treatIdAsReference="1" maxHeight="{data.flexform_ihoehe}" maxWidth="{data.flexform_ibreite}" class="img-responsive" />
</a>
</div>
</f:for>
</div>
</div>
</div>
udpanel
udpanel.xml
<?xml version="1.0" encoding="utf-8" standalone="yes" ?>
<T3DataStructure>
<ROOT type="array">
<type>array</type>
<el type="array">
<headertext>
<TCEforms>
<label>Text der Panel Header-Zeile</label>
<config>
<type>input</type>
<size>30</size>
<max>90</max>
<eval>trim</eval>
</config>
</TCEforms>
</headertext>
<footertext>
<TCEforms>
<label>Text der Panel Footer-Zeile</label>
<config>
<type>input</type>
<size>30</size>
<max>90</max>
<eval>trim</eval>
</config>
</TCEforms>
</footertext>
<color type="array">
<TCEforms type="array">
<label>Stil des Panels</label>
<config type="array">
<type>select</type>
<renderType>selectSingle</renderType>
<default>default</default>
<items type="array">
<numindex index="0" type="array">
<numindex index="0">Default (grau)</numindex>
<numindex index="1">default</numindex>
</numindex>
<numindex index="1" type="array">
<numindex index="0">Primary (blau)</numindex>
<numindex index="1">primary</numindex>
</numindex>
<numindex index="2" type="array">
<numindex index="0">Success (Grün)</numindex>
<numindex index="1">success</numindex>
</numindex>
<numindex index="3" type="array">
<numindex index="0">Info (hellblau)</numindex>
<numindex index="1">info</numindex>
</numindex>
<numindex index="4" type="array">
<numindex index="0">Warning (gelb)</numindex>
<numindex index="1">warning</numindex>
</numindex>
<numindex index="5" type="array">
<numindex index="0">Danger (rot)</numindex>
<numindex index="1">danger</numindex>
</numindex>
</items>
<minitems>0</minitems>
<maxitems>1</maxitems>
<size>1</size>
</config>
</TCEforms>
</color>
</el>
</ROOT>
</T3DataStructure>
udpanel.html
<f:if condition="{data.header}">
<f:then><h2 class="pagetitle">{data.header}</h2></f:then>
</f:if>
<div class="udpanel">
<div class="panel panel-{data.flexform_color}">
<f:if condition="{data.flexform_headertext}">
<f:then><div class="panel-heading">{data.flexform_headertext}</div></f:then>
<f:else><div class="panel-heading"> </div></f:else>
</f:if>
<div class="panel-body">
{data.tx_gridelements_view_column_110->f:format.raw()}
</div>
<f:if condition="{data.flexform_footertext}">
<f:then><div class="panel-footer">{data.flexform_footertext}</div></f:then>
</f:if>
</div>
</div>
