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

Open in your IDE?
  1. {% set sliderBlockName = 'homeslider' %}
  3.         {% set amount = pimcore_block(sliderBlockName).getCount() - 1 %}
  4. <div class="container-fluid {% if amount > -1 %}hero{% endif %} mb-5">
  6.     {% if editmode %}
  7.         <div class="d-block my-5 py-5"></div>
  8.         <div class="hero-overlay"></div>
  9.     {% endif %}
  12.     {% if editmode %}
  13.         <div class="container">
  16.             {% set message = 'Slideshow: druk op + om een slide toe te voegen' %}
  17.             {% include 'includes/basicBlocks/admin/message/tip.html.twig' with {'message': message, 'type' : 'info'} %}
  19.             {% set block = pimcore_block(sliderBlockName, {'reload' : true, 'limit' : 6}) %}
  21.             {% for blockcontent in block.iterator %}
  22.                 <div class="card">
  23.                     <div class="card-body">
  24.                         <div class="row">
  25.                             <div class="col-6">
  26.                                 {% set message = 'Afbeelding' %}
  27.                                 {% set type = 'info' %}
  28.                                 {% include 'includes/basicBlocks/admin/message/tip.html.twig' with {'message': message, 'type' : type} %}
  29.                                 {{ pimcore_image('homepage_top_image', {
  30.                                     'class': 'img-fluid' }) }}
  31.                             </div>
  33.                             <div class="col-6">
  34.                                 {% set message = 'Titel' %}
  35.                                 {% set type = 'info' %}
  36.                                 {% include 'includes/basicBlocks/admin/message/tip.html.twig' with {'message': message, 'type' : type} %}
  37.                                 {{ pimcore_textarea('homepage_top_titel',{
  38.                                     "nl2br": true,
  39.                                     "height": 300,
  40.                                 }) }}
  41.                                 {#
  42.                                 {% set message = 'Inhoud' %}
  43.                                 {% set type = 'info' %}
  44.                                 {% include 'includes/basicBlocks/admin/message/tip.html.twig' with {'message': message, 'type' : type} %}
  45.                                 {{ pimcore_wysiwyg('homepage_top_inhoud') }}#}
  47.                                 {% set message = 'Link' %}
  48.                                 {% set type = 'info' %}
  49.                                 {% include 'includes/basicBlocks/admin/message/tip.html.twig' with {'message': message, 'type' : type} %}
  50.                                 {{ pimcore_link('homepage_top_link') }}
  51.                             </div>
  53.                         </div>
  54.                     </div>
  55.                 </div>
  56.             {% endfor %}
  59.         </div>
  61.     {% endif %}
  64.     {% if not editmode %}
  67.         {% set amount = pimcore_block(sliderBlockName).getCount() - 1 %}
  68.         {% set blocks = pimcore_block(sliderBlockName, {'limit' : 6}) %}
  70.         <div class="row">
  71.             <div class="col-12 col-lg-8 p-0 pe-lg-5" {#data-aos="fade-right"#}>
  72.                 <div class="mask-image position-relative">
  74.                     <div id="{{ sliderBlockName }}" class="carousel slide carousel-sync" data-bs-ride="carousel">
  76.                         {% if amount > 1 %}
  77.                             <ul class="carousel-indicators m-0 mb-3">
  78.                                 {% for i in 0..amount %}
  79.                                     <li type="button" data-bs-target="#{{ sliderBlockName }}" data-bs-slide-to="{{ i }}"
  80.                                         class="{% if i == 0 %}active{% endif %}"
  81.                                         aria-current="{% if i == 0 %}true{% endif %}" aria-label="Slide {{ i }}"></li>
  82.                                 {% endfor %}
  83.                             </ul>
  84.                         {% endif %}
  87.                         <div class="carousel-inner">
  88.                             {% for block in blocks.iterator %}
  89.                                 {% set current = blocks.getCurrent() %}
  90.                                 <div class="carousel-item {% if current == 0 %}active{% endif %}">
  91.                                     <img src="{{ pimcore_image('homepage_top_image').getThumbnail('homepage-top') }}">
  92.                                 </div>
  93.                             {% endfor %}
  94.                         </div>
  95.                     </div>
  98.                 </div>
  99.             </div>
  102.             <div class="hero-content">
  103.                 <div id="{{ sliderBlockName }}-B" class="carousel slide carousel-sync"
  104.                      data-bs-ride="carousel">
  105.                     <div class="carousel-inner">
  106.                         {% for block in blocks.iterator %}
  107.                             {% set current = blocks.getCurrent() %}
  109.                             {% set link = pimcore_link("homepage_top_link").getHref() %}
  111.                             {% if link is defined %}
  112.                                 {% set target = pimcore_link("homepage_top_link").getTarget() %}
  113.                                 {% set linktext = pimcore_link("homepage_top_link").getText() %}
  114.                             {% endif %}
  116.                             <div class="carousel-item {% if current == 0 %}active{% endif %}">
  119.                                 <div class="container">
  120.                                     <div class="row">
  123.                                         <div class="col"></div>
  124.                                         <div class="col-12 col-lg-9 col-md-8 align-self-end" {#data-aos="fade-left"#}>
  125.                                             <div class="text-end ps-3 ps-lg-5 pe-3 pe-lg-0">
  126.                                                 <div class="h-100 py-5">
  129.                                                     <h1 class="text-secondary display-1">{{ pimcore_textarea('homepage_top_titel',{
  130.                                                             "nl2br": true,
  131.                                                         }) }}</h1>
  133.                                                     {% if link is defined and not pimcore_link("homepage_top_link").isEmpty() %}
  134.                                                         <a href="{{ link }}" target="{{ target }}"
  135.                                                            class="btn btn-primary btn-lg mt-3">{{ linktext }}</a>
  136.                                                     {% endif %}
  138.                                                 </div>
  140.                                             </div>
  141.                                         </div>
  143.                                     </div>
  144.                                 </div>
  145.                             </div>
  147.                         {% endfor %}
  149.                     </div>
  151.                     {#
  152.                     {% if amount > 1 %}
  153.                         <a class="carousel-control-prev" href="#{{ sliderBlockName }}" role="button"
  154.                            data-bs-slide="prev">
  155.                             <span class="carousel-control-prev-icon" aria-hidden="true"></span>
  156.                             <span class="sr-only">{{ 'Previous'|trans }}</span>
  157.                         </a>
  159.                         <a class="carousel-control-next" href="#{{ sliderBlockName }}" role="button"
  160.                            data-bs-slide="next">
  161.                             <span class="carousel-control-next-icon" aria-hidden="true"></span>
  162.                             <span class="sr-only">{{ 'Next'|trans }}</span>
  163.                         </a>
  164.                     {% endif %}#}
  166.                 </div>
  168.                 {#    </div>r#}
  169.             </div>
  170.         </div>
  172.     {% endif %}
  174. </div>
  176. <script>
  178.     $('.carousel-sync').on('slide.bs.carousel', function (ev) {
  179.         // get the direction, based on the event which occurs
  180.         var dir = ev.direction == 'right' ? 'prev' : 'next';
  181.         // get synchronized non-sliding carousels, and make'em sliding
  182.         $('.carousel-sync').not('.sliding').addClass('sliding').carousel(dir);
  183.     });
  184.     $('.carousel-sync').on('slid.bs.carousel', function (ev) {
  185.         // remove .sliding class, to allow the next move
  186.         $('.carousel-sync').removeClass('sliding');
  187.     });
  189.     // sync clicks on carousel-indicators as well
  190.     $('.carousel-indicators li').click(function (e) {
  191.         e.stopPropagation();
  192.         var goTo = $(this).data('slide-to');
  193.         $('.carousel-sync').not('.sliding').addClass('sliding').carousel(goTo);
  194.     });
  196. </script>