Eigene Kontent-Elemente mit Typo3 8.7
Aus Debacher-Wiki
Nach dem 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
Ich habe mich für Gridelements 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-System umstellen muss. Meine gridelemente habe ich in eine eigene Extension nettgrids ausgelagert. Die folgende Beschreibung bezieht sich auf diese Extension.
Achtung: Vorsicht bei nachträglichen Änderungen in FlexForm-Feldern. Ich habe einmal das Element mit Bildern vom hinteren Reiter in den vorderen verschoben. Es standen dann beide Einträge im entsprechenden Datenbankfeld, der vordere war editierbar, der hintere wurde dargestellt. Ich habe das Element dann im Backend geöffnet, das Feld pi_flexform im zugehörigen Datensatz in der Datenbank gelöscht (phpMyAdmin) und den Datensatz im Backend gespeichert. Danach war wieder alles ok.
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. Falls gridelments noch nicht installiert ist, so gibt es nur solange ein Problem, bis auch diese Extension im TER aktualisiert ist. Solange muss man sich die aktuelle Version von GIT laden.
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 Extension gridelements',
'category' => 'misc',
'author' => 'Uwe Debacher',
'author_email' => 'typo3@debacher.de',
'state' => 'alpha',
'internal' => '',
'uploadfolder' => '0',
'createDirs' => '',
'clearCacheOnLoad' => 0,
'version' => '1.0.1',
'constraints' => [
'depends' => [
'typo3' => '8.6.0-8.7.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.
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
[globalVar = LIT:1 = {$plugin.nettgrids.config.flexslider}]
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>
<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">
<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>
<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">
<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>
<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">
<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">
<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
{namespace m=Netthelp\nettgrids\ViewHelpers}
<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')}">
<m:Content uid="{content.uid}" />
</div>
</f:for>
</div>
</div>
Hier ist aber wieder ein eigener ViewHelper notwendig, um die Inhaltselemente einfacher ausgeben zu können.
ContenViewHelper.php
Wie so oft sind hier die Seiten zu Typo3 am Anfang wenig hilfreich, da immer mindestens eine wesentliche Information fehlt um zu beginnen. Deshalb hier etwas ausführlicher.
Anmehreren Stellen findet man ein Listing für einen Content-Renderer:
- http://blog.teamgeist-medien.de/2014/01/extbase-fluid-viewhelper-fuer-tt_content-elemente-mit-namespaces.html
- https://www.andrerinas.de/tutorials/typo3-viewhelper-zum-rendern-von-tt-content-anhand-der-uid.html
<?php
namespace Netthelp\nettgrids\ViewHelpers;
/**
* ViewHelper zur Rückgabe eines geparsten tt_content Elementes
* @author Uwe Debacher
* @version 1.0.1 vom 15.07.2017
*/
class ContentViewHelper extends \TYPO3\CMS\Fluid\Core\ViewHelper\AbstractViewHelper {
// output html since TYPO3 8LTS
protected $escapeOutput = false;
/**
* Parse tt_content element
*
* @param int UID des Content Element
* @return string Geparstes Content Element
*/
public function render($uid) {
$conf = array( // config
'tables' => 'tt_content',
'source' => $uid,
'dontCheckPid' => 1
);
return $this->objectManager->get('TYPO3\CMS\Frontend\ContentObject\RecordsContentObject')->render($conf);
}
}
Da ich mit einer Extension nettgrids arbeite muss dieses Listing abgelegt werden im Pfad: typo3conf/ext/nettgrids/Classes/ViewHelpers/ContentViewHelper.php. Die Verzeichnisse muss man teilweise noch erstellen. Die Namespace-Zeile ist keine Pfadangabe, sondern dient nur zu Identifizierung. Sie soll wohl auf ViewHelpers enden und den Template-Namen beinhalten. In der Regel würde man dem wohl noch den Autoren-Namen voranstellen.
Wichtig: Damit der Viewhelper aktiv wird muss man die Extension einmal Deaktivieren und dann Aktivieren. Danach steht der ViewHelper zur Verfügung.
Accordion
kein FlexForm
Auch für das Accordion ist kein eigenes FlexForm notwendig, wohl aber der unter Tabs beschriebene ContentViewHelper.
accordion.html
{namespace m=Netthelp\nettgrids\ViewHelpers}
<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">
<m:content uid="{content.uid}" />
</div>
</div>
</div>
</f:for>
</div>
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>
<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>
</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>
Auch 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
<?php
namespace Netthelp\nettgrids\ViewHelpers;
/**
* ViewHelper zur Rückgabe eines Array aus einer Liste
* @author Uwe Debacher
* @version 1.0.1 vom 15.07.2017
*/
class ExplodeViewHelper extends \TYPO3\CMS\Fluid\Core\ViewHelper\AbstractViewHelper {
// output html since TYPO3 8LTS
protected $escapeOutput = false;
/**
* 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($string, $delimiter) {
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>
<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>
</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.
<?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>
<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>
</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 1.0.1 vom 15.07.2017
*/
class VerzeichnisViewHelper extends \TYPO3\CMS\Fluid\Core\ViewHelper\AbstractViewHelper {
// output html since TYPO3 8LTS
protected $escapeOutput = false;
/**
* Hole die Dateien im Verzeichnispfad
*
* @param verzeichnis $string mit dem Verzeichnispfad
* @return array die Liste der Dateien mit Pfad
*/
public function render($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>
<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>
