30. 01. 2012, 13:03

Die Backend Layouts ab Typo 3 4.5 sind eine einfache und effiziente Art den Content im Backend übersichtlicher darzustellen.

www.gartenbijoux.ch), die ein kompliziertes Layout mit überlappenden Bildern hat, dazu noch fixe Kästen, in der rechten Spalte, die mit Inhalt gefüllt werden müssen. Für die einzelnen Kästen habe ich zunächst Marker definiert. Doch diese nachher mit Inhalt zu füllen war gar nicht so einfach. Natürlich hätte man TemplaVoila (TV) dafür verwenden können, doch ich wollte mich dafür nicht extra einarbeiten und wollte dies mit Typo3 Hausmitteln erreichen. Also habe ich für die rechte Spalte wie Üblich colPos = 2 verwendet. Allerdings wird dafür nur ein Marker benötigt und nicht drei. Als Hook habe ich die Eigenschaft header_layout = 1, 2 und 3 verwendet und die drei Marker nachher mit SQL im Typoscript angesprochen:

  1. # Inhalt ausgeben: Box1
  2. BOX1 = CONTENT
  3. BOX1 {
  4. table = tt_content
  5. select.orderBy = sorting
  6. select.where = colPos = 2 AND header_layout = 1
  7. }
  8. # Inhalt ausgeben: Overlay Grafik Box1
  9. IMGBOX1 = CONTENT
  10. IMGBOX1 {
  11. table = tt_content
  12. select.orderBy = sorting
  13. select.where = colPos = 3 AND header_layout = 1
  14. }
  15. # Inhalt ausgeben: Box2
  16. BOX2 = CONTENT
  17. BOX2 {
  18. table = tt_content
  19. select.where = colPos = 2 AND header_layout = 2
  20. }
  21. # Inhalt ausgeben: Overlay Grafik Box2
  22. IMGBOX2 = CONTENT
  23. IMGBOX2 {
  24. table = tt_content
  25. select.orderBy = sorting
  26. select.where = colPos = 3 AND header_layout = 2
  27. }
  28. # Inhalt ausgeben: Box3
  29. BOX3 = CONTENT
  30. BOX3 {
  31. table = tt_content
  32. select.where = colPos = 2 AND header_layout = 3
  33. }
  34. # Inhalt ausgeben: Overlay Grafik Box3
  35. IMGBOX3 = CONTENT
  36. IMGBOX3 {
  37. table = tt_content
  38. select.orderBy = sorting
  39. select.where = colPos = 3 AND header_layout = 3
  40. }


Das funktioniert zwar, doch der Nachteil war, dass alle Inhaltselemente im Backend in der rechten Spalte angezeigt werden und man nicht daraus schliessen kann welches zu welcher Box gehört.
Mit dem neuen Backend Layout lässt sich das Elegant lösen: Das Layout wird zunächst wie im erwähnten Tutorial beschrieben erstellt.
Da nur noch das Feld colPos benötigt wird muss noch etwas angepasst werden für die erste Box wählte ich den Wert colPos = 21 für die zweite 22 und für die dritte 23 und für die Imageboxen in der dritten Spalte entsprechend 31, 32, 33. Da es sich um eine bestehende Seite handelt müssen alle Elemente die bisher colPos 2 und header_layout =1 (2 und 3) verwendet haben angepasst werden. Das geht am schnellsten mit 6 SQL-Befehlen in phpmyadmin:
  1. UPDATE `tt_content` SET colPos = 21 WHERE colPos = 2 AND header_layout = 1
  2. UPDATE `tt_content` SET colPos = 22 WHERE colPos = 2 AND header_layout = 2
  3. UPDATE `tt_content` SET colPos = 23 WHERE colPos = 2 AND header_layout = 3
  4. UPDATE `tt_content` SET colPos = 31 WHERE colPos = 3 AND header_layout = 1
  5. UPDATE `tt_content` SET colPos = 32 WHERE colPos = 3 AND header_layout = 2
  6. UPDATE `tt_content` SET colPos = 33 WHERE colPos = 3 AND header_layout = 3

Nach dem Update werden zunächst keine Inhalte mehr in der rechten Spalte angezeigt, weil die Abfrage im Setup nicht mehr stimmt. Dies muss nun neu heissen:

  1. # Inhalt ausgeben: Box1
  2. BOX1 = CONTENT
  3. BOX1 {
  4. table = tt_content
  5. select.orderBy = sorting
  6. select.where = colPos = 21
  7. }
  8. # Inhalt ausgeben: Overlay Grafik Box1
  9. IMGBOX1 = CONTENT
  10. IMGBOX1 {
  11. table = tt_content
  12. select.orderBy = sorting
  13. select.where = colPos = 31
  14. }
  15. # Inhalt ausgeben: Box2
  16. BOX2 = CONTENT
  17. BOX2 {
  18. table = tt_content
  19. select.where = colPos = 22
  20. }
  21. # Inhalt ausgeben: Overlay Grafik Box2
  22. IMGBOX2 = CONTENT
  23. IMGBOX2 {
  24. table = tt_content
  25. select.orderBy = sorting
  26. select.where = colPos = 32
  27. }
  28. # Inhalt ausgeben: Box3
  29. BOX3 = CONTENT
  30. BOX3 {
  31. table = tt_content
  32. select.where = colPos = 23
  33. }
  34. # Inhalt ausgeben: Overlay Grafik Box3
  35. IMGBOX3 = CONTENT
  36. IMGBOX3 {
  37. table = tt_content
  38. select.orderBy = sorting
  39. select.where = colPos = 33
  40. }

Nun müssen in den Eigenschaften der root Seite allenfalls noch TypoScript Konfigurationen entfernt werden z.B. wenn die anstatt dem Standard Layout 1, 2, 3 etc. andere Namen vergeben wurden.