templates/projekte/detail.html.twig line 1

Open in your IDE?
  1. {% extends 'layouts/layout.html.twig' %}
  3. {% block content %}
  5.     <section class="content-header projects-header beige">
  7.         {% if projektDetail.shadowImage %}
  8.             <div class="shadow-image-container project-detail" id="shadow-image-container">
  9.                 {{ projektDetail.shadowImage.thumbnail('ProjectDetailShadow').html({
  10.                     'imgAttributes': {
  11.                         'class':'detail-shadow'
  12.                     }
  13.                 }) | raw }}
  14.             </div>
  15.         {% endif %}
  18.         <div class="container">
  19.             <div class="content-container">
  20.                 {% if projektDetail.maintitle %}
  21.                 <h1 class="light colored">{{ projektDetail.maintitle | nl2br }}</h1>
  22.                 {% endif %}
  23.                 {% if projektDetail.intro %}
  24.                 <div class="colored lead">
  25.                     {{ projektDetail.intro | raw }}
  26.                 </div>
  27.                 {% endif %}
  30.                 <div class="lead table colored">
  31.                     {% if projektDetail.facts.data.beschreibung_1.name_1 %}
  32.                     <table class="facts-table">
  33.                         <tbody>
  34.                         <tr>
  35.                             {% if projektDetail.facts.data.beschreibung_1.name_1 %}
  36.                             <td><p>{{ projektDetail.facts.data.beschreibung_1.name_1 }}</p></td>
  37.                             {% endif %}
  38.                             {% if projektDetail.facts.data.beschreibung_1.name_2 %}
  39.                             <td><p>{{ projektDetail.facts.data.beschreibung_1.name_2 }}</p></td>
  40.                             {% endif %}
  41.                         </tr>
  42.                         <tr>
  43.                             {% if projektDetail.facts.data.beschreibung_2.name_1 %}
  44.                             <td><p>{{ projektDetail.facts.data.beschreibung_2.name_1 }}</p></td>
  45.                             {% endif %}
  46.                             {% if projektDetail.facts.data.beschreibung_2.name_2 %}
  47.                             <td><p>{{ projektDetail.facts.data.beschreibung_2.name_2 }}</p></td>
  48.                             {% endif %}
  49.                         </tr>
  51.                         <tr>
  52.                             {% if projektDetail.facts.data.beschreibung_3.name_1 %}
  53.                             <td><p>{{ projektDetail.facts.data.beschreibung_3.name_1 }}</p></td>
  54.                             {% endif %}
  55.                             {% if projektDetail.facts.data.beschreibung_3.name_2 %}
  56.                             <td><p>{{ projektDetail.facts.data.beschreibung_3.name_2 }}</p></td>
  57.                             {% endif %}
  58.                         </tr>
  60.                         <tr>
  61.                             {% if projektDetail.facts.data.beschreibung_4.name_1 %}
  62.                             <td><p>{{ projektDetail.facts.data.beschreibung_4.name_1 }}</p></td>
  63.                             {% endif %}
  65.                             {% if projektDetail.facts.data.beschreibung_4.name_2 %}
  66.                             <td><p>{{ projektDetail.facts.data.beschreibung_4.name_2 }}</p></td>
  67.                             {% endif %}
  68.                         </tr>
  69.                         </tbody>
  70.                     </table>
  71.                     {% endif %}
  72.                 </div>
  75.             </div>
  77.         </div>
  78.         <div class="container detail-image-container">
  79.             {% if projektDetail.video %}
  80.                 {% if projektDetail.video.type == 'youtube' %}
  81.                     <div class="main-image">
  82.                         <iframe width="100%" height="100%" src="https://www.youtube.com/embed/{{ projektDetail.video.data }}" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
  83.                     </div>
  84.                 {% else %}
  85.                     <div class="main-image">
  86.                         <video controls>
  87.                             <source src="{{ projektDetail.video.data }}" type="video/mp4">
  88.                             <source src="{{ projektDetail.video.data }}" type="video/ogg">
  89.                             Your browser does not support the video tag.
  90.                         </video>
  91.                     </div>
  92.                 {% endif %}
  93.             {% elseif projektDetail.image %}
  94.                  <div class="main-image">
  95.                     {{ projektDetail.image.thumbnail('FullHD').html({
  96.                         'imgAttributes': {
  97.                             'class':'main-image'
  98.                         }
  99.                     }) | raw }}
  100.                 </div>
  101.             {% endif %}
  103.             <div class="content-container">
  104.                 <div class="text-container flex">
  105.                     <div class="item lead colored item-lead">
  106.                         {{ projektDetail.textLeft | raw }}
  107.                     </div>
  108.                     <div class="item lead colored item-lead">
  109.                         {{ projektDetail.textRight | raw }}
  110.                     </div>
  111.                 </div>
  112.             </div>
  114.         </div>
  116.     </section>
  119.         <section class="teaser-swiper news-teaser projekt-teaser detail-page beige">
  120.             <div class="container teaser-container">
  121.                 {% if projektDetail.gallery.items %}
  122.                 <div class="news-swiper-container projekt-swiper-container detail-page">
  123.                     <div class="swiper newsTeaserSwiper projektTeaserSwiper">
  124.                         <div class="swiper-wrapper">
  125.                             {% for image in projektDetail.gallery %}
  127.                                 <div class="swiper-slide">
  128.                                     <div class="teaser">
  129.                                         {{ image.thumbnail('ProjektTeaser').html | raw }}
  130.                                     </div>
  131.                                 </div>
  133.                             {% endfor %}
  134.                         </div>
  135.                         <div class="swipe-controls">
  136.                             <div class="newsTeaserSwiperNext"></div>
  137.                             <div class="newsTeaserSwiperPrev"></div>
  138.                         </div>
  139.                     </div>
  140.                 </div>
  141.                 {% endif %}
  142.                 <div class="buttons-row flex project-detail-site">
  143.                     <div class="buttons-back flex">
  144.                         <button class="primary">
  145.                             <a href="/service/kontakt" target="_self" title="{{ 'Kontakt' | trans }}">
  146.                                 {{ 'Kontakt' | trans }}
  147.                                 <svg width="15.708" height="10.709" viewBox="0 0 15.708 10.709">
  148.                                     <g transform="translate(0 0.354)">
  149.                                         <g transform="translate(0)">
  150.                                             <path class="line" d="M7.5,18h15" transform="translate(-7.5 -13)" fill="none" stroke="#b76e2b" stroke-linejoin="round" stroke-width="1"/>
  151.                                             <path class="arrow" d="M18,7.5l5.026,5L18,17.5" transform="translate(-8.027 -7.5)" fill="none" stroke="#b76e2b" stroke-width="1"/>
  152.                                         </g>
  153.                                     </g>
  154.                                 </svg>
  155.                             </a>
  156.                         </button>
  158.                         <button class="primary">
  159.                             <a onclick="window.history.back()" target="_self" title="{{ 'Zurück' | trans }}">
  160.                                 {{ 'Zurück' | trans }}
  161.                                 <svg width="15.708" height="10.709" viewBox="0 0 15.708 10.709">
  162.                                     <g transform="translate(0 0.354)">
  163.                                         <g transform="translate(0)">
  164.                                             <path class="line" d="M7.5,18h15" transform="translate(-7.5 -13)" fill="none" stroke="#b76e2b" stroke-linejoin="round" stroke-width="1"/>
  165.                                             <path class="arrow" d="M18,7.5l5.026,5L18,17.5" transform="translate(-8.027 -7.5)" fill="none" stroke="#b76e2b" stroke-width="1"/>
  166.                                         </g>
  167.                                     </g>
  168.                                 </svg>
  169.                             </a>
  170.                         </button>
  171.                     </div>
  173.                     <div class="share-buttons">
  175.                         <!-- Sharingbutton Facebook -->
  176.                         <a class="resp-sharing-button__link" href="https://facebook.com/sharer/sharer.php?u={{ app.request.uri }}" target="_blank" rel="noopener" aria-label="">
  177.                             <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">
  178.                                     <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>
  179.                                 </div>
  180.                             </div>
  181.                         </a>
  183.                         <!-- Sharingbutton E-Mail -->
  184.                         <a class="resp-sharing-button__link" href="mailto:?subject={{ projektDetail.maintitle | nl2br }}&amp;body={{ app.request.uri }}" target="_self" rel="noopener" aria-label="">
  185.                             <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">
  186.                                     <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>
  187.                                 </div>
  188.                             </div>
  189.                         </a>
  191.                         <!-- Sharingbutton LinkedIn -->
  192.                         <a class="resp-sharing-button__link" href="https://www.linkedin.com/shareArticle?mini=true&amp;url={{ app.request.uri }}&amp;title={{ projektDetail.maintitle | nl2br }}&amp;summary={{ projektDetail.maintitle | nl2br }}&amp;source={{ app.request.uri }}" target="_blank" rel="noopener" aria-label="">
  193.                             <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">
  194.                                     <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>
  195.                                 </div>
  196.                             </div>
  197.                         </a>
  199.                         <!-- Sharingbutton XING -->
  200.                         {#<a class="resp-sharing-button__link" href="https://www.xing.com/app/user?op=share;url={{ app.request.uri }};title={{ projektDetail.maintitle | nl2br }}" target="_blank" rel="noopener" aria-label="">
  201.                             <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">
  202.                                     <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>
  203.                                 </div>
  204.                             </div>
  205.                         </a>#}
  207.                     </div>
  209.                 </div>
  211.             </div>
  212.         </section>
  215. {% endblock %}