TYPO3 8.7.x – gridelements typoscript tca und Templates auslagern

Für die neue TYPO3 8.7.x LTS Version gibt es nun sehr viele neue Updates und die vielen Erweiterungen müssen nach und nach geupdated werden.

Wer auch die gridelements komplett ausgelagert hat, der muss hier ein paar typoscript Änderungen vornehmen. Ich zeige Euch einmal den kompletten Weg, wie Ihr mit Eurer eigenen Extension die GridElements auslagern könnt.

Fangen wir an die FlexForms auszulagern und dann die weiteren Dateien.

Laden wir als Erstes die neue GridElements Version aus dem GitHub runter, damit die Erweiterung unter der TYPO3 8.7.x Version auch läuft.
Link: https://github.com/TYPO3-extensions/gridelements

Dann gibt es noch ein Problem mit dem Backend Wizzard in er neuen Version:
Link: https://review.typo3.org/#/c/52126/
(dieser sollte in der GiHub Master Version nun drin sein.)
Allgemein könnt Ihr im Review Bereich immer mal schauen, da es noch offiziell keine GridElements Version für die T3 8 Version gibt.

FlexForms Beispiel:
Pfad: ext/extensionname/Configuration/FlexForms/Extensions/GridElements/OneColumn.xml

<?xml version="1.0" encoding="utf-8" standalone="yes" ?>
<T3DataStructure>
   <meta type="array">
      <langDisable>1</langDisable>
   </meta>
   <ROOT type="array">
      <type>array</type>
      <el type="array">
         <insert_cols type="array">
            <TCEforms type="array">
               <label>Spalten einsetzen</label>
               <config>
                  <type>check</type>
                  <default>0</default>
               </config>
            </TCEforms>
         </insert_cols>
      </el>
   </ROOT>
</T3DataStructure>

PageTS Beispiel:
Pfad: ext/extensionname/Configuration/PageTS/Extensions/GridElements/PageTS.ts

tx_gridelements {
   # TS Elemente haben Vorrang vor Datensätzen mit gleichen IDs
   overruleRecords = 1

   setup {
      #OneColumns
      #-------------------------------------------------------------------------------
      1 {
         title = Container
         description = Container Beispiel
         frame = 1
         icon = EXT:extensionname/Resources/Public/Icons/Backend/Grids/Grid-Container.png
         flexformDS = FILE:EXT:extensionname/Configuration/FlexForms/Extensions/GridElements/OneColumn.xml
         topLevelLayout = 0
         config {
            colCount = 1
            rowCount = 1
            rows {
               1 {
                  columns {
                     1 {
                        name = Container
                        colPos = 10
                     }
                  }
               }
            }
         }
      }
   }
}

Bisher hat sich soweit noch nichts geändert, aber nun kommen wir zu einem neuen Teil der TYPO3 8.7 Version.
Hier eine kurze Info was sich am Aufbau der ContentElemente geändert hat:
Link: https://docs.typo3.org/typo3cms/extensions/core/8-dev/Changelog/8.7/Breaking-80374-DefaultContentElementConfigurationForFrontendLoginAdaptsFluidStyledContent.html

TYPO3 8 Changelog:

tt_content.login =< lib.contentElement
tt_content.login {
   templateName = Generic
   variables {
      content =< plugin.tx_felogin_pi1
   }
}

Nun übernehmen wir den Part in unserer Erweiterung mit ein:

TypoScript Beispiel:
Pfad: ext/extensionname/Configuration/TypoScript/Extensions/GridElements/GridElements.ts

Hier laden ich erst einmal die orginal GridElements Setup Config, sobald die Extension installiert ist.
Dann übergebe ich die Inhalte an den neuen tt_content Aufbau.
Der restliche GridElements-Aufbau erfolgt dann wieder wie in der orginal Setup Config zu sehen.

# loaded ts after install the ext:gridelements
[userFunc = TYPO3\CMS\Core\Utility\ExtensionManagementUtility::isLoaded('gridelements')]
	<INCLUDE_TYPOSCRIPT: source="FILE:EXT:gridelements/Configuration/TypoScript/setup.ts" extensions="ts">
