Node add Template Fragen Drupal 8
am 21.03.2017 - 22:34 Uhr in
Hi Leute,
Drupal 8 ist für mich ne total umstellung und ist an einem Punkt gefühlt umständlich gemacht oder mir fällt einfach hierzu mehr umfassendes Grundwissen über Drupal 8.
Nunja, ich hab in Drupal 7 damals recht unkompliziert einen Hook definiert und ein node add template fix auf die Beine gestelllt und die felder die ich gerne hätte dann recht unkompliziert mit dpm rausgefunden.
In Drupal 8 ist ja Twig(mag sein, dass es toll ist, ich glaube man muss sich erstmal darauf einlassen, aber erstmal steht man da aufn Schlauch ohne Nachschlagen) und es macht keinen Sinn jetzt anders zu arbeiten.
Nunja, ich wollte auch in Drupal 8 mal eben fix node add für einen bestimmten content type umschreiben und hab schnell gemerkt als Display Suite nicht mal das kann, dass es bestimmt ein wenig umfangreicher ist als in Drupal 7.
Meine bisherige Lösung war ein wenig try and error, aber ich bin auf folgendes gestossen:
Ich nehme die form.html.twig Datei ausm Core kopiert und hab sie in mein Theme Template Ordner gepackt.
Hab mir dann die Arbeitsweise davon angeschaut und festgestellt, ok, das Ding wird bei allen "formen" aufgerufen und alles was ich dort deklariere wirkt global, also überlegt wie man ein vernünftiges if einbauen. Erster Gedanke war nach Content Type filtern, hat aber nicht geklappt.
Dann bin ich nach längerer Google Session auf die vorläufige Lösung gekommen:
{% if "adresse" in url('<current>') %}
Ansicht gar nicht so übel, hab dann /node/add/mycontenttype genommen, aber obwohl die Syntax "in" einen abgleich macht aber keinen 1:1, war ich enttäuscht, dass es nur mit vollen Pfad klappt im Gegensatz zu den beschreibungen im Netz. Nur mit voller Url bekomme ich true.
Danach kann ich dann mit dem Code hier:
{% for key, children in element if key|first != '#' %}
{% if key == 'title' %}
<div class="row">
<div class="col-md-6">{{ children }} <p> </p></div>
{% elseif key == 'field_marke' %}
<div class="col-md-6">{{ children }} <p> </p></div>
{% elseif key == 'field_adresse' %}
<div class="col-md-6">{{ children }} <p> </p></div>
{% elseif key == 'field_bilder' %}
<div class="col-md-6">{{ children }} <p> </p></div>
</div>
{% else %}
{{ children }}
{% endif %}
{% endfor %}
{% else %}
{{ children }}
Schön eigene Klassen dazupacken und insgesamt funktioniert das auch. Ich weiß nicht ob ein Form hook deutlich eleganter ausfallen würde, denn schliesslich muss ich ja wirklich die ganzen Felder einzeln durchgehen. Es ist noch nicht final zu Ende gedacht, aber es erfüllt jetzt meinen Zweck.
Vielleicht hat ein Drupal 8 Themer einen besonders heissen Tipp wie es anders geht. Per CSS durchformatieren ist wirklich blöd, weil ich ja das Bootstrap Theme benutze als basis. Daher wollte ich per Grid da mein eigenes "node/add" generieren.
Die Variante hat nur einen Nachteil, man muss wirklich die Felder namen rausfinden und natürlich muss man mit dem absoluten Pfad arbeiten.
Freue mich über Antworten.
- Anmelden oder Registrieren um Kommentare zu schreiben
So, Nachdem ich mich an
am 29.03.2017 - 21:58 Uhr
So,
Nachdem ich mich an field_group aus Drupal 7 erinnern konnte, dass man dort auch Klassen und viele Einstellungen machen konnte, habe ich nun das ganze in Drupal 8 mir mal als Modul installiert und nun kann ich meine "node/add" Sache wunderbar selbst mit divs einteilen indem ich eine linke, rechte, obere, untere usw. Gruppe als div erstelle und die klasse vom Bootstrap passend dazugebe.
Man kann Fieldgroups wunderbar in in Form Display anwenden und sich dann die Ausgabe nochmal passender ausgeben ohne umständliche Templates oder Hooks anzuwenden.
Sprich wer wie ich keine Lust aufs codieren im Template Lust hat, kann zum schöneren durchstylen des Form Displays eines Content Types einfach sich das Field_Group Modul gönnen und sich freuen :D
Layouts
am 30.03.2017 - 14:05 Uhr
Moin.
Nur ein kurzer Zusatz: ab Drupal 8.3 kannst Du die (aktuell noch experimentellen) Core-Module "Layout discovery" und "Field layout" für genau diesen Zweck verwenden.
Tipp: Beachte die Verhaltensregeln des DrupalCenter.