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

Open in your IDE?
  1. {% set sliderBlockName = 'slideblockname' %}
  3. <section class="section-banner {{ sliderBlockName }} p-0 {% if not editmode %}{% endif %} position-relative" data-aos="zoom-out">
  4.     {% if editmode %}
  6.         <div class="container">
  7.             <div class="row">
  8.                 <div class="col-12">
  9.                     <div class="alert alert-primary d-flex align-items-center">
  11.                         {{ 'Afbeelding of video?'|trans({}, 'admin') }}
  12.                         {{ pimcore_select("media", {
  13.                             "store": [
  14.                                 ["image", "Image"],
  15.                                 ["video", "Video"],
  16.                             ],
  17.                             "defaultValue" : "image",
  18.                             "reload" : true,
  19.                             "class": "ms-3"
  20.                         }) }}
  22.                     </div>
  23.                 </div>
  24.             </div>
  25.         </div>
  28.         <div class="container mb-5">
  29.             <div class="row">
  30.                 <div class="col-12">
  31.                     {% if pimcore_select("media").getData() == "image" %}
  32.                         {% set message = 'Slideshow: druk op + om een slide toe te voegen' %}
  33.                         {% include 'includes/basicBlocks/admin/message/tip.html.twig' with {'message': message, 'type' : 'info'} %}
  35.                         {% set block = pimcore_block(sliderBlockName, {'reload' : true, 'limit' : 6}) %}
  36.                         {% for blockcontent in block.iterator %}
  38.                             <div class="border border-primary p-3 mb-3">
  39.                                 <div class="form-group mb-2">
  40.                                     {% set message = 'Afbeelding ' ~ loop.index %}
  41.                                     {% include 'includes/basicBlocks/admin/message/tip.html.twig' with {'message': message, 'type' : 'info'} %}
  43.                                     {{ pimcore_image("slideshowImage", {
  44.                                         "title" : "Drag your image here",
  45.                                         "width" : 200,
  46.                                         "height" : 200,
  47.                                     }) }}
  48.                                 </div>
  50.                                 {#
  51.                                                                                                                                                                                                 <div class="form-group mb-2">
  52.                                                                                                                                                                                                     {% set message = 'Titel' %}
  53.                                                                                                                                                                                                     {% include 'includes/basicBlocks/admin/message/tip.html.twig' with {'message': message, 'type' : 'info'} %}
  54.                                                                                                                                                                 
  55.                                                                                                                                                                 
  56.                                                                                                                                                                                                     {{ pimcore_input("titel", {
  57.                                                                                                                                                                                                         "class": "form-control",
  58.                                                                                                                                                                                                         "placeholder" : "Titel"|trans({}, 'admin')
  59.                                                                                                                                                                                                     }) }}
  60.                                                                                                                                                                 
  61.                                                                                                                                                                                                     {{ pimcore_textarea("titel",{
  62.                                                                                                                                                                                                         "nl2br": true,
  63.                                                                                                                                                                                                         "height": 300,
  64.                                                                                                                                                                                                         "placeholder": "Titel"|trans({}, 'admin')
  65.                                                                                                                                                                                                     }) }}
  66.                                                                                                                                                                 
  67.                                                                                                                                                                                                 </div>#}
  69.                                 <div class="form-group mb-2">
  70.                                     {% set message = 'Tekst' %}
  71.                                     {% include 'includes/basicBlocks/admin/message/tip.html.twig' with {'message': message, 'type' : 'info'} %}
  73.                                     {{ pimcore_textarea("slidertext", {
  74.                                         "class": "form-control",
  75.                                         "placeholder" : "Tekst slider"|trans({}, 'admin'),
  76.                                         "nl2br": true
  77.                                     }) }}
  78.                                 </div>
  80.                                 <div class="form-group mb-2">
  81.                                     {% set message = 'WYSIWYG' %}
  82.                                     {% include 'includes/basicBlocks/admin/message/tip.html.twig' with {'message': message, 'type' : 'info'} %}
  84.                                     {{ pimcore_wysiwyg("sliderwysiwyg", {
  85.                                         "class": "form-control"
  86.                                     }) }}
  87.                                 </div>
  90.                                 <div class="form-group mb-2">
  91.                                     {% set message = 'Klik op knop (potlood) om de link in te stellen' %}
  92.                                     {% include 'includes/basicBlocks/admin/message/tip.html.twig' with {'message': message, 'type' : 'info'} %}
  94.                                     {{ pimcore_link("bannerLink") }}
  95.                                 </div>
  98.                             </div>
  99.                         {% endfor %}
  100.                     {% endif %}
  101.                     {% if pimcore_select("media").getData() == "video" %}
  102.                         {% if pimcore_select("media").getData() == "video" %}
  103.                             {{ 'Video'|trans({}, 'admin') }}
  104.                             {{ pimcore_video('bannerVideo', {
  105.                                 width: 200,
  106.                                 height: 150
  107.                             }) }}
  109.                         {% endif %}
  110.                     {% endif %}
  111.                 </div>
  112.             </div>
  113.         </div>
  115.     {% endif %}
  117.     {% if not editmode %}
  118.         <div class="section-banner {{ sliderBlockName }} p-0">
  121.             {% if pimcore_select("media").getData() == "image" %}
  122.                 <div id="{{ sliderBlockName }}" class="carousel slide carousel-home" data-bs-ride="carousel">
  124.                     {% set amount = pimcore_block(sliderBlockName).getCount() - 1 %}
  126.                     {% if amount > 0 %}
  127.                         <ol class="carousel-indicators">
  128.                             {% for i in 0..amount %}
  129.                                 <li data-bs-target="#{{ sliderBlockName }}" data-bs-slide-to="{{ i }}" class={% if i == 0 %} "active" aria-current="true" {% endif %}></li>
  130.                             {% endfor %}
  131.                         </ol>
  132.                     {% endif %}
  134.                     <div class="carousel-inner">
  135.                         {% set blocks = pimcore_block(sliderBlockName, {'limit' : 6}) %}
  137.                         {% for block in blocks.iterator %}
  138.                             {% set current = blocks.getCurrent() %}
  139.                             {% set link = pimcore_link("bannerLink").getHref() %}
  141.                             {% if link is defined %}
  142.                                 {% set target = pimcore_link("bannerLink").getTarget() %}
  143.                                 {% set linktext = pimcore_link("bannerLink").getText() %}
  144.                             {% endif %}
  146.                             <div class="carousel-item {% if current == 0 %}active{% endif %}" id="slide-{{ current }}">
  147.                                 <div class="image position-relative" data-thumbnail="{{ pimcore_image('slideshowImage').getThumbnail('slideshow-homepage') }}" style="background-image: url({{ pimcore_image('slideshowImage').getThumbnail('slideshow-homepage') }});">
  148.                                     <div class="container position-relative h-75">
  149.                                         <div class="row align-items-center h-100">
  150.                                             <div class="col-6 text-white py-5">
  151.                                                 {# {{ pimcore_input("titel") }} #}
  152.                                                 {% if not pimcore_textarea("slidertext").isEmpty() %}
  153.                                                     <h1 class="mb-5 text-white display-1 fw-bold" style="text-shadow: 2px 2px 8px rgba(0,0,0,0.6);">{{ pimcore_textarea("slidertext") }}</h1>
  154.                                                 {% endif %}
  156.                                                 {% if not pimcore_wysiwyg("sliderwysiwyg").isEmpty() %}
  158.                                                     <h1 class="mb-5 text-white display-1 fw-bold">{{ pimcore_wysiwyg("sliderwysiwyg") }}</h1>
  160.                                                 {% endif %}
  163.                                                 {% if link is defined and not pimcore_link("bannerLink").isEmpty() %}
  164.                                                     <a href="{{ link }}" target="{{ target }}" class="btn btn-secondary">{{ linktext }}</a>
  165.                                                 {% endif %}
  166.                                             </div>
  167.                                         </div>
  168.                                     </div>
  169.                                 </div>
  170.                             </div>
  171.                         {% endfor %}
  172.                     </div>
  174.                     {% if amount > 0 %}
  175.                         <a class="carousel-control-prev" type="button" data-bs-target="#{{ sliderBlockName }}" role="button" data-bs-slide="prev">
  176.                             <span class="carousel-control-prev-icon" aria-hidden="true"></span>
  177.                             <span class="visually-hidden">{{ 'Previous'|trans }}</span>
  178.                         </a>
  180.                         <a class="carousel-control-next" type="button" data-bs-target="#{{ sliderBlockName }}" role="button" data-bs-slide="next">
  181.                             <span class="carousel-control-next-icon" aria-hidden="true"></span>
  182.                             <span class="visually-hidden">{{ 'Next'|trans }}</span>
  183.                         </a>
  184.                     {% endif %}
  185.                 </div>
  186.             {% endif %}
  189.             {% if pimcore_select("media").getData() == "video" %}
  191.                 <div class="header-media">
  192.                     {{ pimcore_video('bannerVideo', {
  193.                     attributes: {
  194.                         'preload': 'auto',
  195.                         'controls': '',
  196.                         'autoplay' : '',
  197.                         'playsinline': '',
  198.                         'muted' : '',
  199.                         'loop': 'loop',
  200.                         'width': '100%',
  201.                         'height': '100%'
  202.                     }
  203.                 }) }}
  204.                 </div>
  206.             {% endif %}
  209.         </div>
  210.     {% endif %}
  212.     <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" viewbox="0 0 3869.3 565.1" style="enable-background:new 0 0 3869.3 565.1;" xml:space="preserve">
  213.         <style type="text/css">
  214.             .st0 {
  215.                 fill: #FFFFFF;
  216.             }
  217.         </style>
  218.         <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
  219.                                             c52.8,15.7,213.9,31.6,435.6-30.9C718.3,38.9,1157.3-92.3,1652.2,98.8z"/>
  220.     </svg>
  223. </section>