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

  1. <div class="teaser-grid {% if content.inverted %}teaser-grid--inverted {% endif %}{{ content.top }}
  2.   {{ content.bottom }}" x-data="teasergrid({{ content.pages|length }},{{ content.initialItems }},3)">
  3.     <div class="teaser-grid__container">
  4.         <div class="teaser-grid__title " x-ref="title">
  5.             {% if content.teaserGridPagina %}
  6.             {% if content.teaserGridSeoHeadlinePagina %}<{{ content.teaserGridSeoHeadlinePagina }}>{% endif %}
  7.                 <div class="pagina">
  8.                     {{ content.teaserGridPagina }}
  9.                 </div>
  10.             {% if content.teaserGridSeoHeadlinePagina %}</{{ content.teaserGridSeoHeadlinePagina }}>{% endif %}
  11.             {% endif %}
  12.             {% if content.teaserGridTitleDesktop %}
  13.                 <div {% if content.teaserGridTitleMobile %}class="desktop-only"{% endif %}>
  14.                     {{ content.teaserGridTitleDesktop|raw }}
  15.                 </div>
  16.             {% endif %}
  17.         </div>
  18.         {% if content.teaserGridTitleMobile %}
  19.             <div class="teaser-grid__title mobile-only"
  20.                  x-ref="mobiletitle">
  21.                 {{ content.teaserGridTitleMobile|raw }}
  22.             </div>
  23.         {% endif %}
  24.         <div class="teaser-grid__teasers" x-ref="teasers" id="teasers">
  25.             {% for key, value in content.pages %}
  26.                 <a href="{{ sulu_content_path(value.url) }}"
  27.                    class="story-teaser {% if content.inverted %}story-teaser--inverted {% endif %}"
  28.                    x-show="show({{ key }})">
  29.                     <div class="story-teaser__media">
  30.                         {% if value.excerptAlternativeImage %}
  31.                             {% set image=value.excerptAlternativeImage %}
  32.                             <img src ="{{ image|thumbnailUrl('2880x') }}" class="story-teaser__image"
  33.                                  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 }}"
  34.                                  x-ref="image" sizes="(min-width: 1440px) 480px, (min-width: 768px) 33vw, 100vw">
  36.                         {% endif %}
  37.                         {% if value.excerptImages and not value.excerptAlternativeImage %}
  38.                             {% set image=value.excerptImages[0] %}
  39.                             <img src ="{{ image|thumbnailUrl('2880x') }}" class="story-teaser__image"
  40.                                  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 }}"
  41.                                  x-ref="image" sizes="(min-width: 1440px) 480px, (min-width: 768px) 33vw, 100vw">
  42.                         {% endif %}
  43.                     </div>
  44.                     <div class="story-teaser__meta">
  45.                         {% if value.excerptType %}
  46.                             <span class="story-teaser__type"
  47.                                   style="float: left">{{ value.excerptType }} |&nbsp;</span>
  48.                         {% endif %}
  49.                         {% if value.excerptTime %}
  50.                             <span class="story-teaser__time"><p>{{ value.excerptTime }}</span>
  51.                         {% endif %}
  52.                     </div>
  53.                     {% if value.excerptTitleTeaserGrid %}
  54.                         <div class="story-teaser__title">
  55.                             {{ value.excerptTitleTeaserGrid|raw }}
  56.                         </div>
  57.                     {% else %}
  58.                         <div class="story-teaser__title">
  59.                             {{ value.title|raw }}
  60.                         </div>
  61.                     {% endif %}
  62.                     <div class="story-teaser__text">
  63.                         {% if value.excerptCustomText %}
  64.                             {{ value.excerptCustomText|raw }}
  65.                         {% elseif value.excerptDescription %}
  66.                             {% set short = value.excerptDescription|split(' ') %}
  67.                             {% if short|length > 20 %}
  68.                                 {{ short|slice(0, 19)|join(' ')|raw }}...
  69.                             {% else %}
  70.                                 {{ value.excerptDescription|raw }}
  71.                             {% endif %}
  72.                         {% endif %}
  73.                     </div>
  74.                 </a>
  75.             {% endfor %}
  76.         </div>
  77.         {# button below has to be shown only as long as not all teasers are shown, not yet working #}
  78.         <div class="teaser-grid__actions" x-ref="actions" x-show="showActions()" id="teasergrid-actions">
  79.             <button class="button button--{% if content.inverted %}grey{% else %}default {% endif %}"
  80.                     x-ref="loadmore" @click="loadMore" id="moreButton">
  81.                    <span class="button__inner">
  82.                      {{ content.teaserGridExpandButtonLabel }}
  83.                    </span>
  84.             </button>
  85.         </div>
  86.     </div>
  87. </div>