templates/areas/media-slider/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>
  21.                     <div class="item">
  22.                         <div class="relation-container">
  23.                             {{ pimcore_relations("MediaSlider", {
  24.                                 "title": "MediaSlider Objekte ablegen",
  25.                                 "types": ["object"],
  26.                                 "width": 600,
  27.                                 "subtypes": {
  28.                                     "object": ["object"]
  29.                                 },
  30.                                 "classes": ["MediaSlider"]
  31.                             }) }}
  32.                         </div>
  33.                     </div>
  34.                 </div>
  35.             </div>
  36.         </div>
  37.     </div>
  38. {% endif %}
  39. <section class="media-slider {{ pimcore_select('MarginBottom').getData() }}">
  41.     <div class="slider-wrapper">
  42.         {% set mediaSlider = pimcore_relations("MediaSlider") %}
  43.         
  44.         {% for slider in mediaSlider %}
  45.             <div class="slider-slide {% if loop.first %}--active{% endif %} {% if slider.videoWebm is not null or slider.videoMp4 is not null %}--video{% endif %} {% if slider.youtubeId %}--youtube{% endif %}">
  46.                 
  47.                 {% if slider.videoWebm is not null or slider.videoMp4 is not null %}
  49.                     <button class="slider-video-play-button">{{ include('svg/play.html.twig') }}</button>
  51.                     {% set posterPath = slider.image ?  slider.image.getRealFullPath() : null %}
  52.                     <video class="slider-video" controls playsinline preload="none" {% if posterPath %} poster="{{ posterPath }}"{% endif %}>
  53.                         {% if slider.videoWebm is not null %}
  54.                             <source src="{{ slider.videoWebm.getRealFullPath() }}" type="video/webm">
  55.                         {% endif %}
  56.                         {% if slider.videoMp4 is not null %}
  57.                             <source src="{{ slider.videoMp4.getRealFullPath() }}" type="video/mp4">
  58.                         {% endif %}
  59.                         Your browser does not support the video tag.
  60.                     </video>
  62.                 {% elseif slider.youtubeId is not null %}
  64.                     <iframe 
  65.                         class="slider__video --youtube"
  66.                         src="https://www.youtube-nocookie.com/embed/{{ slider.youtubeId }}?autoplay=0&modestbranding=1&iv_load_policy=3" 
  67.                         frameboreder="0"
  68.                         allow="autoplay; encrypted-media" 
  69.                         allowfullscreen
  70.                     ></iframe>
  72.                 {% elseif slider.image %}
  74.                     {{ slider.image.thumbnail('MediaSlider').html({imgAttributes: {
  75.                         'loading': 'eager',
  76.                     }}) | raw }}
  78.                 {% endif %}
  80.                 <div class="slider-caption">
  81.                     {% if slider.caption %}
  82.                         {{ slider.caption|raw }}
  83.                     {% endif %}
  84.                 </div>
  85.             </div>
  87.         {% endfor %}
  89.         {% if mediaSlider|length > 1 %}
  90.             <button class="slider-prev">{{ include('svg/icon-chevron-left.html.twig') }}</button>
  91.             <button class="slider-next">{{ include('svg/icon-chevron-left.html.twig') }}</button>
  92.         
  93.             <div class="slider-pagination">
  94.                 {% for slider in mediaSlider %}
  95.                     <div class="slider-pagination-item {% if loop.first %}--active{% endif %}"></div>
  96.                 {% endfor %}
  97.             </div>
  98.         {% endif %}
  99.     </div>
  101. </section>