templates/includes/blocks/news-grid.html.twig line 1

  1. {# Get tags for news #}
  2. {% set tags = content.tags %}
  4. {# Get current locale #}
  5. {% set locale = app.request.locale|split('_')[0]|default('de') %}
  7. {# Get all news from database #}
  8. {% set news = news(tags) %}
  10. {# Get all smart contents from source 1 #}
  11. {% set stories = getDataFromSmartContent(content.stories, locale)|default([]) %}
  13. {# Get all smart contents from source 2 #}
  14. {% set publications = getDataFromSmartContent(content.publications, locale)|default([]) %}
  16. {# Get all smart contents from source 3 #}
  17. {% set pages = getDataFromSmartContent(content.pages, locale)|default([]) %}
  19. {# Sort by date DESC - Mix news and pages #}
  20. {% set sorted = sortByDate(stories, publications, pages, news, content.contentMixed) %}
  22. {% if (not content.expandEnabled or content.newsGridExpandButtonLabel is empty) and sorted|length > content.itemsCount %}
  23.     {#
  24.         Expanding is disabled, cut the list of items to the configured initial count
  25.         so we do not have unreachable image urls being pre-loaded
  26.     #}
  27.     {% set sorted = sorted|slice(0, content.itemsCount) %}
  28. {% endif %}
  30. <div class="teaser-grid {% if content.inverted %}teaser-grid--inverted {% endif %}{{ content.top }}
  31.   {{ content.bottom }}" x-data="teasergrid({{ sorted|length }},{{ content.itemsCount }},3)">
  32.     <div class="teaser-grid__container">
  33.         <div class="teaser-grid__teasers" x-ref="teasers" id="teasers">
  34.             {% for key, item in sorted %}
  35.                 {% set targetBlank = '' %}
  36.                 {% if item['url'] starts with 'http' %}
  37.                     {% set targetBlank = 'target="_blank"' %}
  38.                 {% endif %}
  40.                 <a href="{{ item['url'] }}"
  41.                    class="story-teaser {% if content.inverted %}story-teaser--inverted {% endif %}"
  42.                    x-show="show({{ key }})" {{ targetBlank }}>
  43.                     <div class="story-teaser__media">
  44.                         {# Image ID from News #}
  45.                         {% if item['image'] matches '/^\\d+$/' %}
  46.                             {% set image = sulu_resolve_media(item['image'], app.request.locale|split('_')[0]) %}
  47.                             <img src ="{{ image|thumbnailUrl('2880x') }}" class="story-teaser__image"
  48.                                  srcset ="{{ image|thumbnailUrl('320x') }} 320w, {{ image|thumbnailUrl('640x') }} 640w, {{ image|thumbnailUrl('1280x') }} 1280w, {{ image|thumbnailUrl('1440x') }} 1440w, {{ image|thumbnailUrl('2048x') }} 2048w" alt="{{ image.description|striptags }}"
  49.                                  x-ref="image" sizes="(min-width: 1440px) 480px, (min-width: 768px) 33vw, 100vw">
  50.                         {% elseif item['thumbnails'] is not empty %}
  51.                             {# Thumbnails array from Stories #}
  52.                             <img src="{{ item|thumbnailUrl('2880x') }}" class="story-teaser__image"
  53.                                  srcset="{{ item|thumbnailUrl('320x') }} 320w,  {{ item|thumbnailUrl('640x') }} 640w,
  54.                                          {{ item|thumbnailUrl('1280x') }} 1280w, {{ item|thumbnailUrl('1440x') }} 1440w,
  55.                                          {{ item|thumbnailUrl('2048x') }} 2048w" alt="{{ item.description|striptags }}"
  56.                                  x-ref="image" sizes="(min-width: 1440px) 480px, (min-width: 768px) 33vw, 100vw">
  57.                         {% endif %}
  58.                     </div>
  59.                     <div class="story-teaser__meta">
  60.                         <span class="story-teaser__type"
  61.                               style="float: left">{{ item['source'] }} |&nbsp;</span>
  62.                         <span class="story-teaser__time"><p>{{ item['dateGerman'] }}</span>
  63.                     </div>
  65.                     <div class="story-teaser__title">
  66.                         {{ item['title']|raw }}
  67.                     </div>
  68.                     <div class="story-teaser__text">
  69.                         {{ item['description']|raw }}
  70.                     </div>
  71.                 </a>
  72.             {% endfor %}
  73.         </div>
  75.         {# CSS for button and Javascript for Button required??? #}
  76.         {% if content.expandEnabled and content.newsGridExpandButtonLabel is not empty %}
  77.             <div class="teaser-grid__actions" x-ref="actions" x-show="showActions()" id="newsgrid-actions">
  78.                 <button class="button button--{% if content.inverted %}grey{% else %}default {% endif %}"
  79.                         x-ref="loadmore" @click="loadMore" id="moreButton-News">
  80.                    <span class="button__inner">
  81.                      {{ content.newsGridExpandButtonLabel }}
  82.                    </span>
  83.                 </button>
  84.             </div>
  85.         {% endif %}
  86.     </div>
  87. </div>