templates/includes/blocks/belt.html.twig line 1

  1. <div class="belt {% if content.inverted %}belt--inverted{% endif %} {{ content.top }} {{ content.bottom }}"
  2.      x-data="belt">
  3.     <div class="belt__header{% if content.beltHeadlineFullWidth %} belt__header--full {% endif %}">
  4.         <div class="belt__top">
  5.             <div class="belt__title mobile-only" x-ref="mobiletitle">
  6.                 {% if content.beltSeoHeadlinePagina %}<{{ content.beltSeoHeadlinePagina }}>{% endif %}
  7.                 <div class="pagina">
  8.                     {{ content.beltPaginaDesktop }}
  9.                 </div>
  10.                 {% if content.beltSeoHeadlinePagina %}</{{ content.beltSeoHeadlinePagina }}>{% endif %}
  11.                 {{ content.beltTitleMobile|raw }}
  12.             </div>
  13.             <div class="belt__title desktop-only" x-ref="title">
  14.                 {% if content.beltSeoHeadlinePagina %}<{{ content.beltSeoHeadlinePagina }}>{% endif %}
  15.                 <div class="pagina">
  16.                     {{ content.beltPaginaDesktop }}
  17.                 </div>
  18.                 {% if content.beltSeoHeadlinePagina %}</{{ content.beltSeoHeadlinePagina }}>{% endif %}
  19.                 {{ content.beltTitleDesktop|raw }}
  20.             </div>
  21.             {% if content.beltLead %}
  22.                 <div class="belt__lead" x-ref="lead">
  23.                     {{ content.beltLead|raw }}
  24.                 </div>
  25.             {% endif %}
  27.             {% if content.beltText %}
  28.                 <div class="belt__text" x-ref="text">
  29.                     {{ content.beltText|raw }}
  30.                 </div>
  31.             {% endif %}
  32.         </div>
  33.         {% if content.beltActionLink %}
  34.             <div class="belt__actions" x-ref="actions">
  35.                 {% if content.beltActionButtonType == 'box' %}
  36.                     <a href="{{ content.beltActionLink }}"
  37.                        class="button button--{{ content.beltActionButtonColor }} button--size-{{ content.beltActionButtonSize }}">
  38.                         <span class="button__inner">
  39.                             {{ content.beltActionButtonLabel }}
  40.                         </span>
  41.                     </a>
  42.                 {% elseif content.beltActionButtonType == 'text' %}
  43.                     <a href="{{ content.beltActionLink }}"
  44.                        class="text-button text-button--{{ content.beltTextButtonColor }} {% if content.uppercase %} uppercase {% endif %}">
  45.                         {{ content.beltActionButtonLabel }}
  46.                         <svg fill="none" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 16 16">
  47.                             <path d="M.5 8.5h15M10.5 3.5l5 5-5 5" stroke="currentColor" stroke-miterlimit="10"
  48.                                   stroke-linecap="round" stroke-linejoin="round"/>
  49.                         </svg>
  50.                     </a>
  51.                 {% endif %}
  52.             </div>
  53.         {% endif %}
  54.     </div>
  55.     <div class="belt__content" x-ref="content">
  56.         <div class="belt__container">
  57.             {% set speed = content.subblocks1|length * 1000 * content.beltItemAutoplay %}
  58.             {% for i in 0..content.subblocks1|length %}
  59.                 <div class="belt__items" style="--duration: {{ speed }}ms;">
  60.                     {% for item in content.subblocks1 %}
  61.                         <div class="belt-item">
  62.                             <!-- background is optional and may be omitted -->
  63.                             {% if item.tape1ItemImage %}
  64.                                 <div class="belt-item__background">
  65.                                     <img class="belt-item__image" src ="{{ item.tape1ItemImage|thumbnailUrl('320x') }}"
  66.                                          {% if item.tape1ItemImage.description|striptags %}alt="{{ item.tape1ItemImage.description|striptags }}"{% endif %}
  67.                                          sizes="360px">
  68.                                 </div>
  69.                             {% endif %}
  70.                             {% if item.tape1Tag %}
  71.                                 <span class="belt-item__label belt-item__label--{{ item.tagColor }}">
  72.                                     {{ item.tape1Tag }}
  73.                                 </span>
  74.                             {% endif %}
  75.                             <span class="belt-item__title">
  76.                                 {{ item.tape1ItemTitle|raw }}
  77.                             </span>
  78.                             <span class="belt-item__text">
  79.                             {{ item.tape1ItemDescription|raw }}
  80.                             </span>
  81.                         </div>
  82.                     {% endfor %}
  83.                 </div>
  84.             {% endfor %}
  85.         </div>
  86.         {% if content.subblocks2 %}
  87.         <div class="belt__container">
  88.             {% set speed = content.subblocks2|length * 1000 * content.beltItemAutoplay %}
  89.             {% for i in 0..content.subblocks2|length %}
  90.                 <div class="belt__items" style="--duration: {{ speed }}ms;">
  91.                     {% for item in content.subblocks2 %}
  92.                         <div class="belt-item">
  93.                             <!-- background is optional and may be omitted -->
  94.                             {% if item.tape2ItemImage %}
  95.                                 <div class="belt-item__background">
  96.                                     <img class="belt-item__image" src ="{{ item.tape2ItemImage|thumbnailUrl('320x') }}"
  97.                                          {% if item.tape2ItemImage.description|striptags %}alt="{{ item.tape2ItemImage.description|striptags }}"{% endif %}
  98.                                          sizes="360px">
  99.                                 </div>
  100.                             {% endif %}
  101.                             {% if item.tape2Tag %}
  102.                                 <span class="belt-item__label belt-item__label--{{ item.tagColor }}">
  103.                             {{ item.tape2Tag }}
  104.                         </span>
  105.                             {% endif %}
  106.                             <span class="belt-item__title">
  107.                             {{ item.tape2ItemTitle|raw }}
  108.                         </span>
  109.                             <span class="belt-item__text">
  110.                             {{ item.tape2ItemDescription|raw }}
  111.                         </span>
  112.                         </div>
  113.                     {% endfor %}
  114.                 </div>
  115.             {% endfor %}
  116.         </div>
  117.         {% endif %}
  118.         {% if content.subblocks3 %}
  119.         <div class="belt__container">
  120.             {% set speed = content.subblocks3|length * 1000 * content.beltItemAutoplay %}
  121.             {% for i in 0..content.subblocks3|length %}
  122.                 <div class="belt__items" style="--duration: {{ speed }}ms;">
  123.                    {% for item in content.subblocks3 %}
  124.                         <div class="belt-item">
  125.                             <!-- background is optional and may be omitted -->
  126.                             {% if item.tape3ItemImage %}
  127.                                 <div class="belt-item__background">
  128.                                     <img class="belt-item__image" src ="{{ item.tape3ItemImage|thumbnailUrl('320x') }}"
  129.                                          {% if item.tape3ItemImage.description|striptags %}alt="{{ item.tape3ItemImage.description|striptags }}"{% endif %}
  130.                                         sizes="360px">
  131.                                 </div>
  132.                             {% endif %}
  133.                             {% if item.tape3Tag %}
  134.                                 <span class="belt-item__label belt-item__label--{{ item.tagColor }}">
  135.                             {{ item.tape3Tag }}
  136.                         </span>
  137.                             {% endif %}
  138.                             <span class="belt-item__title">
  139.                             {{ item.tape3ItemTitle|raw }}
  140.                         </span>
  141.                             <span class="belt-item__text">
  142.                             {{ item.tape3ItemDescription|raw }}
  143.                         </span>
  144.                         </div>
  145.                     {% endfor %}
  146.                 </div>
  147.             {% endfor %}
  148.         </div>
  149.         {% endif %}
  150.     </div>
  151. </div>