embed.twig

{# @var craft \craft\web\twig\variables\CraftVariable #}
{# @var entry \craft\elements\Entry #}
{#
  Description of what this file is for

  @package  de.bistum-passau.www
  @author David Hellmann [[email protected]]

  e-boxArticlesAside

  {% embed '_templates/boxArticlesAside/_template.html' with {
      opt: {
        firstArticles: {
          channel: null,
          limit: null | default(3)
        },
        secondArticles: {
          channel: null,
          limit: null | default(6)
        },
        aside: null
      }
    } only %}

    {% block aside %}
      …
    {% endblock %}
  {% endembed %}
  ------------------------------------------------------------
#}

{# -- Set Defaults -- #}
{% set defaults = {
  cn: 'e-boxArticlesAside',
  modifiers: [],
  customClasses: [],
  data: {},
  js: null,
  headline: null,
  navCategories: {
    items: null
  },
  firstArticles: {
    items: null
  },
  secondArticles: {
    items: null
  },
  aside: null
} %}


{# -- Merge Default with Options -- #}
{% set opt = opt is defined ? defaults|merge(opt) : defaults %}
{# -- Modul -- #}
{% if opt.firstArticles.items or opt.secondArticles.items %}
  <div class="{{ opt.cn }}
              {% for modifier in opt.modifiers %}
                {{ modifier | length ? '  ' ~ opt.cn ~ '--' ~ modifier }}
              {% endfor %}
              {% for customClass in opt.customClasses %}
                {{ customClass | length ? '  ' ~ customClass }}
              {% endfor %}  {{ opt.js ? opt.cn|replace({ 'e-' : 'js-' }) : '' }}"
    {% for key, value in opt.data %}
      {{ 'data-' ~ key ~ '=' ~ value }}
    {% endfor %}>

    <div class="o-row">
      {{ opt.aside ? '<div class="o-col o-col-6 o-col-l-8  o-col-max-9">' : '<div class="o-col o-col-6 o-col-l-12">' }}

      {% if opt.headline %}
        {# -- headline -- #}
        {% include '_atoms/headline/_template.html' with {
          opt: {
            customClasses: [opt.cn ~ '__headline'],
            text: opt.headline,
            size: 'h1'
          }
        } only %}
      {% endif %}

      {# -- Categories -- #}
      {% if opt.navCategories.items %}
        {# -- navSlider -- #}
        {% include '_molecules/navSlider/_template.html' with {
          opt: {
            items: opt.navCategories.items
          }
        } only %}
      {% endif %}

      {% if opt.firstArticles.items %}
        <div class="{{ opt.cn ~ '__firstArticles' }}">
          {% for item in opt.firstArticles.items %}
            {% if loop.first %}
              <div class="{{ opt.cn ~ '__firstArticlesLeft' }}">
            {% endif %}
            {% if loop.index == 2 %}
            <div class="{{ opt.cn ~ '__firstArticlesRight' }}">
            {% endif %}

            <div class="{{ opt.cn ~ '__firstArticlesItem' }}">
              {# -- NAME -- #}
              {% set fallbackImageBistum = imageFallbacks.globalFallbackImageBistum.one() %}
              {% include '_molecules/teaserArticle/_template.html' with {
                opt: {
                  modifiers: ['vertical', loop.first ? 'big'],
                  image: item.entryImage[0] ?? fallbackImageBistum ?? null,
                  label: item.categoryTopic[0].title ?? null,
                  date: item.postDate ?? null,
                  headline: item.entryCustomH1 ?? item.title,
                  teaserText: item.entryTeaserText,
                  url: item.url ?? null
                }
              } only %}
            </div>
            {% if loop.first %}
            </div>
            {% endif %}
            {% if loop.last %}
              </div>
            {% endif %}
          {% endfor %}
        </div>
      {% endif %}

      {% if opt.secondArticles.items %}
        <div class="{{ opt.cn ~ '__secondArticles' }}">

          {% set fallbackImageBistum = imageFallbacks.globalFallbackImageBistum.one() %}
          {% for item in opt.secondArticles.items %}
            <div class="{{ opt.cn ~ '__secondArticlesItem' }}">
              {# -- NAME -- #}
              {% include '_molecules/teaserArticle/_template.html' with {
                opt: {
                  modifiers: ['vertical'],
                  image: item.entryImage[0] ?? fallbackImageBistum ?? null,
                  label: item.categoryTopic[0].title ?? null,
                  date: item.postDate ?? null,
                  headline: item.entryCustomH1 ?? item.title,
                  teaserText: item.entryTeaserText,
                  url: item.url ?? null
                }
              } only %}
            </div>
          {% endfor %}
        </div>
      {% endif %}
    </div>

    {% if opt.aside %}
      <div class="o-col o-col-6 o-col-l-4  o-col-max-3">
        <div class="{{ opt.cn ~ '__aside' }}">
          {% block aside %}
            Block: Content!
          {% endblock %}
        </div>
      </div>
    {% endif %}
  </div>
  </div>
{% endif %}