Definiertes Layout mit beliebigen Contao-Inhaltselementen befüllen

Hi,

ich möchte dieses zweispaltige Layout-Element hier in Contao erstellen:
Anhang 23662

Das Layout-Element soll zwei Anforderungen erfüllen:

1) Es soll ein zentrales HTML-Template besitzen
Wenn der Kunde bspw. später die Bilder-Spalte breiter haben möchte, möchte ich die Spalten-Einstellungen nicht bei jedem einzelnem Element ändern müssen.
In so einem Fall möchte ich in einem Template einfach eine neue CSS-Klasse eintragen (bspw. "col-md-8" statt "col-md-6").
D.h. eine Erweiterung wie die "RockSolid Columns" kommt nicht in Frage.

2) Es soll vom Redakteur flexibel mit Inhaltselementen befüllt werden können
Der Redakteur soll die Möglichkeit haben anstatt des Buttons bspw. auch ein Download-Element einzufügen.
D.h. er soll im Grunde in die zwei Spalten jedes beliebige Contao-Inhaltselement einfügen können.
An dieser Anforderung scheitern dann auch die "RockSolid Custom Elements", mit denen ich ja fix definieren muss welche Inhalte der Redakteur eintragen kann.

Wie würdet ihr das machen?
Kann man sowas in Contao realisieren?


Bei der Konkurrenz gibts das hier:
https://jweiland.net/typo3/showcase/gridelements.html
... wäre genau das was ich meine :D



Unter Contao 3.5 gab's diese geniale Erweiterung hier:
https://contao.org/de/erweiterungsli...000009.de.html

Diese Erweiterung hat die obigen Anforderungen im Grunde erfüllt – auch wenns für den Redakteur nicht sonderlich übersichtlich war.
Schade dass die Entwicklung offenbar eingestellt wurde.


Bitte um euren Rat bzw. eure Tipps – Vielen Dank!

Hallo,

das ginge mit eigenen Layoutbereichen. Wenn Du im Theme/Template angibst, dass Du zwei eigene Inhaltsbereiche benutzt, sollte das klappen.

LG
Hella

Warum genau soll das mit den Rocksolid Columns nicht klappen?

Dort kannst du sämtliche Inhaltselemente unterbringen und so viele wie du möchtest. Du kannst auch verschiedene Spaltenbreiten definieren, sogar einfacher als Klassen wie "col-md-8" zu verwenden. Oder genügt dir die Anzahl an Spalten(breiten) in diesem Fall nicht?

Zitat:

---

Zitat von fusch

das ginge mit eigenen Layoutbereichen. Wenn Du im Theme/Template angibst, dass Du zwei eigene Inhaltsbereiche benutzt, sollte das klappen.

---

Das wäre eine Lösung wenn das gesamte Seitenlayout zweispaltig sein sollte –
das macht aber das Layout nicht gerade lebendig :D

Ich möchte ja nur diesen einen Bereich zweispaltig machen.
Und der soll dann auf einer Seite auch mehrfach vorkommen können.

Hier ein Screenshot einer gesamten Seite der zeigt was ich meine:
Anhang 23663
... in der Mitte der Seite befindet sich auch der von mir angedachte zweispaltige Layoutbereich.

Zitat:

---

Zitat von dazzle89

Warum genau soll das mit den Rocksolid Columns nicht klappen?

---

Ich möchte nachträgliche Änderungen nur einmal (an einem Template) vornehmen müssen.
Wenn ich Rocksolid Columns verwende geht das nicht.

Denn angenommen ich realisier das Ganze mit den Rocksolid Columns:
Nun gibt es den Wunsch dass die erste Spalte breiter sein soll.
Ich muss dann ja überall wo meine zweispaltigen Layoutbereiche vorkommen die Spaltenbreite ändern.

Stimmt, dann kommen beide Vorschläge wohl nicht in Frage.

Wenn der Redakteur die Breite verändert, soll es sich nur auf die aktuelle Seite oder auf die gesamte Homepage beziehen?