[global]

tt_content.gridelements_pi1 =< lib.contentElement
tt_content.gridelements_pi1 {
	templateName = Generic
	variables {
		content =< tt_content.gridelements_view
	}
}

tt_content {
	gridelements_pi1 = COA
	gridelements_pi1 {
		20 {
			10 {
				setup {
					1 < lib.gridelements.defaultGridSetup
					1 {
						cObject = FLUIDTEMPLATE
						cObject {
							file = typo3conf/ext/constructionkit/Resources/Private/Templates/Extensions/GridElements/OneColumn.html
						}
					}
				}
			}
		}
	}
}

tt_content.gridelements_view < tt_content.gridelements_pi1

Wie in der Doc von typo3.org zusehen, werden die neuen Content Elemente und Extension die mit Fluid Styled Content aufgebaut werden neu bearbeitet.
Hier könnt Ihr euch den neuen Aufbau der Content-Elemente anschauen:
Pfad: typo3_src-8.7.0/typo3/sysext/fluid_styled_content/Configuration/TypoScript/Helper/ContentElement.txt

Wichtig ist hier noch zu sagen, dass Ihr in dem Root-Template: Include static (from extensions) / Statische Templates einschließen (aus Erweiterungen):
Erst das „gridelements“ und dann Eure Ext. ladet!

Nachtrag:
Ich habe noch mal mit dem Jo Hasenau mir weitere Aufbauten angeschaut, solltet Ihr z.B. KEIN „fluid_styled_content“ verwendet, dann hier der neue Aufbau um gridelements in eure eigene Extension auszulagern:

# ===============================================================================
# tt_content configuration for gridelements
# ===============================================================================

# Load org. Config
[userFunc = TYPO3\CMS\Core\Utility\ExtensionManagementUtility::isLoaded('gridelements')]
	<INCLUDE_TYPOSCRIPT: source="FILE:EXT:gridelements/Configuration/TypoScript/setup.ts" extensions="ts">
[global]

tt_content.gridelements_pi1 >
tt_content.gridelements_pi1 =< lib.contentElement
tt_content.gridelements_pi1 {
	templateName = Generic
	variables {
		content = COA
		content {
			10 = USER
			10 {
				userFunc = GridElementsTeam\Gridelements\Plugin\Gridelements->main
				setup {
					default < lib.gridelements.defaultGridSetup
				}
			}
		}
	}
}
lib.gridelements.defaultGridSetup.cObject =< lib.contentElement

tt_content {
	gridelements_pi1 {
		variables {
			content {
				10 {
					setup {
						1 < lib.gridelements.defaultGridSetup
						1 {
							cObject {
								templateName = OneColumn
								templateRootPaths {
									20 = EXT:EXTNAME/Resources/Private/Templates/Extensions/GridElements/
								}
								#partialRootPaths {
								#	20 = EXT:EXTNAME/Resources/Private/Templates/Extensions/GridElements/
								#}
								#layoutRootPaths {
								#	20 = EXT:EXTNAME/Resources/Private/Templates/Extensions/GridElements/
								#}
							}
						}

						2 < lib.gridelements.defaultGridSetup
						2 {
							cObject {
								templateName = TwoColumns
								templateRootPaths {
									20 = EXT:EXTNAME/Resources/Private/Templates/Extensions/GridElements/
								}
								#partialRootPaths {
								#	20 = EXT:EXTNAME/Resources/Private/Templates/Extensions/GridElements/
								#}
								#layoutRootPaths {
								#	20 = EXT:EXTNAME/Resources/Private/Templates/Extensions/GridElements/
								#}
							}
						}
					}
				}
			}
		}
	}
}


tt_content.gridelements_view < tt_content.gridelements_pi1

HTML Ausgabe kann dann so aussehen (TwoColumns.html):

