templates/includes/blocks/homeNewsSection.html.twig line 51

Open in your IDE?
  1. {% import "./macros_typography.html.twig" as macrosTypography %}
  2. {% import "./macros_button.html.twig" as macrosButton %}
  4. <section class="news-section relative"
  5.   section-shade="light">
  7.   <div class="fixed-lines">
  8.     <div class="hidden lg:block"></div>
  9.     <div class="hidden lg:block"></div>
  10.     <div class="hidden lg:block"></div>
  11.   </div>
  13.   <div class="relative grid grid-cols-1 lg:grid-cols-[1fr_2fr] pt-12 pb-12 lg:pt-16 lg:pb-0">
  14.     <div class="overflow-hidden px-8 xl:px-12 text-blue">
  15.       <h2 class="h2"
  16.         split-direction="top"
  17.         split-trigger="scroll">
  18.         {{ content.AlpineTitle }}
  19.       </h2>
  20.     </div>
  22.     <div class="hidden lg:block relative w-full h-[340px] ml-px z-10"
  23.       fade
  24.       fade-trigger="scroll">
  25.       <div class="img-clip h-full">
  26.       {% if content.AlpineMedia|length > 0 %}
  27.       {% set image = content.AlpineMedia.thumbnails['1400x400'] %}
  28.         {# Image size 1400*400 #}
  29.         <img src="{{ image }}"
  30.           alt="news main image"
  31.           loading="lazy">
  32.         {# Image size 1400*400 #}
  33.         <img src="{{ image }}"
  34.           alt="news main image"
  35.           loading="lazy">
  36.       {% endif %}
  37.       </div>
  38.     </div>
  40.   </div>
  43.   <div class="news-grid grid lg:grid-cols-3 divide-y lg:divide-none divide-gray border-t border-gray">
  44.     {% for news in content.similarNews %}
  46.     {% set item = sulu_content_load(news.singleNews, {'title': 'title', 'url': 'url', 'date': 'date'}) %}
  48.     <div
  49.       class="news-item relative flex flex-col justify-between px-8 py-6 lg:p-8 xl:p-12 xl:pr-44 text-blue group duration-500 ease-basic-ease hover:text-white hover:bg-blue">
  50.       <a class="absolute inset-0 text-[0px] z-10"
  51.         href="{{ sulu_content_path(item.content.url) }}">{{ item.content.title }}</a>
  53.       <time class="news-item__time block text-sm mb-4 lg:mb-16"
  54.         split-direction="bottom"
  55.         split-trigger="none">
  56.         {{ item.content.date|date('d M, Y') }}
  57.       </time>
  58.  
  59.       <div class="mt-auto">
  60.         <h3 class="news-item__title h4 pr-7"
  61.           fade
  62.           fade-trigger="none">{{ item.content.title }}</h3>
  64.         {{macrosButton.miniArrow({
  65.         'class': 'news-item__arrow ml-auto lg:ml-0 mt-9',
  66.         'trigger': 'none'
  67.         })}}
  69.       </div>
  70.     </div>
  72.     {% endfor %}
  73.   </div>
  74. </section>