Hallo thesweetg,
du könntest eine beliebige Grid Erweiterung nutzen (z.B. die hier -> https://github.com/DMAGmbH/dma_simple_grid) dann dein eigenes CSS für das Grid schreiben. Wenn dann das Layout doch mal anders sein soll (die Splaten von der Breite anders), dann musst du eben dein CSS anpassen und brauchst noch nicht mal ins Template.

Viele Grüße

Zitat:

---

Zitat von dazzle89

Wenn der Redakteur die Breite verändert, soll es sich nur auf die aktuelle Seite oder auf die gesamte Homepage beziehen?

---

Eine Änderung der Spaltenbreite soll sich dann immer auf alle Instanzen des Layout-Bereichs beziehen.

Die Idee wäre ja ein HTML-Template zu schaffen dass vom Redakteur mit Inhaltselementen befüllt werden dann.
Änderungen am HTML-Template macht dann der Entwickler.

Damit der Redakteur das CSS nicht anpassen muss, würde ich es vielleicht mit den Rocksolid Custom Elements versuchen. Diese erzeugen den Wrapper für beliebig viele Inhaltselemente, je nach gewünschter Anzahl noch mit Spalten. Die CSS-Klasse (z.B. col-md-8) steht in einem zentral ausgelagerten Text-Inhaltselement und wird im RSCE-Template includiert. Das Text-Element könnte sogar auch ein RSCE sein, damit du alle möglichen Klassen als Dropdown zur Verfügung stellen kannst.

@MacKP @dazzle89
Danke für eure Tipps – das wären Lösungen die die Anforderungen erfüllen.
Werd mir das mal anschauen.


Generell finde ich jedoch diese Wrapper-Methodik in Contao etwas umständlich:
- Der Redakteur sieht die Spaltenanordnung im Backend nicht, dort erscheint alles in Listenform.
- Die Ansicht ist nicht gerade benutzerfreundlich und alles andere als intuitiv benutzbar.
- Zumal müssen eine Reihe von Inhaltselementen ("Reihe Start", "Reihe Ende", "Spalte Start", etc.) angelegt werden nur um mal das "Grundlayout" zu schaffen.

Wenn ich mir vom Christkind/Osterhase was wünschen dürfte, dann würde das so aussehen:
Anhang 23665

1) Man legt für einen Artikel ein HTML-Template fest.
2) In diesem Template definiert man Platzhalter für Content-Elemente (in diesem Beispiel sinds zwei Platzhalter – Spalte 1 und 2).
3) Bearbeitet der Redakteur dann diesen Artikel, erscheint die Ansicht welche am Mockup zu sehen ist.

Bzgl. Usability wär das ein großer Sprung nach vorne denke ich –
aber ich weiß natürlich dass sowas in Photoshop schneller erstellt wird als im Code-Editor :D

Drag 'n Drop im Backend für Grids würde ich mir auch wünschen. Weiß jemand, ob sowas geplant ist?

Vor 1-2 Jahren hat jemand hier im Forum mal eine Erweiterung vorgestellt, die genau das macht. Auch mit Videos. Ich weiß aber nicht mehr wie sie heißt und wie der aktuelle Stand ist.

Meinst du vielleicht die hier:
https://contao.org/de/erweiterungsliste/view/Grix.html

... die ist von mir :D
Ist leider immer noch im Entwicklungsstadium.
Leider bin ich auch noch nicht dazu gekommen sie für Contao 4 zu adaptieren.

Zitat:

---

Zitat von thesweetg

Generell finde ich jedoch diese Wrapper-Methodik in Contao etwas umständlich:
- Der Redakteur sieht die Spaltenanordnung im Backend nicht, dort erscheint alles in Listenform.
- Die Ansicht ist nicht gerade benutzerfreundlich und alles andere als intuitiv benutzbar.
- Zumal müssen eine Reihe von Inhaltselementen ("Reihe Start", "Reihe Ende", "Spalte Start", etc.) angelegt werden nur um mal das "Grundlayout" zu schaffen.

---

Du könntest auch die Artikel als Wrapper nutzen mit dem entsprechenden CSS. Dann würde man sich diese Ebene schon mal sparen können (in einem Bereich können ja beliebig viele Artikel liegen).
Wobei es auch dann unübersichtlich werden kann, wenn die Artikel nicht gut benannt sind ;-)
Ansonsten werden einem die End-Elemente direkt von der Erweiterung angelegt. Also nicht ganz so viel Arbeit ;-)
Ich versuche noch baumannsv dazu zu bringen seine Erweiterung für Farben zum markieren von Verschachtelungen mit dma_simple_grid zu verheiraten. Dann sieht man das wesendlich besser.. aber naja. Vlt kommt das irgendwann mal.

Was ich an der Darstellung 'wie im Frontend' etwas unschön/unpraktisch finde: Sobald es mehr als zwei Spalten sind wirds dann auch im Backend etwas eng. Von daher wird da eine Linearisierung sehr viel früher nötig sein als im Frontend (wobei es da auch auf das Layout vom Frontend ankommt...). Ist dann am Ende doch wieder so wie aktuell. Und da finde ich es einfacher die Redakteure passend zu schulen und gut ist ;-)

Viele Grüße

Ist es vielleicht eine Idee, dass der Redakteur Frontenediting verwendet? Vielleicht wird es dann für die Redakteure einfacher/übersichtlicher. Christian hat die Erweiterung Rocksolid Frontendhelper ja gerade auf Youtube vorgestellt https://www.youtube.com/watch?v=wr0l608gJMI

Zitat:

---

Zitat von mlweb

Ist es vielleicht eine Idee, dass der Redakteur Frontenediting verwendet?

---

Stimmt, wenn es nur um das Bearbeiten eines Layouts geht ist das ein gutes Hilfsmittel.