<div class="row">
	<div class="col1 col-xs-{data.flexform_xs_one} col-sm-{data.flexform_sm_one} col-md-{data.flexform_md_one} col-lg-{data.flexform_lg_one}">
		<f:format.raw>{data.tx_gridelements_view_columns.10}</f:format.raw>
	</div>
	<div class="col2 col-xs-{data.flexform_xs_two} col-sm-{data.flexform_sm_two} col-md-{data.flexform_md_two} col-lg-{data.flexform_lg_two}">
		<f:format.raw>{data.tx_gridelements_view_columns.20}</f:format.raw>
	</div>
</div>

Falls Ihr noch weitere Lösungen oder Probleme mit der neuen TYPO3 Version habt, so schreibt es doch in den Kommentaren.

Eure Meinung zu dem Artikel ist gefragt! Schreibt mir ein Kommentar

Hat Euch der Artikel weitergeholfen oder gefallen?
Ich freue mich auf einen Blick auf meine Amazon-Wunschliste. Vielen Dank!

Hat Euch der Artikel weitergeholfen oder gefallen? Ich freue mich auf einen Blick auf meine Amazon-Wunschliste. Vielen Dank!Ich bin freiberuflicher TYPO3-Entwickler, Web-Entwickler und Frontend-Entwickler. Ich arbeite im und für das Web etwas mehr als 12 Jahre. Mehr Infos zu der TYPO3 Internetagentur - INGENIUMDESIGN.

Leave a Reply

