CSS-Klassen der Inhaltselemente in der BE-Übersicht ausgeben

[Nina]

Ich würde gerne etwas im Contao-Backend ausprobieren. Dazu müsste ich jedoch - sofern das Feld befüllt ist - die CSS-Klassen die vom Nutzer in einem Inhaltselement definiert wurden, in der Inhaltselemente-Übersicht des Artikels "ausgeben". Nicht sichtbar, sondern im Code.

Bisher sieht die Stelle so aus:
Ich bearbeite den Artikel über das Bleistift-Symbol und sehe die Inhaltselemente, die darin liegen. Sie haben im HTML diesen Aufbau:

<div id="tl_listing" class="tl_listing_container parent_view">
<div class="tl_header ...">..</div>
<ul id="ul_X">
  <li id="li_X">
    <div class="tl_content even click2edit toggle_select hover-div">
      Hier kommen die Funktionsicons mit denen man das Inhaltselement bearbeiten, löschen etc. kann, 
      sowie der CE-Typ, etc.
    </div>
  </li>
</div>
...

Wenn nun der Nutzer beim Bearbeiten des Inhaltselements in das Feld "CSS ID/Klasse" beim Klassenfeld etwas eingegeben hat, soll das auch in der CE-Übersicht des Artikels erscheinen. Der Aufbau wäre dann so:

<div id="tl_listing" class="tl_listing_container parent_view HIER-KOMMEN-DIE-KLASSEN-AUS-DEM-INHALTSELEMENT">
<div class="tl_header ...">..</div>
<ul id="ul_X">
  <li id="li_X">
    <div class="tl_content even click2edit toggle_select hover-div">
      Hier kommen die Funktionsicons mit denen man das Inhaltselement bearbeiten, löschen etc. kann, 
      sowie der CE-Typ, etc.
    </div>
  </li>
</div>
...

Kann man das mit überschaubarem Aufwand lösen?

[Stefko]

Ahoi,

zu Deinem eigentlichen Problem kann ich wenig hilfreiches beitragen, aber eines kam mir gerade in den Kopf.
Könnte dies nicht uU zu Problemen führen, wenn zB eine FE CSS-Klasse (zufällig) den gleichen Namen hat wie eine im BE-CSS vorhandene?

[Nina]

Theoretisch wäre das möglich, aber eher unwahrscheinlich (zumindest bei den Klassen, die ich bei Projekten meinen RedakteurInnen zur Verfügung stelle)

[cliffparnitzky]

Hi Nina,
hmm, ich denke nicht, dass das mit vertretbarem Aufwand machbar ist.

Grundsätzlich müsste das "update-unsicher" in DC_Table gemacht werden

Hinzu kommt deiner gewünscht HTML Struktur.
Wenn man deiner Wunsch-HTML-Struktur folgt, soll ja das Listing die CSS Klassen aller seiner Inhaltselemente bekommen.
Das ist dann quasi so, dass man vor einer Schleife Werte setzt, die aber erst innerhalb der Schleife ausgelesen werden.

Die CSS Klassen jeweils innerhalb des <ul> setzen wäre dann sicher besser.

Die Frage die ich mir dabei aber stelle ist, warum du Frontend-CSS-Klassen im Backend-Code einbinden willst?
Dann wären ja auch noch passende CSS Definitionen notwendig.

--> ohne die wäre der Einwand von Stefko auch kein Problem ... 2 Mal die gleiche Klasse zugewiesen macht keine Sorgen ... 2 Mal die CSS Definiton zu einer Klasse kann u.U. zu nicht gewollten Ergebnissen führen.

Was hast du denn genau vor?

[Nina]

Die CSS Klassen jeweils innerhalb des <ul> setzen wäre dann sicher besser.

Ich möchte dass die CSS-Klassen auf dem jeweiligen LI sitzen, das in der Auflistung insgesamt ein Inhaltselement repräsentiert (mit allen seinen Funktionsicons, Name, Link etc).

Die Frage die ich mir dabei aber stelle ist, warum du Frontend-CSS-Klassen im Backend-Code einbinden willst?
Dann wären ja auch noch passende CSS Definitionen notwendig.
Was hast du denn genau vor?

Mir schwebt ein neues Backend-Theme vor, das den Redakteuren hilft, schon an dieser Stelle etwas nachzuvollziehen, wie die Inhalte im Frontend angeordnet werden. Mir ist klar, dass das nur in Maßen geht.

