templates/includes/themenPreview.html.twig line 7

Open in your IDE?
  1. {% set bereichBg = '#333333' %}
  2. {% set bereichColor = '#ffffff' %}
  3. {% set bereichTitle = '' %}
  4. {% if forcedBereich %}
  5.     {% set bereichTitle = forcedBereich.title %}
  6.     {% if forcedBereich.color and forcedBereich.color is not null %}
  7.         {% set bereichBg = 'rgb(' ~ article.bereiche[0].color.r ~ ',' ~ forcedBereich.color.g ~ ',' ~ forcedBereich.color.b ~ ')' %}
  8.     {% endif %}
  9.     {% if forcedBereich.colorText and forcedBereich.color is not null %}
  10.         {% set bereichColor = 'rgb(' ~ forcedBereich.colorText.r ~ ',' ~ forcedBereich.colorText.g ~ ',' ~ forcedBereich.colorText.b ~ ')' %}
  11.     {% endif %}
  12. {% elseif article.bereiche | length > 0 %}
  13.     {% set bereichTitle = article.bereiche[0].title %}
  14.     {% if article.bereiche[0].color and article.bereiche[0].color is not null %}
  15.         {% set bereichBg = 'rgb(' ~ article.bereiche[0].color.r ~ ',' ~ article.bereiche[0].color.g ~ ',' ~ article.bereiche[0].color.b ~ ')' %}
  16.     {% endif %}
  17.     {% if article.bereiche[0].colorText %}
  18.         {% set bereichColor = 'rgb(' ~ article.bereiche[0].colorText.r ~ ',' ~ article.bereiche[0].colorText.g ~ ',' ~ article.bereiche[0].colorText.b ~ ')' %}
  19.     {% endif %}
  20. {% endif %}
  21. {#<div class="grid grid-cols-1 grid-cols items-start shadow-card rounded-md bg-white group {% if fullHeight %}h-full{% else %}mb-10{% endif %}">#}
  22. <div class="shadow-card rounded-md bg-white dark:bg-neutral-900 dark:text-white group {% if fullHeight %}h-full{% else %}mb-10{% endif %}">
  23.     <div class="relative">
  24.         <a href="/themen/artikel/{{ article.key }}">
  25.             <div class="relative block overflow-hidden rounded-t-md" style="background-color: {{ bereichBg }}">
  26.                 <div class="w-full aspect-w-4 aspect-h-3 md:aspect-w-16 md:aspect-h-9" style="background: linear-gradient(0deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.5));">
  27.                     {% set hasImage = article.image and article.image is not null %}
  28.                     {% if hasImage %}
  29.                         {{ article.image.getThumbnail('themaThumbnail').html | replace({ '<img': '<img class="w-full h-full object-cover group-hover:rotate-2 group-hover:scale-110 duration-1000 transition-all" style="object-position: center 10%"' }) | raw }}
  30.                     {% else %}
  31.                         <img src="{{ asset('static/images/waves-small.webp') }}" alt="" class="w-full h-full object-cover mix-blend-multiply">
  32.                     {% endif %}
  33.                 </div>
  34.                 <div class="absolute block top-5 left-5 rounded-md text-xs px-3 pt-2 pb-1 font-mont-heavy uppercase" style="background-color: {{ bereichBg }}; color: {{ bereichColor }};">{{ bereichTitle }}</div>
  35.             </div>
  36.         </a>
  37.     </div>
  38.     <div class="relative p-5">
  39.         <div class="flex gap-5 justify-between mb-5">
  40.             <div class="text-xs text-gray-500">
  41.                 {{ article.articleDate | date('d.m.Y') }}
  42.             </div>
  43.             <div class="text-xs">
  44.                 {% if article.sponsor and article.sponsor.title %}
  45.                     Werbefinanziert
  46.                 {% endif %}
  47.             </div>
  48.         </div>
  49.         <a href="/themen/artikel/{{ article.key }}" class="text-xl md:text-2xl text-blue-light hover:text-black dark:hover:text-white transition-all font-mont-heavy">{{ article.title }}</a>
  50.         {% if article.subTitle %}
  51.             <div class="mt-5 mb-5 text-sm">{{ article.subTitle }}</div>
  52.         {% else %}
  53.             <div class="mt-5 mb-5 text-sm">{{ article.excerpt }}</div>
  54.         {% endif %}
  55.     </div>
  56. </div>