Quelltext der Seite Eigene Kontent-Elemente mit Typo3 10.4

Aus Debacher-Wiki

← Eigene Kontent-Elemente mit Typo3 10.4

Du bist aus dem folgenden Grund nicht berechtigt, die Seite zu bearbeiten:

---

Du kannst den Quelltext dieser Seite betrachten und kopieren.

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 [https://typo3.org/extensions/repository/view/nettgrids nettgrids] ausgelagert. Die folgende Beschreibung bezieht sich auf diese Extension. ==Nettgrids== Die Extension stellt momentan 11 Elemente zur Verfügung, die im Backend unter Raster-Elemente augewählt werden können. [[Datei:ScreenshotNettgrid.png]] ===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''. [[Datei:Bildschirmfoto von 2020-11-10 16-29-43.png|800px]] 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=== <syntaxhighlight lang="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' ] ], ]; </syntaxhighlight> 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. <syntaxhighlight lang="php"> <?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 ); ?> </syntaxhighlight> Bei den Dateinamen und Pfaden habe ich versucht mich weitestgehend an die Standards zu halten, die ich gefunden habe. ===ext_tables.php=== <syntaxhighlight lang="php"> <?php defined('TYPO3_MODE') || die('Access denied.'); call_user_func( function() { \TYPO3\CMS\Core\Utility\ExtensionManagementUtility::addStaticFile('nettgrids', 'Configuration/TypoScript', 'Netthelp Grids'); } ); </syntaxhighlight> ===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 <syntaxhighlight lang="bash"> 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 </syntaxhighlight> 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=== <syntaxhighlight lang="bash"> plugin.nettgrids { #cat=plugin.nettgrids/other; type=boolean; label=Binde Flexslider Js und CSS automatisch mit ein config.flexslider = 1 } </syntaxhighlight> Damit kann die Einbindung der Flexslider-Dateien verhindert werden, siehe auch die letzten Zeilen in setup.txt. ===setup.txt=== <syntaxhighlight lang="bash"> 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] </syntaxhighlight> 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== [[Datei:Spalten2.png]] ===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. <syntaxhighlight lang="bash"> <?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> </syntaxhighlight> ===grid2col.html=== <syntaxhighlight lang="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> </syntaxhighlight> ==3 Spalten== [[Datei:Spalten3.png]] ===flexform_spalten3.xml=== <syntaxhighlight lang="bash"> <?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> </syntaxhighlight> ===grid3col.html=== <syntaxhighlight lang="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> </syntaxhighlight> ==4 Spalten== [[Datei:Spalten4.png]] ===flexform_spalten4.xml=== <syntaxhighlight lang="bash"> <?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> </syntaxhighlight> ===grid4col.html=== <syntaxhighlight lang="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> </syntaxhighlight> ==udroundbox== [[Datei:FCE UDroundBox.png]] ===flexform_udroundbox.xml=== <syntaxhighlight lang="bash"> <?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> </syntaxhighlight> ===udroundbox.html=== Diese Konfiguration habe ich aus alten TemplaVoila-Zeiten übernommen. <syntaxhighlight lang="html"> <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> </syntaxhighlight> ==Tabs== [[Datei:Tabs.png]] ===kein FlexForm=== Dieses Element braucht kein FlexForm, da keine Einstellungen vorgenommen werden. Es werden lediglich Inhaltselemente eingefügt. ===tabs.html=== <syntaxhighlight lang="html" highlight="15-17"> <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> </syntaxhighlight> 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: <syntaxhighlight lang="html"> <f:format.raw> {content.bodytext} </f:format.raw> </syntaxhighlight> ==Accordion== [[Datei:Accordion.png]] ===kein FlexForm=== Auch für das Accordion ist kein eigenes FlexForm notwendig. ===accordion.html=== <syntaxhighlight lang="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> </syntaxhighlight> 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== [[Datei:Imageslider.png]] ===flexform_bilderslider.xml=== Neben der Steuerung für den Flexslider ist hier vor allem der Bereich wichtig, über den die einzelnen Bilder eingebunden werden. <syntaxhighlight lang="bash"> <?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> </syntaxhighlight> ===bilderslider.html=== <syntaxhighlight lang="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> </syntaxhighlight> 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==== <syntaxhighlight lang="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); } } </syntaxhighlight> ==Content-Slider== [[Datei:Contentslider.png]] ===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. <syntaxhighlight lang="bash"> <?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> </syntaxhighlight> ===contentslider.html=== <syntaxhighlight lang="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> </syntaxhighlight> ==Verzeichnisslider== [[Datei:Vslider.png]] ===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. <syntaxhighlight lang="bash"> <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> </syntaxhighlight> ===verzeichnisslider.html=== <syntaxhighlight lang="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> </syntaxhighlight> Für dieses Element habe ich gleich einen eigenen VerzeichnisViewHelper benötigt, der mir alle Bilddateien in einen Verzeichnis liefert. ====VerzeichnisViewHelper.php==== <syntaxhighlight lang="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); } } </syntaxhighlight> ==Galerie== [[Datei:Vgallerie.png]] ===flexform_galerie.xml=== <syntaxhighlight lang="bash"> <?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> </syntaxhighlight> ===verzeichnisgalerie.html=== <syntaxhighlight lang="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> </syntaxhighlight> ==udpanel== [[Datei:Udpanel.png]] ===udpanel.xml=== <syntaxhighlight lang="bash"> <?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> </syntaxhighlight> ===udpanel.html=== <syntaxhighlight lang="html"> <f:if condition="{data.header}"> <f:then><h2 class="pagetitle">{data.header}</h2></f:then> </f:if> <div class="udpanel" id="panel-{data.uid}"> <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">&nbsp;</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> </syntaxhighlight>

Zurück zur Seite Eigene Kontent-Elemente mit Typo3 10.4.