templates/layouts/layout/slideshow/slideshow.html.twig line 1

Open in your IDE?
  1. {% set sliderBlockName = 'slideblockname' %}
  3. <section class=" {{ sliderBlockName }} p-0 mb-5 position-relative"  data-aos="zoom-out">
  4.     {% if editmode %}
  5.         <div class="container">
  6.             <div class="row">
  7.                 <div class="col-12">
  8.                     {% set message = 'Slideshow: druk op + om een slide toe te voegen' %}
  9.                     {% include 'includes/basicBlocks/admin/message/tip.html.twig' with {'message': message, 'type' : 'info'} %}
  11.                     {% set block = pimcore_block(sliderBlockName, {'reload' : true, 'limit' : 6}) %}
  12.                     {% for blockcontent in block.iterator %}
  14.                         <div class="border border-primary p-3 mb-3">
  15.                             <div class="form-group mb-2">
  16.                                 {% set message = 'Afbeelding ' ~ loop.index %}
  17.                                 {% include 'includes/basicBlocks/admin/message/tip.html.twig' with {'message': message, 'type' : 'info'} %}
  19.                                 {{ pimcore_image("slideshowImage", {
  20.                                     "title" : "Drag your image here",
  21.                                     "width" : 200,
  22.                                     "height" : 200,
  23.                                 }) }}
  24.                             </div>
  26.                             <div class="form-group mb-2">
  27.                                 {% set message = 'Titel' %}
  28.                                 {% include 'includes/basicBlocks/admin/message/tip.html.twig' with {'message': message, 'type' : 'info'} %}
  30.                                 {{ pimcore_input("titel", {
  31.                                     "class": "form-control",
  32.                                     "placeholder" : "Titel"|trans({}, 'admin')
  33.                                 }) }}
  34.                             </div>
  36.                             <div class="form-group mb-2">
  37.                                 {% set message = 'Tekst' %}
  38.                                 {% include 'includes/basicBlocks/admin/message/tip.html.twig' with {'message': message, 'type' : 'info'} %}
  40.                                 {{ pimcore_textarea("slidertext", {
  41.                                     "class": "form-control",
  42.                                     "placeholder" : "Tekst slider"|trans({}, 'admin'),
  43.                                     "nl2br": true
  44.                                 }) }}
  45.                             </div>
  47.                             <div class="form-group mb-2">
  48.                                 {% set message = 'Klik op knop (potlood) om de link in te stellen' %}
  49.                                 {% include 'includes/basicBlocks/admin/message/tip.html.twig' with {'message': message, 'type' : 'info'} %}
  51.                                 {{ pimcore_link("bannerLink") }}
  52.                             </div>
  58.                         </div>
  59.                     {% endfor %}
  60.                 </div>
  61.             </div>
  62.         </div>
  63.         <hr style="margin-top:50px;margin-bottom:100px;">
  64.     {% endif %}
  66.     {% if not editmode %}
  67.         {% set amount = pimcore_block(sliderBlockName).getCount() - 1 %}
  68.         {% if amount > -1 %}
  69.         <div class="section-banner {{ sliderBlockName }} p-0">
  72.             <div id="{{ sliderBlockName }}" class="carousel slide" data-bs-ride="carousel">
  76.                 {% if amount > 0 %}
  77.                     <ol class="carousel-indicators">
  78.                         {% for i in 0..amount %}
  79.                             <li data-bs-target="#{{ sliderBlockName }}" data-bs-slide-to="{{ i }}" class={% if i == 0 %}"active" aria-current="true"{% endif %}></li>
  80.                         {% endfor %}
  81.                     </ol>
  82.                 {% endif %}
  84.                 <div class="carousel-inner">
  85.                     {% set blocks = pimcore_block(sliderBlockName, {'limit' : 6}) %}
  87.                     {% for block in blocks.iterator %}
  88.                         {% set current = blocks.getCurrent() %}
  89.                         {% set link = pimcore_link("bannerLink").getHref() %}
  91.                         {% if link is defined %}
  92.                             {% set target = pimcore_link("bannerLink").getTarget() %}
  93.                             {% set linktext = pimcore_link("bannerLink").getText() %}
  94.                         {% endif %}
  96.                         <div class="carousel-item {% if current == 0 %}active{% endif %}" id="slide-{{ current }}">
  97.                             <div class="image position-relative" data-thumbnail="{{ pimcore_image("slideshowImage").getThumbnail("slideshow-homepage") }}" style="background-image: url({{ pimcore_image("slideshowImage").getThumbnail("slideshow-homepage") }});">
  99.                                 <div class="container position-relative h-100">
  100.                                     <div class="row align-items-center h-75">
  101.                                         <div class="col-6 text-white py-5">
  102.                                             <h1 class="text-white">{{ pimcore_input("titel") }}</h1>
  104.                                             {% if not pimcore_textarea("slidertext").isEmpty() %}
  105.                                                 <p>{{ pimcore_textarea("slidertext") }}</p>
  106.                                             {% endif %}
  108.                                             {% if link is defined and not pimcore_link("bannerLink").isEmpty() %}
  109.                                                 <a href="{{ link }}" target="{{ target }}"  class="btn btn-primary">{{ linktext }}</a>
  110.                                             {% endif %}
  111.                                         </div>
  112.                                     </div>
  113.                                 </div>
  114.                             </div>
  115.                         </div>
  116.                     {% endfor %}
  117.                 </div>
  119.                 {% if amount > 0 %}
  120.                     <a class="carousel-control-prev" type="button" data-bs-target="#{{ sliderBlockName }}" role="button" data-bs-slide="prev">
  121.                         <span class="carousel-control-prev-icon" aria-hidden="true"></span>
  122.                         <span class="visually-hidden">{{ 'Previous'|trans }}</span>
  123.                     </a>
  125.                     <a class="carousel-control-next" type="button" data-bs-target="#{{ sliderBlockName }}" role="button" data-bs-slide="next">
  126.                         <span class="carousel-control-next-icon" aria-hidden="true"></span>
  127.                         <span class="visually-hidden">{{ 'Next'|trans }}</span>
  128.                     </a>
  129.                 {% endif %}
  130.             </div>
  138.         </div>
  141.         <svg version="1.1" class="{% if not editmode %}position-absolute bottom-0 start-0 mb-n5{% endif %}" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
  142.              viewBox="0 0 3869.3 565.1" style="enable-background:new 0 0 3869.3 565.1;" xml:space="preserve">
  143. <style type="text/css">
  144.     .st0{fill:#FFFFFF;}
  145. </style>
  146.             <path class="st0" d="M1652.2,98.8c495,191.1,690.4,185.6,946.4,176.8c256-8.8,642-103.8,1270.7,181.3l-1.5,108.1H0L5.7,148
  147.     c52.8,15.7,213.9,31.6,435.6-30.9C718.3,38.9,1157.3-92.3,1652.2,98.8z"/>
  148. </svg>
  149.     {% endif %}
  151.     {% endif %}
  155. </section>