rsce-text-bild.html.twig

rsce_text_bild.html.twig

{% extends "@Contao/content_element/_base.html.twig" %}

{% set attributes = attrs()
  .addClass(image_position|default)
  .addClass(text_alignment|default)
  .mergeWith(attributes|default)
%}


{%- block inner %}
  {% block content %}

    {% if image_position|default == 'media--above' or image_position|default == 'media--left' %}
      {{ contao_figure(image, size, {
        enableLightBox: true,
      }) }}
      <div class="textblock">
        {% if headline.text %}
          {{ block('headline_component') }}
        {% endif %}
        <div class="rte">
          {{ textarea|raw }}
        </div>
      </div>
    {% endif %}

    {% if image_position|default == 'media--right' or image_position|default == 'media--below' %}
      <div class="textblock">
        {% if headline.text %}
          {{ block('headline_component') }}
        {% endif %}
        <div class="rte">
          {{ textarea|raw }}
        </div>
      </div>
      {{ contao_figure(image, size, {
        enableLightBox: true,
      }) }}
    {% endif %}

  {% endblock %}
{% endblock -%}

rsce_text_bild.config.php

<?php

return array(
  'label' => array('Text & Bild', ''),
  'types' => array('content'),
  'standardFields' => array('headline', 'cssID'),
  'wrapper' => array(
    'type' => 'single',
  ),

  // -- jetzt die Felderliste 'fields' - die Felder, die beim Bearbeiten des Elements im Backend angezeigt werden
  // -- Diese werden wie in Contao-DCAs üblich konfiguriert: https://docs.contao.org/dev/reference/dca/fields/
  'fields' => array(

    'gruppe_01' => array(
      'label' => array('Text', ''),
      'inputType' => 'group',
    ),
    'textarea' => array(
      'label' => array('Textarea', ''),
      'inputType' => 'textarea',
      'eval' => array(
        'tl_class' => 'clr',
        'rte' => 'tinyMCE'
      ),
    ),

    'gruppe_02' => array(
      'label' => array('Bild', ''),
      'inputType' => 'group',
    ),
    'image' => array(
      'label' => array('Bild', ''),
      'inputType' => 'fileTree',
      'eval' => array(
        'fieldType' => 'radio',
        'filesOnly' => true,
        'tl_class' => 'w50',
      ),
    ),
    'image_position' => array(
      'label' => array('Bildposition', ''),
      'inputType' => 'radio',
      'options' => array(
        'media--above' => 'oberhalb vom Text',
        'media--left'=> 'links vom Text',
        'media--right' => 'rechts vom Text',
        'media--below' => 'unterhalb vom Text',
      ),
      'eval' => array(
        'tl_class'=>'w25'
      ),
    ),
    'text_alignment' => array(
      'dependsOn' => array(
        'field' => 'image_position',
        'value' => array('media--left', 'media--right'),
      ),
      'label' => array('Text-Bild-Ausrichtung', ''),
      'inputType' => 'radio',
      'options' => array(
        'text-start' => 'Text bündig mit Bildoberkante',
        'text-center'=> 'Text mittig zum Bild',
        'text-end' => 'Text bündig mit Bildunterkante',
        'image-start' => 'Bild bündig mit Textoberkante',
        'image-center'=> 'Bild mittig zum Text',
        'image-end' => 'Bild bündig mit Textunterkante'
      ),
      'eval' => array(
        'tl_class'=>'w25'
      ),
    ),
    'size' => array(
      'label' => array('Bildgröße', 'Wählen Sie die gewünschte Bildgröße aus'),
      'inputType' => 'imageSize',
      'options' => Contao\System::getContainer()->get('contao.image.sizes')->getAllOptions(),
      'reference' => &$GLOBALS['TL_LANG']['MSC'],
      'eval' => array(
        'tl_class'=>'clr w50',
        'rgxp' => 'digit',
        'includeBlankOption' => true,
      ),
    ),

  ),
);