Eigene Kontent-Elemente mit Typo3 8.7

Aus Debacher-Wiki
Wechseln zu: Navigation, Suche

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.

Nettgrids

Die Extension stellt momentan 11 Elemente zur Verfügung, die im Backend unter Raster-Elemente augewählt werden können.

ScreenshotNettgrid.png

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.

ExtensionManager.png

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:

  1. Am Anfang steht statt mod.web_layout.BackendLayouts hier tx_gridelements
  2. 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
  3. 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

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.

<?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

Spalten3.png

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

Spalten4.png

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

FCE UDroundBox.png

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

Tabs.png

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:

<?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

Accordion.png

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

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.

<?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

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.

<?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

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.

<?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

Vgallerie.png

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>