Best Practice Theme-Benutzerfreundlichkeit für Redakteure

[Jan-W]

Hallo zusammen,

ich würde gern von euch hören, was jeder Einzelne von euch persönlich für den besten Weg hält, die Themes Redakteur-freundlich umzusetzen.

Ich tue mich schwer damit, meinen Kollegen (die den Content einpflegen) einfach zu bedienende Gestaltungsfreiheiten zu lassen.

Ein Beispiel:
Eine Seite soll mit Content-Abschnitten befüllt werden. Bei jedem Abschnitt soll der Benutzer Einstellungsmöglichkeiten haben:

• Hintergrundfarbe oder -bild
• Maximalbreite des Inhalts (schmal, mittel, breit)
• Abstände der Abschnitte zueinander
• ...

Bisher habe ich CSS-Klassen angelegt, die meine Kollegen einem Artikel zuweisen können. Allerdings wird es schnell unübersichtlich, wenn das Feld mit Klassen überladen wird, wie z. B. "bg-blau schmal margin-top margin-bottom". Außerdem müssen meine Kollegen dann wissen, welche Klassen sie nutzen können.

RockSolid Custom Elements ist vielversprechend, doch hier habe ich dann das Problem, dass die Benutzer die Standard-Elemente nicht mehr benutzen dürfen, weil hier alle Einstellungsmöglichkeiten fehlen. Am liebsten wäre es mir, wenn ich den Artikeln individuelle Felder zuweisen könnte. Custom Elements funktioniert aber leider nur für Inhaltselemente.

Mehrspaltige Inhalte sind auch so eine Sache. Ich will es meinen Kollegen (und den Kunden) nicht zumuten, hier mit CSS-Klassen aus dem "12-Spalten Grid" zu arbeiten.

Wie macht ihr das bei euren Projekten?

[Bennie]

Kurze Antwort dazu : Ich löse das nahezu alles tatsächlich mit den rocksolid custom-elements.
Alle Deine Anforderungen

Hintergrundfarbe oder -bild
Maximalbreite des Inhalts (schmal, mittel, breit)
Abstände der Abschnitte zueinander

bekommt man damit umgesetzt ebenso die Mehrspaltigkeit. Dafür mache ich dann eben für jeden benötigten Fall ein custom Element, z.B. 2 Spalter-mit Bild oder 2 Spalter mit Auswahl der Hintergrundfarben etc..
Das setzt voraus, dass man die Templates entsprechend aufbaut mit den grid Klassen oder einem array für Farbumschaltung.
Das ist schon ein mächtiges Tool. Ich setze das immer dann ein wenn Kunden wirklich viel selber administrieren wollen.

RockSolid Custom Elements ist vielversprechend, doch hier habe ich dann das Problem, dass die Benutzer die Standard-Elemente nicht mehr benutzen dürfen, weil hier alle Einstellungsmöglichkeiten fehlen. Am liebsten wäre es mir, wenn ich den Artikeln individuelle Felder zuweisen könnte. Custom Elements funktioniert aber leider nur für Inhaltselemente.

Das habe ich nicht ganz verstanden, was meinst Du ? Man kann doch mit der Erweiterung ce-access bestimmen welche Elemente benutzt werden dürfen.

[Jan-W]

Das habe ich nicht ganz verstanden, was meinst Du ? Man kann doch mit der Erweiterung ce-access bestimmen welche Elemente benutzt werden dürfen.

Folgendes Szenario: Ich will einen Artikel mit Hintergrundbild anlegen und diesen mit mehreren Inhaltselementen füllen: Text, Galerie, Akkordeon. Ich fände es praktisch, wenn ich einem Artikel eigene Felder hinzufügen könnte. Dann könnte ich innerhalb dieses Artikels die Standard-Inhaltselemente von Contao nutzen.

Mit Custom Elements muss ich für jeden Sonderfall ein eigenes Element anlegen. Angenommen, ich will zuerst einen Text und darunter eine Galerie einbinden. Beide Elemente sollen mit dem gleichen Hintergrund hinterlegt sein. Kein Problem, wenn ich dem Artikel den Hintergrund zuweise. Bei zwei getrennten Inhaltselementen sind es aber zwei getrennte Hintergrundbilder.

Ich habe mal ein schnell und flüchtig erstelltes Beispiel angehängt. Wenn ich mit Custom Elements arbeite, habe ich leider keine Verwendung für Artikel.

