'image' => [
'label' => ['Bild','ein Standortbild auswählen'],
'inputType' => 'fileTree',
'eval' => [
'tl_class' => 'clr',
'fieldType' => 'radio',
'filesOnly' => true,
//'extensions' => \Contao\Config::get('validImageTypes'),
'extensions' => '%contao.image.valid_extensions%',
'mandatory' => true,
],
],
als background-image:
style="background-image:url({{ figure(image, {}).image.img.src }})"
als <figure> aus einer Liste 'inputType' => 'list':
{% for package in packages %}
{% set options = {} %}
{% set figure = contao_figure(package.image, options) %}
{{ figure|raw }}
{% endfor %}
oder wenn size mit im Backend definiert ist:
{% for package in packages %}
{% set options = {} %}
{% set figure = contao_figure(package.image, size, options) %}
{{ figure|raw }}
{% endfor %}
wenn als Variable z.b. myText bereit gestellt wird, der als <figcaption> befüllt werden soll:
siehe auch Contao Doku - Image Studio
{% set options = {
metadata: { caption: myText }
} %}
{% set figure = contao_figure(singleSRC, size, options) %}
{{ figure|raw }}
'types' => [
'label' => ['Art der Werbung','die Art der Werbung auswählen'],
'inputType' => 'select',
'eval' => [
'tl_class' => 'w50',
],
'options' => [
'offline-transparent',
'online-digital-signage',
'online-transparent',
'social-media',
],
'reference' => &$GLOBALS['TL_LANG']['MSC']['promotype'],
],
für die Backendanzeige: /contao/languages/de/default.php
<?php
$GLOBALS['TL_LANG']['MSC']['promotype'] = [
'offline-transparent' => 'Transparentwerbung',
'online-digital-signage' => 'Digital Signage',
'online-transparent' => 'Online Transparentwerbung',
'social-media' => 'Social Media',
];
für die Ausgabe im Frontend: /contao/languages/de/default.xlf
<?xml version="1.0" ?><xliff version="1.1">
<file datatype="php" original="src/Resources/contao/languages/en/default.php" source-language="en" target-language="de">
<body>
<trans-unit id="MSC.offline-transparent">
<source>types.offline-transparent</source>
<target>Transparentwerbung</target>
</trans-unit>
<trans-unit id="MSC.online-digital-signage">
<source>types.online-digital-signage</source>
<target>Digital Signage</target>
</trans-unit>
<trans-unit id="MSC.online-transparent">
<source>types.online-transparent</source>
<target>Online Transparentwerbung</target>
</trans-unit>
<trans-unit id="MSC.social-media">
<source>types.social-media</source>
<target>Social Media</target>
</trans-unit>
</body>
</file>
</xliff>
Ausgabe im Frontend aus einer Liste 'inputType' => 'list':
<p class="text">{{ ('MSC.' ~ package.types)|trans({}, 'contao_default') }}</p>
siehe /templates/theme/rsce_packagelist.html.twig und /src/Twig/AppExtension.php
<p>{{ insert_tag('page::title') }}</p>
oder für Email (mit der Variablen 'email'):
<p>{{ insert_tag('email::' ~ email) | raw }}</p>
weiters kann die erzeugte Klasse mit befüllt werden:
{% set emailLink = insert_tag('email::' ~ email) %}
{{ emailLink | replace({'class="email"': 'class="email text-dark"'}) | raw }}
<div class="hero-thumb1{{ thumbclassLeft is not empty ? ' ' ~ thumbclassLeft : '' }}"
In diesem Beispiel prüft der Ausdruck, ob thumbclassLeft nicht leer ist (thumbclassLeft is not empty). Wenn das der Fall ist, wird ein Leerzeichen (' ') hinzugefügt und dann der Wert von thumbclassLeft. Wenn die Variable leer ist, wird einfach ein leerer String ('') verwendet.
Das sorgt dafür, dass im HTML class="hero-thumb1 thumbclassLeft" ausgegeben wird, wenn thumbclassLeft gesetzt ist, und nur class="hero-thumb1" wenn nicht.
Abfragen, ob eine ausgewählte URL ein interner oder externer Link ist.
{% for set in iconsets %}
{% set isExternal = set.url starts with 'http' %}
<a href="{{ set.url|raw }}" {% if isExternal %}target="_blank" rel="noopener noreferrer"{% endif %}><span class="bi">&#x{{ set.icon|raw }}</span></a>
{% endfor %}
Hier wird (in der for-Schleife) abgefragt, ob die URL mit einem http beginnt. Falls JA, wird ein target="_blank" und rel="noopener noreferrer" gesetzt.
{# templates/content_element/gallery.html.twig #}
{% extends "@Contao/content_element/gallery.html.twig" %}
{% block list_item_attributes -%}
{%- set list = list|merge({'item_attributes': attrs().addClass('gallery-item').mergeWith(list.item_attributes|default)}) -%}
{{ parent() }}
{%- endblock %}
Contao Forum
Unter #5wird auch vermerkt, warum die Variante von mir unter #4nicht verwendet werden sollte.
{% extends "@Contao/content_element/gallery.html.twig" %}
{% block list_component %}
<ul class="custom-gallery">
{% for item in items %}
{% if item.image.picture.img.src is defined %}
{% set imagePath = item.image.getImageSrc(true) %}
<li style="background-image: url('{{ imagePath }}');"></li>
{% endif %}
{% endfor %}
</ul>
{% endblock %}
siehe auch Contao Forum
Slack
Problem: Controller oder Extension einer anderen Anwendung darf die Anpassung nicht überschreiben oder doppelt ausgeben
class="..." class="..."
{# templates/component/_headline.html.twig #}
{% use "@Contao/component/_headline.html.twig" %}
{% block headline_attributes -%}
{% set headline = headline|merge({attributes: attrs().addClass('foobar').mergeWith(headline.attributes|default)}) %}
{{ parent() }}
{%- endblock %}
{% extends "@Contao/content_element/download.html.twig" %}
{% set download_link_attributes = attrs()
.addClass('foobar')
.mergeWith(download_link_attributes|default)
%}
Erweiterung [terminal42/contao-node] und RSCE nutzen
rsce_nodes_config.php
<?php
return [
'label' => ['Nodes','Nodes auswählen.'],
'types' => ['content'],
'contentCategory' => 'texts',
'standardFields' => ['cssID'],
'fields' => [
'nodes' => [
'inputType' => 'standardField',
],
],
];
rsce_nodes.html.twig
{% set nodeIds = nodes|deserialize %}
<div class="{{ class }} nodes-box" {{ cssID|raw }}>
{% for id in nodeIds %}
{{ insert_tag('insert_node::' ~ id) | raw }}
{% endfor %}
</div>
Bootstrap 5 bietet die Möglichkeit über data-masonry='{"percentPosition": true }' Masonry zu nutzen
Beispiel Klasse galerie-masonry mit einfügen und über die im Backend ausgewählten Vorschaubilder pro Reihe die col- zu nutzen:
{% extends "@Contao/content_element/gallery.html.twig" %}
{% set attributes = attrs()
.addClass("content-#{type}--cols-#{items_per_row|default(4)} galerie-masonry")
.mergeWith(attributes|default)
%}
{% block list_attributes %}
{% set list_attributes = attrs()
.addClass('row')
.set('data-masonry', '{"percentPosition": true }')
.mergeWith(list_attributes|default)
%}
{{ list_attributes }}
{% endblock %}
{% block list_item_attributes %}
{% set col = 12 // data.perRow %}
{% set list_item_attributes = attrs()
.addClass('col-6 col-lg-' ~ col)
.mergeWith(list_item_attributes|default)
%}
{{ list_item_attributes }}
{% endblock %}
{% extends "@Contao/content_element/table.html.twig" %}
{% block table_attributes %}
{% set table_attributes = attrs()
.addClass('table row--2')
.addStyle("table-layout: fixed; width: 100%;")
.mergeWith(table_attributes|default)
%}
{{ parent() }}
{% endblock %}
Ergebnis:
<div class="content-table">
<table class="table row--2" style="table-layout: fixed; width: 100%;">
{% extends "@Contao/content_element/table.html.twig" %}
{% use "@Contao/component/_table.html.twig" %}
{% set default_header_cell_attributes = (default_header_cell_attributes|default({}))|merge({
scope: 'col'
}) %}
/templates/content_element/player.html.twig
{% extends "@Contao/content_element/player.html.twig" %}
{% block attributes %}
{% set aspectClass = 'aspect--' ~ data.playerAspect|replace({':': '-'}) %}
{% set attributes = attributes
.addClass('aspect')
.addClass(aspectClass)
%}
{{ parent() }}
{% endblock %}