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

Open in your IDE?
  1. {% import "./macros_typography.html.twig" as macrosTypography %}
  2. {% import "./macros_button.html.twig" as macrosButton %}
  4. <section class="border-grid news-border-grid pb-7"
  5.   section-shade="light">
  6.   <div
  7.     class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 border-y sm:border-0 border-gray sm:divide-x divide-y sm:divide-y-reverse divide-gray"
  8.     batch-wrapp>
  10.     {% for item in content.pages %}
  11.     <div class="border-item p-8 xl:p-12 border-gray">
  12.       <div class="flex flex-col text-blue"
  13.         fade
  14.         fade-trigger="batch">
  15.         {# Image #}
  16.         <div class="relative flex items-center justify-center w-full h-[240px] md:h-[300px] overflow-hidden group">
  17.           <a class="absolute inset-0 z-10 text-[0px] outline-none peer"
  18.             href="{{ sulu_content_path(item.url) }}"
  19.             tabindex="-1">{{ item.title }}</a>
  20.           
  21.           {# Image size 800*500 #}
  22.           {% if item.image|length > 0 %}
  23.           {% set image = item.image.thumbnails['800x500'] %}
  24.           <img class="w-full h-full object-cover group-hover:scale-105 duration-500"
  25.             src="{{ image }}"
  26.             alt="{{ item.title }}"
  27.             loading="lazy">
  28.           {% endif %}
  29.         </div>
  31.         <div class="flex justify-between items-center gap-8 mt-8">
  32.           <time class="text-sm">
  33.           {% set activeLanguage = request.resourceLocatorPrefix|replace({'/': ''}) %}
  34.           {% if activeLanguage == 'fr' %}
  35.               {{ item.date|date('d M, Y')|replace({'Jan': 'Jan', 'Feb': 'Fév', 'Mar': 'Mar', 'Apr': 'Avr', 'May': 'Mai', 'Jun': 'Juin', 'Jul': 'Juil', 'Aug': 'Août', 'Sep': 'Sep', 'Oct': 'Oct', 'Nov': 'Nov', 'Dec': 'Déc'}) }}
  36.           {% elseif activeLanguage == 'en' %}
  37.               {{ item.date|date('d M, Y') }}
  38.           {% endif %}
  39.           </time>
  41.           {% set facebook = item.url|getShare %}
  42.           {% set linkedin = item.url|getShare %}
  43.           {% set whatsapp = item.url|getShare %}
  44.           {% set email = item.url|getShare %}
  46.           {{ macrosButton.share({
  47.           'facebook': {
  48.           'url': facebook,
  49.           },
  51.           'whatsapp': {
  52.           'text': 'Oaks Lane',
  53.           'url': whatsapp,
  54.           },
  56.           'linkedin': {
  57.           'url': linkedin,
  58.           },
  60.           'email': {
  61.           'title': 'Oaks Lane',
  62.           'url': email,
  63.           },
  64.           })}}
  65.         </div>
  67.         <a class="group outline-none"
  68.           href="{{ sulu_content_path(item.url) }}">
  69.           {# Title #}
  70.           <div class="title text-[2rem] mt-8 group-hover:underline group-focus-visible:underline">
  71.             {{ item.title }}
  72.           </div>
  74.           {# Arrow #}
  75.           <div class="relative flex justify-start w-6 h-2 mt-8 overflow-hidden">
  76.             <div
  77.               class="flex gap-6 -translate-x-12 group-hover:translate-x-0 group-focus-visible:translate-x-0 duration-500">
  78.               <svg class="shrink-0 w-6 h-2 stroke-2">
  79.                 <use xlink:href="#arrow-next"></use>
  80.               </svg>
  81.               <svg class="shrink-0 w-6 h-2 stroke-2">
  82.                 <use xlink:href="#arrow-next"></use>
  83.               </svg>
  84.             </div>
  85.           </div>
  86.         </a>
  88.       </div>
  89.     </div>
  90.     {% endfor %}
  92.   </div>
  95.   {# {% include "./partials/layout/pagination.html.twig" with {
  96.   'class' : 'blue mt-8 md:mt-12'
  97.   } %} #}
  98. </section>