Vielleicht habe ich hier aber nur eine Blockade. Deshalb wollte ich gern wissen, wie andere mit Artikeln und Inhaltselementen umgehen.

[MacKP]

Hallo Jan-W,
dann schau dir mal die Erweiterung an: https://github.com/menatwork/semantic_html5/
Damit kannst du beliebige Elemente verschachteln und dann eben dem Umliegenden Element die Eigenschaften geben.

Wenn du Content-Elemente selber erweitern willst, dann kannst du das natürlich auch mit einer eigenen kleinen Erweiterung machen (Felder hinzufügen etc.). Wenn das aber nicht so nach deinem Geschack ist, dann brauchst du noch etwas anderes...

Für einfachere Klassenvergabe würde ich mir mal das hier anschauen: https://github.com/Craffft/contao-css-style-selector

Vor Contao4 hab ich immer das hier benutzt: https://github.com/psi-4ward/stylepicker4ward
Da konnte man sehr einfach und sehr detailiert konfigurieren, wo welche Klasse überhaupt ausgewählt werden kann. Dann noch die Klassen selber mit einer Beschreibung, einem Bild und einem einfachen Namen versehen. Wenn die Erweiterung aber für Contao4 fitt gemacht werden soll, dann schreib mal baumannsv -> https://community.contao.org/de/memb...5268-baumannsv
Mit dem hatte ich schon mal gesprochen die Erweiterung für Contao4 fitt zu machen und zu erweitern. Aber hatte bisher noch kein lohnendes Projekt um das zu finanzieren...

Viele Grüße

[Bennie]

@Jan-W
Ach dann hatte ich das missverstanden, dachte es ging darum welche Inhaltselemente überhaupt genutzt werden dürfen .
Für Deinen Fall nehme ich tatsächlich auch die custom elements und baue mir damit einen Wrapper der dann die Elemente umschließt, als z.B. einen Start Wrapper der das Hintergrundbild beinhaltet und einen Stop Wrapper der lediglich das schließende </div> enthält.
Aber letztlich ist das ja mit semantic_html ähnlich umzusetzen - Das "Gewrappe" bleibt einem dann nicht erspart

[MacKP]

@Jan-W
Aber letztlich ist das ja mit semantic_html ähnlich umzusetzen - Das "Gewrappe" bleibt einem dann nicht erspart

Geht mit semantic_html aber wesendlich schneller, da dass schließende Element direkt mit erstellt wird. Und durch die Farbliche Hervorhebung kann man auch besser erkennen, was zusammen gehört.

Viele Grüße

[mlweb]

@MacKP Off Topic: Dein neues Profilbild irritiert micht leicht. Der Wiedererkennungseffekt fehlt.

[Bennie]

Vielleicht sollte ich noch erwähnen, dass meine Wrapper bzw. custom elements dann so gebaut sind, dass man beim Anlegen auswählen kann über ein select oder radiobuttons welche Hintergrundfarbe man beispielsweise haben möchte.
Da gibt es wie so oft mehrere Wege, wobei ich mich deswegen dafür entschieden habe da es mir für "Laien" am einfachsten erschien einfach zu sagen wähle dies, dann jenes und fertig

[MacKP]

Das geht dann bei semantic_html auch über CSS-Klassen und die können dann über die erwähnten Erweiterungen auswählbar gemacht werden ;-)

Viele Grüße

[Jan-W]

dann schau dir mal die Erweiterung an: https://github.com/menatwork/semantic_html5/
Damit kannst du beliebige Elemente verschachteln und dann eben dem Umliegenden Element die Eigenschaften geben.

...

Für einfachere Klassenvergabe würde ich mir mal das hier anschauen: https://github.com/Craffft/contao-css-style-selector

Danke für die Tipps. Ich bin jedem Programmierer unheimlich dankbar, der Zeit in Erweiterungen investiert. Bei Kunden-Projekten möchte ich allerdings so wenige Erweiterungen wie möglich nutzen. Und dann ist es mir lieber, wenn eine Firma dahintersteckt - die gern auch Geld nehmen kann. Privatpersonen haben nicht immer die Zeit, ihre Entwicklungen auf dem aktuellen Stand zu halten. Die beiden genannten Erweiterungen wurden seit 2 Jahren nicht mehr aktualisiert. "Contao CSS Style Selector" geht aber schon in die Richtung, die ich mir wünsche.

Wenn du Content-Elemente selber erweitern willst, dann kannst du das natürlich auch mit einer eigenen kleinen Erweiterung machen (Felder hinzufügen etc.).

