templates/news/detail.html.twig line 1

Open in your IDE?
  1. {% extends 'layouts/layout.html.twig' %}
  3. {% block content %}
  4.     <section class="content-header projects-header news-detail beige">
  5.         <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  7.         <script type="text/javascript">
  8.             window.shareHeadline = '{{ newsDetail.headline }}';
  9.         </script>
  11.         {% if newsDetail.getShadowImage() %}
  12.             <div class="shadow-image-container project-detail" id="shadow-image-container">
  13.                 {{ newsDetail.shadowImage.thumbnail('ProjectDetailShadow').html({
  14.                     'imgAttributes': {
  15.                         'class':'detail-shadow'
  16.                     }
  17.                 }) | raw }}
  18.             </div>
  19.         {% endif %}
  22.         <div class="container">
  23.             <div class="content-container">
  24.                 <div class="date flex gap-10">
  25.                     <svg width="13" height="14.333" viewBox="0 0 13 14.333">
  26.                         <g id="Icon_feather-calendar" data-name="Icon feather-calendar"
  27.                            transform="translate(0.5 0.5)">
  28.                             <path id="Pfad_4321" data-name="Pfad 4321"
  29.                                   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"
  30.                                   transform="translate(-4.5 -4.615)" fill="none"
  31.                                   stroke="#6b675d"
  32.                                   stroke-linecap="round" stroke-linejoin="round"
  33.                                   stroke-width="1"/>
  34.                             <path id="Pfad_4322" data-name="Pfad 4322" d="M24,3V5.771"
  35.                                   transform="translate(-15.333 -3)" fill="none" stroke="#6b675d"
  36.                                   stroke-linecap="round" stroke-linejoin="round"
  37.                                   stroke-width="1"/>
  38.                             <path id="Pfad_4323" data-name="Pfad 4323" d="M12,3V5.771"
  39.                                   transform="translate(-8.667 -3)" fill="none" stroke="#6b675d"
  40.                                   stroke-linecap="round" stroke-linejoin="round"
  41.                                   stroke-width="1"/>
  42.                             <path id="Pfad_4324" data-name="Pfad 4324" d="M4.5,15h12"
  43.                                   transform="translate(-4.5 -9.667)" fill="none"
  44.                                   stroke="#6b675d"
  45.                                   stroke-linecap="round" stroke-linejoin="round"
  46.                                   stroke-width="1"/>
  47.                         </g>
  48.                     </svg>
  49.                     <p>{{ newsDetail.date | date('d.m.Y') }}</p>
  50.                 </div>
  51.                 {% if newsDetail.headline %}
  52.                     <h1 class="light dark">{{ newsDetail.headline | nl2br }}</h1>
  53.                 {% endif %}
  54.                 {% if newsDetail.intro %}
  55.                     <div class="colored lead">
  56.                         <p>{{ newsDetail.intro | nl2br }}</p>
  57.                     </div>
  58.                 {% endif %}
  59.             </div>
  60.         </div>
  62.     </section>
  63.     {% for contentItem in newsDetail.content.items %}
  65.         {% if contentItem.type == "Text" %}
  66.             <section class="content-type-text beige news-detail">
  67.                 <div class="container">
  68.                     <div class="content-container">
  69.                         <div class="item-lead {{ contentItem.TextType | lower }} {{ contentItem.TextWidth }} {{ contentItem.marginTop }}">
  70.                             {{ contentItem.Text | raw }}
  71.                         </div>
  72.                     </div>
  73.                 </div>
  74.             </section>
  76.         {% endif %}
  77.         {% if contentItem.type == "Gallery" %}
  79.             {% if contentItem.GalleryImg | length > 1 %}
  80.             <section class="teaser-swiper news-teaser projekt-teaser detail-page beige news-detail-gallery">
  81.                 <div class="container teaser-container">
  83.                     <div class="news-swiper-container projekt-swiper-container detail-page">
  85.                             <div class="swiper newsTeaserSwiper projektTeaserSwiper">
  86.                                 <div class="swiper-wrapper">
  88.                                     {% for image in contentItem.GalleryImg %}
  89.                                         <div class="swiper-slide">
  90.                                             <div class="teaser">
  91.                                                 {{ image.thumbnail('ProjektTeaser').html | raw }}
  92.                                             </div>
  93.                                         </div>
  94.                                     {% endfor %}
  96.                                 </div>
  97.                                 <div class="swipe-controls">
  98.                                     <div class="newsTeaserSwiperNext"></div>
  99.                                     <div class="newsTeaserSwiperPrev"></div>
  100.                                 </div>
  101.                             </div>
  103.                     </div>
  106.                 </div>
  107.             </section>
  108.             {% else %}
  109.                 <section class="content-type-text beige news-detail-single-image">
  110.                     <div class="container">
  111.                         <div class="content-container">
  112.                             {{ newsDetail.teaserImage.thumbnail('FullHD').html | raw }}
  113.                         </div>
  114.                     </div>
  115.                 </section>
  116.             {% endif %}
  117.         {% endif %}
  118.     {% endfor %}
  120.     <section class="content-type-text beige buttons-section news-detail-page">
  121.         <div class="container">
  122.             <div class="buttons-row flex project-detail-site">
  123.                 <div class="buttons-back flex">
  124.                     <button class="primary">
  125.                         <a href="/service/kontakt" target="_self" title="{{ 'Kontakt' | trans }}">
  126.                             {{ 'Kontakt' | trans }}
  127.                             <svg width="15.708" height="10.709" viewBox="0 0 15.708 10.709">
  128.                                 <g transform="translate(0 0.354)">
  129.                                     <g transform="translate(0)">
  130.                                         <path class="line" d="M7.5,18h15" transform="translate(-7.5 -13)" fill="none" stroke="#b76e2b" stroke-linejoin="round" stroke-width="1"/>
  131.                                         <path class="arrow" d="M18,7.5l5.026,5L18,17.5" transform="translate(-8.027 -7.5)" fill="none" stroke="#b76e2b" stroke-width="1"/>
  132.                                     </g>
  133.                                 </g>
  134.                             </svg>
  135.                         </a>
  136.                     </button>
  138.                     <button class="primary">
  139.                         <a onclick="window.history.back()" target="_self" title="{{ 'Zurück' | trans }}">
  140.                             {{ 'Zurück' | trans }}
  141.                             <svg width="15.708" height="10.709" viewBox="0 0 15.708 10.709">
  142.                                 <g transform="translate(0 0.354)">
  143.                                     <g transform="translate(0)">
  144.                                         <path class="line" d="M7.5,18h15" transform="translate(-7.5 -13)" fill="none" stroke="#b76e2b" stroke-linejoin="round" stroke-width="1"/>
  145.                                         <path class="arrow" d="M18,7.5l5.026,5L18,17.5" transform="translate(-8.027 -7.5)" fill="none" stroke="#b76e2b" stroke-width="1"/>
  146.                                     </g>
  147.                                 </g>
  148.                             </svg>
  149.                         </a>
  150.                     </button>
  151.                 </div>
  152.                 <div class="flex gap-20">
  153.                 <p class="share-label flex align-center">SHARE</p>
  154.                 <div class="share-buttons">
  155.                     <a class="resp-sharing-button__link" href="https://facebook.com/sharer/sharer.php?u={{ app.request.uri }}" target="_blank" rel="noopener" aria-label="">
  156.                         <div class="resp-sharing-button resp-sharing-button--facebook resp-sharing-button--small"><div aria-hidden="true" class="resp-sharing-button__icon resp-sharing-button__icon--solid">
  157.                                 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M18.77 7.46H14.5v-1.9c0-.9.6-1.1 1-1.1h3V.5h-4.33C10.24.5 9.5 3.44 9.5 5.32v2.15h-3v4h3v12h5v-12h3.85l.42-4z"/></svg>
  158.                             </div>
  159.                         </div>
  160.                     </a>
  161.                     <a class="resp-sharing-button__link" href="mailto:?subject={{ newsDetail.headline | nl2br }}&amp;body={{ app.request.uri }}" target="_self" rel="noopener" aria-label="">
  162.                         <div class="resp-sharing-button resp-sharing-button--email resp-sharing-button--small"><div aria-hidden="true" class="resp-sharing-button__icon resp-sharing-button__icon--solid">
  163.                                 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M22 4H2C.9 4 0 4.9 0 6v12c0 1.1.9 2 2 2h20c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zM7.25 14.43l-3.5 2c-.08.05-.17.07-.25.07-.17 0-.34-.1-.43-.25-.14-.24-.06-.55.18-.68l3.5-2c.24-.14.55-.06.68.18.14.24.06.55-.18.68zm4.75.07c-.1 0-.2-.03-.27-.08l-8.5-5.5c-.23-.15-.3-.46-.15-.7.15-.22.46-.3.7-.14L12 13.4l8.23-5.32c.23-.15.54-.08.7.15.14.23.07.54-.16.7l-8.5 5.5c-.08.04-.17.07-.27.07zm8.93 1.75c-.1.16-.26.25-.43.25-.08 0-.17-.02-.25-.07l-3.5-2c-.24-.13-.32-.44-.18-.68s.44-.32.68-.18l3.5 2c.24.13.32.44.18.68z"/></svg>
  164.                             </div>
  165.                         </div>
  166.                     </a>
  167.                     <a class="resp-sharing-button__link" href="https://www.linkedin.com/shareArticle?mini=true&amp;url={{ app.request.uri }}&amp;title={{ newsDetail.headline | nl2br }}&amp;summary={{ newsDetail.headline | nl2br }}&amp;source={{ app.request.uri }}" target="_blank" rel="noopener" aria-label="">
  168.                         <div class="resp-sharing-button resp-sharing-button--linkedin resp-sharing-button--small"><div aria-hidden="true" class="resp-sharing-button__icon resp-sharing-button__icon--solid">
  169.                                 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M6.5 21.5h-5v-13h5v13zM4 6.5C2.5 6.5 1.5 5.3 1.5 4s1-2.4 2.5-2.4c1.6 0 2.5 1 2.6 2.5 0 1.4-1 2.5-2.6 2.5zm11.5 6c-1 0-2 1-2 2v7h-5v-13h5V10s1.6-1.5 4-1.5c3 0 5 2.2 5 6.3v6.7h-5v-7c0-1-1-2-2-2z"/></svg>
  170.                             </div>
  171.                         </div>
  172.                     </a>
  173.                     {#<a class="resp-sharing-button__link" href="https://www.xing.com/app/user?op=share;url={{ app.request.uri }};title={{ newsDetail.headline | nl2br }}" target="_blank" rel="noopener" aria-label="">
  174.                         <div class="resp-sharing-button resp-sharing-button--xing resp-sharing-button--small"><div aria-hidden="true" class="resp-sharing-button__icon resp-sharing-button__icon--solid">
  175.                                 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M10.2 9.7l-3-5.4C7.2 4 7 4 6.8 4h-5c-.3 0-.4 0-.5.2v.5L4 10 .4 16v.5c0 .2.2.3.4.3h5c.3 0 .4 0 .5-.2l4-6.6v-.5zM24 .2l-.5-.2H18s-.2 0-.3.3l-8 14v.4l5.2 9c0 .2 0 .3.3.3h5.4s.3 0 .4-.2c.2-.2.2-.4 0-.5l-5-8.8L24 .7V.2z"/></svg>
  176.                             </div>
  177.                         </div>
  178.                     </a>#}
  179.                 </div>
  180.                 </div>
  181.             </div>
  182.         </div>
  183.     </section>
  184. {% endblock %}