templates/includes/blocks/newsSingleRelated.html.twig line 3

Open in your IDE?
  1. <br><br>
  3. {% set previous = sulu_content_load(content.previousArticle, {'title': 'title', 'url': 'url', 'image': 'image', 'date': 'date'}) %}
  4. {% set next = sulu_content_load(content.nextArticle, {'title': 'title', 'url': 'url', 'image': 'image', 'date': 'date'}) %}
  7. <div
  8.     class="grid sm:grid-cols-2 border divide-y sm:divide-y-0 divide-y-reverse sm:divide-x border-gray divide-gray text-blue mx-auto max-w-[928px]">
  9.     {# Prev #}
  10.     <div
  11.       class="prev-news relative py-6 px-8 hover:bg-blue focus-within:bg-blue hover:text-white focus-within:text-white duration-300 order-1 sm:order-none">
  12.       <a class="absolute inset-0 z-10 text-[0px] outline-none"
  13.         href="{{ sulu_content_path(previous.content.url) }}">
  14.         {{ content.previousText }}
  15.       </a>
  16.       <div class="flex items-center gap-[10px]">
  17.         <svg class="w-6 h-2">
  18.           <use xlink:href="#arrow-prev"></use>
  19.         </svg>
  20.         <span>{{ content.previousText }}</span>
  21.       </div>
  23.       <div class="flex gap-3 mt-3">
  24.         <div class="w-20 h-20 flex-shrink-0">
  25.           {# Image size 100*100 #}
  26.           {% if previous.content.image|length > 0 %}
  27.           {% set image = previous.content.image.thumbnails['100x100'] %}
  28.           <img class="w-full h-full object-cover"
  29.             src="{{ image }}"
  30.             alt="{{ previous.content.title }}"
  31.             loading="lazy">
  32.           {% endif %}
  33.         </div>
  34.         <div>
  35.           <p class="title text-xl">{{ previous.content.title }}</p>
  36.           <time class="block text-sm mt-3 whitespace-nowrap">{{ previous.content.date|date('d M, Y') }}</time>
  37.         </div>
  38.       </div>
  39.     </div>
  40.  
  41.     {# Next #}
  42.     <div
  43.       class="next-news relative py-6 px-8 hover:bg-blue focus-within:bg-blue hover:text-white focus-within:text-white duration-300">
  44.       <a class="absolute inset-0 z-10 text-[0px] outline-none"
  45.         href="{{ sulu_content_path(next.content.url) }}">
  46.         {{ content.nextText }}
  47.       </a>
  48.       <div class="flex justify-end items-center gap-[10px]">
  49.         <span>{{ content.nextText }}</span>
  50.         <svg class="w-6 h-2">
  51.           <use xlink:href="#arrow-next"></use>
  52.         </svg>
  53.       </div>
  55.       <div class="flex gap-3 mt-3">
  56.         <div>
  57.           <p class="title text-xl">{{ next.content.title }}</p>
  58.           <time class="block text-sm mt-3 whitespace-nowrap">{{ next.content.date|date('d M, Y') }}</time>
  59.         </div>
  60.         <div class="w-20 h-20 flex-shrink-0">
  61.           {# Image size 100*100 #}
  62.           {% if next.content.image|length > 0 %}
  63.           {% set image = next.content.image.thumbnails['100x100'] %}
  64.           <img class="w-full h-full object-cover"
  65.             src="{{ image }}"
  66.             alt="{{ next.content.title }}"
  67.             loading="lazy">
  68.           {% endif %}
  69.         </div>
  70.       </div>
  71.     </div>