templates/areas/gallery-carousel/view.html.twig line 1

Open in your IDE?
  1. <section class="area-gallery-carousel">
  2.     {% set selectStore = [] %}
  3.     {% for i in 2..29 %}
  4.         {% set selectStore = selectStore|merge([i]) %}
  5.     {% endfor %}
  7.     {% set slidesSelect = pimcore_select('slides', {
  8.         store: selectStore,
  9.         reload: true,
  10.         width: 70,
  11.         class: 'align-middle'
  12.     }) %}
  14.     {% set showPreviewsCheckbox = pimcore_checkbox('showPreviews', {class: 'align-middle pt-7px'}) %}
  15.     {% set showPreviews = showPreviewsCheckbox.isChecked and not editmode %}
  17.     {% set id = 'gallery-carousel-' ~ uniqid() %}
  18.     {% set slides = slidesSelect.getData()|default(2) %}
  20.     {% if editmode %}
  22.         <div class="alert alert-secondary col-xs-12" style="height: 75px">
  23.             <div class="col-xs-6 d-inline mx-auto">
  24.                 <span class="editmode-label align-middle">How many images you want to show?</span>
  25.                 {{ slidesSelect|raw }}
  26.             </div>
  27.             <div class="col-xs-6 d-inline ml-5">
  28.                 <span class="editmode-label align-middle">Show Previews</span>
  29.                 {{ showPreviewsCheckbox|raw }}
  30.             </div>
  31.         </div>
  33.     {% endif %}
  35.     <div id="{{ id }}" class="gallery carousel slide" data-ride="carousel"  {{ editmode ? 'data-interval="false"' : '' }}>
  36.         <!-- Indicators -->
  37.         <ol class="carousel-indicators {{ showPreviews ? 'preview visible-lg' }}">
  39.             {% for i in 0..(slides-1) %}
  41.                 <li data-target="#{{ id }}" data-slide-to="{{ i }}" class="{{ loop.first ? 'active' }}">
  42.                     {% if showPreviews %}
  43.                         {{
  44.                             pimcore_image('image_' ~ i, {
  45.                                 thumbnail: 'galleryCarouselPreview',
  46.                             })
  47.                         }}
  48.                     {% endif %}
  49.                 </li>
  51.             {% endfor %}
  52.         </ol>
  54.         <div class="carousel-inner">
  55.             {% for i in 0..(slides-1) %}
  56.                 <div class="carousel-item {{ id ~ '-' ~ i }} {{ loop.first ? 'active' }}">
  57.                     {{
  58.                         pimcore_image('image_' ~ i, {
  59.                             thumbnail: 'galleryCarousel',
  60.                             hidetext: true,
  61.                             dropClass: id ~ '-' ~ i,
  62.                             imgAttributes: {class: 'd-block w-100'}
  63.                         })
  64.                     }}
  66.                     <div class="carousel-caption text-center {{ showPreviews ? 'vh-10' : ''}}">
  67.                         <h3>{{ pimcore_input('caption-title_' ~ i) }}</h3>
  68.                         <p class="hero-text">{{ pimcore_textarea('caption-text' ~ i) }}</p>
  69.                         <p>{% set cLink = pimcore_link('caption-link' ~ i, {
  70.                                 'class': 'btn btn-lg btn-primary'
  71.                             }) %}
  72.                             {{ cLink|raw }}
  73.                         </p>
  74.                     </div>
  75.                 </div>
  76.             {% endfor %}
  77.         </div>
  79.         <a class="carousel-control carousel-control-prev" href="#{{ id }}" role="button" data-slide="prev">
  80.             <span class="carousel-control-prev-icon" aria-hidden="true"></span>
  81.             <span class="sr-only">Previous</span>
  82.         </a>
  83.         <a class="carousel-control carousel-control-next" href="#{{ id }}" role="button" data-slide="next">
  84.             <span class="carousel-control-next-icon" aria-hidden="true"></span>
  85.             <span class="sr-only">Next</span>
  86.         </a>
  87.     </div>
  88. </section>