17 Kommentare

  1. Marco

    Kann mir einer erklären, warum ich trotz benutzen von css_styled_content keinerlei Standard-Definitionen a la tt_content.stdWrap.bla überschreiben kann?? Der Editor zeigt mir nicht mal Vorschläge zu tt_content.bla an. Ich verstehs echt nicht…

  2. Ingo Lacheiner

    Ich krieg gridelements einfach nicht zum laufen. Kanns jemand einem völligen Dummy erklären?
    Ich möchte einfach per Setup die Gridelements konfigurieren – kein Auslagern oder sonstiges.

    Mein Setup-TS:

    tt_content.gridelements_pi1.20.10.setup {
    // version < 8
    //tt_content.gridelements_view.20.10.setup {
    # 2 Spalten 50 50
    4 < lib.gridelements.defaultGridSetup
    4 {
    wrap = |
    columns {
    0 < .default
    0.wrap = |
    1 < .default
    1.wrap = |

    }
    }
    # 3 Spalten
    2 < lib.gridelements.defaultGridSetup
    2 {
    wrap = |
    columns {
    0 < .default
    0.wrap = |
    1 < .default
    1.wrap = |
    2 < .default
    2.wrap = |

    }
    }

    }

    # Default PAGE object:
    page = PAGE

    page.10 = FLUIDTEMPLATE
    page.10.file = fileadmin/templates/4aIT0809/index.html

    page.10.variables {

    content < styles.content.get
    }

    Danke für jede Hilfe

  3. Maix

    Hi, I tested your solution for Typo3 8.7.1 LTS and still is not fully compatibility for gridelements in Typo3 LTS version. Templates two columns, three columns etc. not showing in dropdown list Grid Layout. Is possible write detailed guide for use gridelements. Thx.

  4. dafür am besten einen anderen Dienst verwenden und den link dazu hier posten, macht es einfacher 🙂

  5. Sorry – aber die Kommentarfunktion hier ist echt übel – der letzt Post ist ebenfalls Schrott. Daher bitte löschen – ich versuche, das woanders zu erläutern, wie es eigentlich funktionieren sollte.

  6. Wahlweise geht natürlich auch das hier, wenn es denn unbedingt ein Fluidtemplate als allgemeinen HTML-Container um die einzelnen Layout-Container braucht:


    tt_content.gridelements_pi1 =main
    setup {
    default < lib.gridelements.defaultGridSetup default.cObject = FLUIDTEMPLATE default.cObject.file = Path/To/My/Default/Template.html 1 < .default 1.cObject.file = Path/To/My/1/Template.html Something < .default Something.cObject.file = Path/To/My/Something/Template.html } } } }

    Wäre schön gewesen, wenn das diesmal formatiert raus käme - der letzte Post wurde leider völlig verhackstückt. 😉

  7. Wahlweise geht natürlich auch das hier, wenn es denn unbedingt ein Fluidtemplate als allgemeinen HTML-Container um die einzelnen Layout-Container braucht:


    tt_content.gridelements_pi1 =main
    setup {
    default < lib.gridelements.defaultGridSetup default.cObject = FLUIDTEMPLATE default.cObject.file = Path/To/My/Default/Template.html 1 < .default 1.cObject.file = Path/To/My/1/Template.html Something < .default Something.cObject.file = Path/To/My/Something/Template.html } } } }

    Wäre schon, wenn das diesmal formatiert raus käme 😉

  8. Der Ansatz mit der Referenz auf lib.contentElement bring so leider gar nichts, weil er direkt danach mit einem COA überschrieben wird und das FLUIDTEMPLATE an der eigentlich wichtigen Stelle fehlt. Wenn also überhaupt ein zusätzliches allgemeines FLUIDTEMPLATE für einen Gridcontainer benötig werden sollte, dann müsste das als stdWrap.cObject ins COA


    tt_content {
    gridelements_pi1 = COA
    gridelements_pi1 {
    20 {
    10 {
    setup {
    1 < lib.gridelements.defaultGridSetup
    1 {
    cObject = FLUIDTEMPLATE
    cObject {
    file = typo3conf/ext/constructionkit/Resources/Private/Templates/Extensions/GridElements/OneColumn.html
    }
    }
    }
    }
    }
    stdWrap.cObject =< lib.contentElement
    stdWrap.cObject {
    templateName = Generic
    variables {
    content =< tt_content.gridelements_view
    }
    }
    }
    }

    tt_content.gridelements_view < tt_content.gridelements_pi1

  9. Sebastian

    Extrem Hilfreich im Umgang mit Gridelements und Typo3 8.7.x!
    Dieser Beitrag ist _DER_ Grund, dass ich die Gridelements mit der 8.7.1 _ÜBERHAUPT_ zum Laufen gebracht habe.
    Die Gridelements dann noch in eine eigene Extension auslagern zu können ist ein zusätzlicher Bonus den ich gerne mitgenommen habe. Vielen Dank!

  10. Kurt Knick

    Alles noch einmal aufgebaut. Keine Ahnung wo der Fehler lag, aber nun geht es. Danke für den Artikel.

  11. Kurt Knick

    Danke für deine Antwort Sebastian. Eigentlich alles so gemacht wie immer, bzw. wie du es oben beschreibst. Habe es mit ausgelagertem Fluid Templates und Definition im TS versucht. Es wird nur eine große Anzahl von anchor tags mit der CE Id generiert.

  12. Hallo Zusammen,

    @Kurt Knick das könnte nun mehrere Ursachen haben, wie bindest Du denn Deine Extension mit den GridElements ein?
    Wichtig ist hier noch zu sagen (werde ich oben noch in dem Artikel ändern), dass Ihr in dem Root-Template: Include static (from extensions) / Statische Templates einschließen (aus Erweiterungen):
    Erst das „gridelements“ und dann Eure Ext. ladet!

    @Thomas, sowas in der Art habe ich hier beschrieben:
    http://www.typo3-probleme.de/2017/03/06/typo3-gridelements-stdheader-ins-fluid-template-auslagern-1941/
    Dort lagere ich den stdHeader von dem GridElement aus.

  13. Kurt Knick

    Hi, netter Artikel. Leider wird bei mir im Frontend nichts dargestellt. Welche Ursache könnte das haben?

  14. Thomas

    Hallo Sebastian,
    sehr hilfreicher Beitrag – Danke!
    Kann man im Template des Grids auf das Default Layout der CE´s (Header/All, Footer/All etc.) zugreifen?
    Grüße

  15. buy college essay

    Nice post.I am more than ever impressed through your approach of look in this blog. It shows your visualization. important attempt you take in through in this blog. Thanks for sharing.

Next ArticleTYPO3 - HMENU / TMENU - Titel, Subtitel, Alternativ Navigation Titel