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

Open in your IDE?
  1. {% set sliderBlockName = 'sliderBlockName' %}
  3.         {% set amount = pimcore_block(sliderBlockName).getCount() - 1 %}
  4. <div class="container-fluid {% if amount > -1 %}hero{% endif %} hero-default 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} %}
  38.                                 <div class="col-auto mb-3">
  40.                                             {{ pimcore_select("titleColor", {
  41.                                                 "store": [
  42.                                                     ["text-primary", "primary"],
  43.                                                     ["text-secondary", "secondary"],
  44.                                                     ["text-red", "red"],
  45.                                                     ["text-black", "black"],
  46.                                                     ["text-white", "white"]
  47.                                                 ],
  48.                                                 "reload" : true,
  49.                                                 "defaultValue" : "1",
  50.                                             }) }}
  52.                                 </div>
  55.                                 {{ pimcore_textarea('homepage_top_titel',{
  56.                                     "nl2br": true,
  57.                                     "height": 100,
  58.                                 }) }}
  60.                                 {% set message = 'Inhoud' %}
  61.                                 {% set type = 'info' %}
  62.                                 {% include 'includes/basicBlocks/admin/message/tip.html.twig' with {'message': message, 'type' : type} %}
  63.                                 {{ pimcore_wysiwyg('homepage_top_inhoud') }}
  66.                             </div>
  68.                         </div>
  69.                     </div>
  70.                 </div>
  71.             {% endfor %}
  74.         </div>
  76.     {% endif %}
  78.         {# // Set titleColor #}
  79.     {% set titleColor = pimcore_select("titleColor").getData() %}
  81.     {% if not editmode %}
  85.         {% set blocks = pimcore_block(sliderBlockName, {'limit' : 6}) %}
  87.         {% if amount < 0 %}
  88.             <div class="d-block my-5 py-5"></div>
  89.         {% endif %}
  91.         <div class="row">
  92.             <div class="col-12 col-lg-8 p-0 pe-lg-5" {#data-aos="fade-right"#}>
  93.                 <div class="mask-image position-relative">
  95.                     <div id="{{ sliderBlockName }}" class="carousel slide carousel-sync" data-bs-ride="carousel">
  97.                         {% if amount > 1 %}
  98.                             <ul class="carousel-indicators m-0 mb-3">
  99.                                 {% for i in 0..amount %}
  100.                                     <li type="button" data-bs-target="#{{ sliderBlockName }}" data-bs-slide-to="{{ i }}"
  101.                                         class="{% if i == 0 %}active{% endif %}"
  102.                                         aria-current="{% if i == 0 %}true{% endif %}" aria-label="Slide {{ i }}"></li>
  103.                                 {% endfor %}
  104.                             </ul>
  105.                         {% endif %}
  108.                         <div class="carousel-inner">
  109.                             {% for block in blocks.iterator %}
  110.                                 {% set current = blocks.getCurrent() %}
  111.                                 <div class="carousel-item {% if current == 0 %}active{% endif %}">
  112.                                     <img src="{{ pimcore_image('homepage_top_image').getThumbnail('homepage-top') }}">
  113.                                 </div>
  114.                             {% endfor %}
  115.                         </div>
  116.                     </div>
  119.                 </div>
  120.             </div>
  123.             <div class="hero-content">
  124.                 <div id="{{ sliderBlockName }}-B" class="carousel slide carousel-sync"
  125.                      data-bs-ride="carousel">
  126.                     <div class="carousel-inner">
  127.                         {% for block in blocks.iterator %}
  128.                             {% set current = blocks.getCurrent() %}
  131.                             <div class="carousel-item {% if current == 0 %}active{% endif %}">
  134.                                 <div class="container">
  135.                                     <div class="row">
  138.                                         <div class="col"></div>
  139.                                         <div class="col-12 col-lg-9 col-md-8 align-self-end" {#data-aos="fade-left"#}>
  140.                                             <div class="text-end ps-3 ps-lg-5 pe-3 pe-lg-0">
  141.                                                 <div class="h-100 py-5">
  144.                                                     <h1 class="display-1 {{ pimcore_select("titleColor").getData() }}">{{ pimcore_textarea('homepage_top_titel',{
  145.                                                             "nl2br": true,
  146.                                                         }) }}</h1>
  147.                                                     <div class="text-black w-50 float-end">
  148.                                                         {{ pimcore_wysiwyg('homepage_top_inhoud') }}
  150.                                                     </div>
  153.                                                 </div>
  155.                                             </div>
  156.                                         </div>
  158.                                     </div>
  159.                                 </div>
  160.                             </div>
  162.                         {% endfor %}
  164.                     </div>
  166.                     {#
  167.                     {% if amount > 1 %}
  168.                         <a class="carousel-control-prev" href="#{{ sliderBlockName }}" role="button"
  169.                            data-bs-slide="prev">
  170.                             <span class="carousel-control-prev-icon" aria-hidden="true"></span>
  171.                             <span class="sr-only">{{ 'Previous'|trans }}</span>
  172.                         </a>
  174.                         <a class="carousel-control-next" href="#{{ sliderBlockName }}" role="button"
  175.                            data-bs-slide="next">
  176.                             <span class="carousel-control-next-icon" aria-hidden="true"></span>
  177.                             <span class="sr-only">{{ 'Next'|trans }}</span>
  178.                         </a>
  179.                     {% endif %}#}
  181.                 </div>
  183.                 {#    </div>r#}
  184.             </div>
  185.         </div>
  187.     {% endif %}
  189. </div>
  191. <script>
  193.     $('.carousel-sync').on('slide.bs.carousel', function (ev) {
  194.         // get the direction, based on the event which occurs
  195.         var dir = ev.direction == 'right' ? 'prev' : 'next';
  196.         // get synchronized non-sliding carousels, and make'em sliding
  197.         $('.carousel-sync').not('.sliding').addClass('sliding').carousel(dir);
  198.     });
  199.     $('.carousel-sync').on('slid.bs.carousel', function (ev) {
  200.         // remove .sliding class, to allow the next move
  201.         $('.carousel-sync').removeClass('sliding');
  202.     });
  204.     // sync clicks on carousel-indicators as well
  205.     $('.carousel-indicators li').click(function (e) {
  206.         e.stopPropagation();
  207.         var goTo = $(this).data('slide-to');
  208.         $('.carousel-sync').not('.sliding').addClass('sliding').carousel(goTo);
  209.     });
  211. </script>