templates/areas/news-teaser/view.html.twig line 1

Open in your IDE?
  1. {% if editmode %}
  2.     <div class="edit-box">
  3.         <h1>KONFIGURATIONEN FÜR DEN AREABRICK:</h1>
  4.         <div class="flex gap-20">
  5.             <div class="content flex column gap-20">
  6.                 <div class="content-box flex gap-20">
  7.                     <div class="item">
  8.                         <p class="edit-p">Anker Text:</p>
  9.                         {{ pimcore_input('anchor',{'placeholder':'Anker Text','width':300}) }}
  10.                     </div>
  11.                 </div>
  13.                 <div class="content-box flex column gap-20">
  14.                     <div class="item">
  15.                         <p class="edit-p">Übersicht Dokument ablegen:</p>
  16.                         {{ pimcore_relation("ProjectsRelationSite",{
  17.                             "types": ["document"]
  18.                         }) }}
  19.                     </div>
  20.                     <div class="item">
  21.                         <p class="edit-p">Anker auf Projektübersicht Seite:</p>
  22.                         {{ pimcore_input('projectsOverviewDoc') }}
  23.                     </div>
  24.                 </div>
  26.             </div>
  27.             <div class="content flex gap-20">
  28.                 <div class="content-box flex gap-20">
  29.                     <div class="item">
  30.                         <p class="edit-p">Headline:</p>
  31.                         {{ pimcore_input('headline',{'placeholder':'Headline','width': 650 }) }}
  32.                     </div>
  33.                 </div>
  34.             </div>
  36.         </div>
  37.     </div>
  38. {% endif %}
  39. <section class="teaser-swiper news-teaser" {% if not pimcore_input('anchor').isEmpty() %}id="{{ pimcore_input('anchor').getData() }}"{% endif %}>
  40.     <div class="container teaser-container">
  41.         {% if not editmode %}
  42.             {% if not pimcore_input('headline').isEmpty() %}
  43.                 <h2>{{ pimcore_input('headline').getData() }}</h2>
  44.             {% else %}
  45.                 <h2>{{ 'News_' | trans }}</h2>
  46.             {% endif %}
  47.         {% endif %}
  49.         {% if editmode %}
  50.             <div style="text-align: center;">
  51.                 <h3>Hier kommen News Teaser im Frontend</h3>
  52.             </div>
  54.         {% else %}
  55.             <div class="news-swiper-container">
  56.                 <div class="swiper newsTeaserSwiper">
  57.                     <div class="swiper-wrapper">
  58.                         {% for news in newsList %}
  60.                             {# news detail link #}
  61.                             {% set detailLink = path('newslist', {
  62.                                 id: news.id,
  63.                                 headline: toUri(news.headline),
  64.                                 path: 'news-url-path'|trans
  65.                             }) %}
  66.                             {# news detail link #}
  67.                             <div class="swiper-slide">
  68.                                 <div class="teaser">
  69.                                     <a href="{{ detailLink }}">{{ news.teaserImage.thumbnail('NewsTeaser').html | raw }}</a>
  70.                                     <div class="content">
  71.                                         <div class="date flex gap-10">
  72.                                             <svg width="13" height="14.333" viewBox="0 0 13 14.333">
  73.                                                 <g id="Icon_feather-calendar" data-name="Icon feather-calendar"
  74.                                                    transform="translate(0.5 0.5)">
  75.                                                     <path id="Pfad_4321" data-name="Pfad 4321"
  76.                                                           d="M5.833,6h9.333A1.33,1.33,0,0,1,16.5,7.328V16.62a1.33,1.33,0,0,1-1.333,1.328H5.833A1.33,1.33,0,0,1,4.5,16.62V7.328A1.33,1.33,0,0,1,5.833,6Z"
  77.                                                           transform="translate(-4.5 -4.615)" fill="none"
  78.                                                           stroke="#6b675d"
  79.                                                           stroke-linecap="round" stroke-linejoin="round"
  80.                                                           stroke-width="1"/>
  81.                                                     <path id="Pfad_4322" data-name="Pfad 4322" d="M24,3V5.771"
  82.                                                           transform="translate(-15.333 -3)" fill="none" stroke="#6b675d"
  83.                                                           stroke-linecap="round" stroke-linejoin="round"
  84.                                                           stroke-width="1"/>
  85.                                                     <path id="Pfad_4323" data-name="Pfad 4323" d="M12,3V5.771"
  86.                                                           transform="translate(-8.667 -3)" fill="none" stroke="#6b675d"
  87.                                                           stroke-linecap="round" stroke-linejoin="round"
  88.                                                           stroke-width="1"/>
  89.                                                     <path id="Pfad_4324" data-name="Pfad 4324" d="M4.5,15h12"
  90.                                                           transform="translate(-4.5 -9.667)" fill="none"
  91.                                                           stroke="#6b675d"
  92.                                                           stroke-linecap="round" stroke-linejoin="round"
  93.                                                           stroke-width="1"/>
  94.                                                 </g>
  95.                                             </svg>
  96.                                             <p>{{ news.date | date('d.m.Y') }}</p>
  97.                                         </div>
  98.                                         <p class="teaser-headline"><a href="{{ detailLink }}">{{ news.headline | u.truncate(50, '...') }}</a></p>
  99.                                         <div class="lead">
  100.                                             <a href="{{ detailLink }}"><p>{{ news.intro | u.truncate(110, '...') }}</p></a>
  101.                                         </div>
  102.                                         <button class="primary accent">
  103.                                             <a href="{{ detailLink }}">{{ 'Mehr'|trans }}
  104.                                                 <svg width="15.708" height="10.709" viewBox="0 0 15.708 10.709">
  105.                                                     <g transform="translate(0 0.354)">
  106.                                                         <g transform="translate(0)">
  107.                                                             <path class="line" d="M7.5,18h15"
  108.                                                                   transform="translate(-7.5 -13)" fill="none"
  109.                                                                   stroke="#b76e2b" stroke-linejoin="round"
  110.                                                                   stroke-width="1"/>
  111.                                                             <path class="arrow" d="M18,7.5l5.026,5L18,17.5"
  112.                                                                   transform="translate(-8.027 -7.5)" fill="none"
  113.                                                                   stroke="#b76e2b" stroke-width="1"/>
  114.                                                         </g>
  115.                                                     </g>
  116.                                                 </svg>
  117.                                             </a>
  118.                                         </button>
  119.                                     </div>
  120.                                 </div>
  121.                             </div>
  122.                         {% endfor %}
  123.                     </div>
  124.                     <div class="swipe-controls">
  125.                         <div class="newsTeaserSwiperNext"></div>
  126.                         <div class="newsTeaserSwiperPrev"></div>
  127.                     </div>
  128.                 </div>
  129.             </div>
  130.         {% if not pimcore_relation("ProjectsRelationSite").isEmpty() %}
  131.             <div class="buttons-row flex">
  132.                 <button class="primary">
  133.                     <a href="{% if not pimcore_relation("ProjectsRelationSite").isEmpty() %}{{ pimcore_relation("ProjectsRelationSite").getElement().getFullPath() }}{% endif %}{% if not pimcore_input('projectsOverviewDoc').isEmpty() %}/#{{ pimcore_input('projectsOverviewDoc').getData() }}{% endif %}" target="_self" title="{{ 'Alle_News' | trans }}">{{ 'Alle_News' | trans }}
  134.                         <svg width="15.708" height="10.709" viewBox="0 0 15.708 10.709">
  135.                             <g transform="translate(0 0.354)">
  136.                                 <g transform="translate(0)">
  137.                                     <path class="line" d="M7.5,18h15" transform="translate(-7.5 -13)" fill="none"
  138.                                           stroke="#b76e2b" stroke-linejoin="round" stroke-width="1"/>
  139.                                     <path class="arrow" d="M18,7.5l5.026,5L18,17.5" transform="translate(-8.027 -7.5)"
  140.                                           fill="none" stroke="#b76e2b" stroke-width="1"/>
  141.                                 </g>
  142.                             </g>
  143.                         </svg>
  144.                     </a>
  145.                 </button>
  146.             </div>
  147.         {% endif %}
  148.         {% endif %}
  149.     </div>
  150. </section>