RSCE - Buttonbox
von Bernhard Renner
Am 12.12.2024 fand Die Contao (Morning) Show #20 – Twig in der Praxis statt.
Hier wurde anhand von Codebeispielen Einblick in die Praxis mit Twig-Templates geplaudert. Meine Beispiele möchte ich hier nochmals bereit stellen und beginne mit der Buttonbox.
Es werden dazu 2 Dateien benötigt:rsce_button-box_config.php
rsec_button-box.html.twig
// templates/theme/rsce_button-box_config.php
<?php
return [
'label' => ['Button-Box','Erstellen Sie eine Button-Box.'],
'types' => ['content'],
'contentCategory' => 'texts',
'standardFields' => ['cssID'],
'fields' => [
'buttons' => [
'label' => ['Buttons',''],
'elementLabel' => '%s. Button',
'inputType' => 'list',
'minItems' => 1,
'fields' => [
'url' => [
'label' => &$GLOBALS['TL_LANG']['MSC']['url'],
'inputType' => 'text',
'eval' => [
'mandatory' => false,
'rgxp' => 'url',
'decodeEntities' => true,
'maxlength' => 2048,
'dcaPicker' => true,
'tl_class' => 'w33'
]
],
'linkTitle' => [
'label' => ['Link-Text','Der Link-Text wird anstelle der Link-Adresse angezeigt.'],
'inputType' => 'text',
'eval' => [
'tl_class' => 'w33'
]
],
'titleText' => [
'label' => ['Link-Titel','Der Link-Titel wird als title-Attribut im HTML-Markup eingefügt.'],
'inputType' => 'text',
'eval' => [
'tl_class' => 'w33'
]
],
'target' => [
'label' => &$GLOBALS['TL_LANG']['MSC']['target'],
'inputType' => 'checkbox',
'eval' => [
'tl_class' => 'w33 m12'
]
],
'linkClass' => [
'label' => ['CSS-Klasse','Hier können Sie beliebig viele Klassen für den Button eingeben.'],
'inputType' => 'text',
'eval' => [
'tl_class' => 'w33'
]
],
],
],
]
];
{# templates/theme/rsce_button-box.html.twig #}
<div class="{{ class }} button-wrapper" {{ cssID|raw }}>
{% for button in buttons %}
{%- set btn_attributes = attrs()
.addClass('btn-item')
.addClass(button.linkClass|default)
.set('role', 'button')
.setIfExists('target', button.target|default ? '_blank' : null)
.setIfExists('href', button.url|insert_tag)
.setIfExists('title', button.titleText|default)
-%}
<a {{ btn_attributes }}>
{{ button.linkTitle|default }}
</a>
{% endfor %}
</div>
{# vielen Dank an dieser Stelle an Sebastian @zoglo für die Verbesserung des Codes! #}
Hinweis
Sebastian hat mich nach der Show kontaktiert, und mir einen doch viel saubereren Code zukommen lassen - siehe oben.
Die Ausgabe wird mit Attributen durchgeführt..setIfExists('href', button.url|insert_tag)
» der Filter insert_tag
ist notwendig, damit der Link an dieser Stelle auch korrekt erstellt wird.
Die Buttonbox ist so aufgebaut, dass im Backend 1 oder mehrere Buttons/Links angelegt werden können.
Im Template ist role="button"
angeführt, sodass dieser Link als Button erkannt und gewertet wird.
Das Backend sieht dann so aus:
Die Contao (Morning) Show #20 – Twig in der Praxis
zum Nachschauen könnt ihr über diesen Link auf Youtube erreichen.
Kommentare
Einen Kommentar schreiben