Also ungefähr so:
Man stellt die BE-Nav prinzipiell so ein, dass sie hinter einem Hamburger-Menü oder in einem Dropdown ist, also oberhalb.
Der Hauptbereich nutzt die vollständige verfügbare horizontale Fläche des Backends.
Wenn nun in der Auflistung (Parent View) die einzelnen Listenpunkte, die die Inhaltselemente repräsentieren, aus dem Inhaltselement z.B. die zugewiesenen Grid-Klassen (beispielsweise Bootstrap) enthalten, könnte ich sie in der Übersicht korrekt in ihrem Zusammenspiel zueinander simulieren und Spalten/Reihenweise anzeigen. Wäre natürlich ein gewisser Aufwand, das per CSS stabil abzubilden, aber durchaus machbar. Auch bestimmte weitere zugewiesene Klassen könnte ich schon ein wenig in dieser Ansicht simulieren (bestimmte Effekte wie eine Hintergrundfarbe oder einen Schatten auf einem Inhaltselemente-Rahmen.

Manch einer würde nun sagen, dass das überflüssig ist, weil man eh die Frontend-Vorschau hat oder es Dinge, wie die Spaltensets-Erweiterung gibt. Ich habe aber beobachtet, dass beides für die Redakteure einen Umweg bedeutet. Eine direkt im BE sichtbare Hilfe, insbesondere bei den Spaltendarstellungen wäre für sie eine enorme Unterstützung.

Also ja, es ist noch eine sehr wackelige Überlegung. Mir geht es deshalb erstmal um die grundsätzliche Frage, ob ich - updatesicher - die Klassen aus den Inhaltselemente auf die LIs des Parent Views ziehen kann oder ob das prinzipiell ausgeschlossen ist.

[cliffparnitzky]

Ah, nun wird es klarer.

CSS Klasse am "li" macht es einfacher.

Also, "update-unsicher" muss es ungefähr da hin: https://github.com/contao/contao/blo...able.php#L4381

Updatesicher könnte man es via Hook (parseBackendTemplate) und String-Replacement versuchen.

[PaddySD]

Ich weiss jetzt nicht, wie stark Du auf Deine Idee schon fest gelegt bist. Nur um da vielleicht noch einen anderen Ansatz einzubringen.
Ich hab sowas mal in einer 3.5 umgesetzt, da die Nutzer auch eine Vorschau wollten. Da mir die ganze Sache aber kompliziert schien, habe ich die FE-Vorschau abgwandelt, und eine Mouse-hover-Vorschau draus gemacht.

Will heissen, bei mouse-hover über das Vorschau-Icon ging ein "Modal" auf, dass eine Vorschau zeigte. Das war für den Überblick genug. Mouse-out wars wieder weg.

Vielleicht wäre das hier auch etwas? Es macht die Konstruktion insgesamt einfacher, denn das darstellen muss nicht mit der BE-Seite gehandelt werden, sondern das macht der Preview für Dich.

[mdoll]

Hi,

ich klinke mich hier mal ein, denn ich möchte etwas Ähnliches bei einer Contao 4.8.7 erreichen.

Wie kann ich im Backend in der Übersicht der Inhaltselemente eines Artikels die vergebenen CSS-Klassen und -IDs ausgeben? Ich weiß, wie ich das bei einem Artikel ausgeben kann, das geht analog zu der Ausgabe der IDs.

contao\dca\tl_article.php

<?php
$GLOBALS['TL_DCA']['tl_article']['list']['label']['fields'][] = 'id'; 
$GLOBALS['TL_DCA']['tl_article']['list']['label']['fields'][] = 'cssID'; 
$GLOBALS['TL_DCA']['tl_article']['list']['label']['format'] = '%s <span style="font-weight:normal; padding-left: 3px;">[%s, ID: %s, CSS: %s]</span>';

Das zeigt mir im BE für einen Artikel neben der Artikel-ID auch das Array mit der CSS-ID und -Klasse an.

Bei Inhaltselementen klappt das aber nicht. So habe ich es versucht:

contao\dca\tl_content.php

<?php
$GLOBALS['TL_DCA']['tl_content']['list']['label']['fields'][] = 'id'; 
$GLOBALS['TL_DCA']['tl_content']['list']['label']['fields'][] = 'cssID'; 
$GLOBALS['TL_DCA']['tl_content']['list']['label']['format'] = '%s <span style="font-weight:normal; padding-left: 3px;">[%s, ID: %s, CSS: %s]</span>';

Es wird aber nichts ausgegeben. Wie muss ich meinen Eintrag in der tl_content.php ändern, damit die Ausgabe im BE auf für Inhaltselemente klappt?

Danke und Gruß
Mathias

[Balduin]

Hallo, ich hatte genau den selben Gedankengang wie Nina und bin nun auf diesen Beitrag gestoßen. Gibt es da mittlerweile neue Entwicklungen?

Ich stelle schon seit Jahren meinen Kunden Artikel-Klassen zur Verfügung mit denen einzelne Inhaltselemente innerhalb eines Artikels im Frontend nebeneinander als Spalten dargestellt werden können. Das funktioniert zwar gut, ist aber für den Redakteur immer ein bischen unübersichtlich im Backend - besonders wenn es mehrere "Zeilen" mit Spalten gibt und man für jede "Zeile" einen eigenen Artikel anlegen muß.
Ich weiß zwar, daß es da Contao-Erweiterungen gibt die eine Spaltenansicht im Backend ermöglichen, aber ich bin immer sehr darum bemüht auf solche invasiven Plugins zu verzichten und nach Möglichkeit alles mit Contao-Bordmitteln umzusetzen. Zumal PlugIns auch die dumme Angewohnheit haben irgendwann nicht mehr weiterentwickelt zu werden (remember EFG).

Mittlerweile wäre es auch einfach zeitgemäß wenn es sowas bald standardmäßig für Contao geben würde. Typo3 hat das schon seit Jahren und Wordpress hat 2019 mit Gutenberg auch ordentlich nachgelegt.

Vielleicht bin ich aber auch einfach schlecht informiert und es gibt schon sowas für Contao - dann wäre ich für Hinweise sehr dankbar!