templates/areas/content-header/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">Abstand nach unten wählen:</p>
  9.                         {{ pimcore_select("MarginBottom", {
  10.                             "reload": true,
  11.                             "store": [
  12.                                 ["regular", "Normal"],
  13.                                 ["half", "1/2"],
  14.                                 ["small", "1/4"],
  15.                                 ["zero", "kein Abstand"],
  16.                             ],
  17.                             "defaultValue" : "regular"
  18.                         }) }}
  19.                     </div>
  20.                 </div>
  21.             </div>
  22.         </div>
  23.     </div>
  24. {% endif %}
  25. <section class="content-header {{ pimcore_select('MarginBottom').getData() }}">
  26.     {% if editmode %}
  27.     <div class="container" style="z-index: 10;position: relative;">
  28.         {{ pimcore_relation("HeaderImage",{
  29.             "types": ["asset"],
  30.             "subtypes": {
  31.                 "asset": ["image"]
  32.             }
  33.         }) }}
  34.     </div>
  35.     {% elseif not editmode and not pimcore_relation("HeaderImage").isEmpty() %}
  36.         <div class="bg">
  37.             {{ pimcore_relation("HeaderImage").getElement().thumbnail('ContentHeaderBackground').getHtml({'imgAttributes': {
  38.                 'class': 'content-header-image'
  39.             }}) | raw }}
  40.         </div>
  41.     {% endif %}
  42.     <div class="container content-header-container">
  43.         {% if editmode %}
  44.             <h1>{{ pimcore_textarea("headline",{
  45.                     "nl2br": true,
  46.                     "height": 100,
  47.                     "placeholder": "HAUPT ÜBERSCHRIFT FÜR DIESE AREA"
  48.                 }) }}
  49.             </h1>
  50.         {% elseif not editmode and not pimcore_textarea('headline').isEmpty() %}
  51.             <h1>{{ pimcore_textarea('headline').getData() | nl2br }}</h1>
  52.         {% endif %}
  53.         <div class="content-container lead">
  54.             {% if editmode %}
  55.                 <p>{{ pimcore_textarea("intro",{
  56.                         "nl2br": true,
  57.                         "height": 200,
  58.                         "class": "content-intro-text",
  59.                         "placeholder": "Quisque velit nisi, pretium ut lacinia in, elementum id enim. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Pellentesque in ipsum id orci porta dapibus. Nulla quis lorem ut libero malesuada feugiat."
  60.                     }) }}
  61.                 </p>
  62.             {% elseif not editmode and not pimcore_textarea('intro').isEmpty() %}
  63.                 <p>{{ pimcore_textarea('intro').getData() | nl2br }}</p>
  64.             {% endif %}
  65.         </div>
  66.         {% if editmode %}
  67.             {{ pimcore_relations("ContentSlider", {
  68.                 "title": "Bilder oder Videos ablegen",
  69.                 "types": ["asset"],
  70.                 "subtypes": {
  71.                     "asset": ["image", "video"]
  72.                 }
  73.             }) }}
  74.         {% else %}
  76.         {% if pimcore_relations("ContentSlider") | length > 1 %}
  77.             <div class="swiper contentSwiper content-item">
  78.                 <div class="swiper-wrapper">
  79.                     {% for image in pimcore_relations("ContentSlider") %}
  80.                         <div class="swiper-slide">
  81.                             {% if image.type != "video" %}
  82.                             {{ image.thumbnail('NewsDetailSwiper').html | raw }}
  83.                             {% else %}
  84.                                 <div class="video-container">
  85.                                     <video class="video" style="width: 100%;" controls playsinline autoplay muted>
  86.                                         <source src="{{ image.getFullPath() }}" type="video/mp4">
  87.                                     </video>
  88.                                 </div>
  89.                             {% endif %}
  90.                         </div>
  91.                     {% endfor %}
  92.                 </div>
  93.                 <div class="swiper-pagination"></div>
  94.             </div>
  95.         {% else %}
  96.             {% for image in pimcore_relations("ContentSlider") %}
  97.                 {% if image.type != "video" %}
  98.                  {{ image.thumbnail('NewsDetailSwiper').getHtml({'imgAttributes': {
  99.                      "class" : "content-header-single-image"
  100.                  }}) | raw }}
  101.                 {% else %}
  102.                     <div class="video-container">
  103.                         <video class="video" style="width: 100%;" controls playsinline autoplay muted>
  104.                             <source src="{{ image.getFullPath() }}" type="video/mp4">
  105.                         </video>
  106.                     </div>
  107.                 {% endif %}
  108.             {% endfor %}
  109.         {% endif %}
  110.         {% endif %}
  111.     </div>
  112. </section>