Weißt du, ob ich auch die Artikel um weitere Felder ergänzen kann? Ich finde leider nur Anleitungen, um Inhaltselemente zu erweitern.

Vielleicht sollte ich noch erwähnen, dass meine Wrapper bzw. custom elements dann so gebaut sind, dass man beim Anlegen auswählen kann über ein select oder radiobuttons welche Hintergrundfarbe man beispielsweise haben möchte.

Mit Wrappern hatte ich es auch einmal versucht - ganz glücklich war ich aber nicht, weil ungeübte Benutzer mit den öffnenden und schließenden Elementen durcheinander kommen können.

[MacKP]

Danke für die Tipps. Ich bin jedem Programmierer unheimlich dankbar, der Zeit in Erweiterungen investiert. Bei Kunden-Projekten möchte ich allerdings so wenige Erweiterungen wie möglich nutzen. Und dann ist es mir lieber, wenn eine Firma dahintersteckt - die gern auch Geld nehmen kann. Privatpersonen haben nicht immer die Zeit, ihre Entwicklungen auf dem aktuellen Stand zu halten. Die beiden genannten Erweiterungen wurden seit 2 Jahren nicht mehr aktualisiert. "Contao CSS Style Selector" geht aber schon in die Richtung, die ich mir wünsche.

Manchmal müssen Erweiterungen auch kein update bekommen, wenn die noch das machen was die machen sollen ;-)

Weißt du, ob ich auch die Artikel um weitere Felder ergänzen kann? Ich finde leider nur Anleitungen, um Inhaltselemente zu erweitern.

Im Grunde so wie bei Content-Elementen auch. Nur eben bei tl_article (die Tabelle von Artikeln).

Mit Wrappern hatte ich es auch einmal versucht - ganz glücklich war ich aber nicht, weil ungeübte Benutzer mit den öffnenden und schließenden Elementen durcheinander kommen können.

[/QUOTE]
Dann schau dir wie gesagt mal semantic_html5 an. Da wird direkt ein schließendes Element angelegt und auch farbig hervorgehoben, welche Elemente (öffnend und schließend) zusammen gehören.

Viele Grüße

[Jan-W]

Dann schau dir wie gesagt mal semantic_html5 an. Da wird direkt ein schließendes Element angelegt und auch farbig hervorgehoben, welche Elemente (öffnend und schließend) zusammen gehören.

Ich habe es mir angesehen - ich fürchte meine Wünsche sind zu speziell, als dass semantic_html5 mir weiterhelfen kann.

Ich würde mich gern in die Bearbeitung des Article-Templates einarbeiten, doch leider habe ich so gar keine Ahnung von der Materie. Die Tutorials sind für Contao 3 ausgelegt. Wenn ich es richtig verstanden habe, muss bei Contao 4 durch Symfony wieder ganz anders an die Sache herangegangen werden.

Das Thema ist wohl zu Komplex, als dass es einem Laien in 5 Minuten erklärt werden kann ?

[MacKP]

Du kannst dir die C3 Tutorials immer noch als Vorbild nehmen.
Dazu dann noch den Vortrag von Bugbuster und dann sollte das klappen: https://docs.contao.ninja/de/erweiterung-c3-c4.html

Viele Grüße

[Andreas]

Du kannst für jedes BE-Formular neue Felder anlegen. Siehe erstmal hier https://docs.contao.org/books/manual...nzufuegen.html oder hier https://books.google.de/books?id=FwA...%BCgen&f=false

Wenn du dann für tl_article ein Feld angelegt hast, mit welchem man ein Hintergrundbild auswählen kann, dann kannst du im Template mod_article entweder das Bild als Inline-Style aufsetzen.

<div class="mod_article ..." style="background-image:url(<?= $thePathVariable ?>)" ...

Oder, auch über dieses Template, entsprechendes Style in den HEAD der Seite bringen.

<?php
$GLOBALS['TL_HEAD'][] = '
<style>
#'.$this->cssId.' {
  background-image: url('.$thePathVariable.');
}
</style>
';
?>

Dann kannst du eine Checkboxliste anlegen zur Auswahl deiner Klassen und diese auch ins Template bringen.

Für Spaltenaufteilungen würde ich dma_simple_grid https://github.com/DMAGmbH/dma_simple_grid verwenden mit dem CSS deiner Wahl, z.B. Unsemantic, Foundation, Bootstrap ...