templates/areas/featurette-slider/view.html.twig line 1

Open in your IDE?
  1. {# some house keeping to setup the carousel #}
  2. {% set slidesEditable = pimcore_relations('slides', {
  3.     reload: true,
  4.     types: ['object'],
  5.     subtypes: {
  6.         object: ['object'],
  7.     },
  8.     classes: ['CarouselSlide']
  9. }) %}
  11. {% set id = 'page-carousel-'~areaId %}
  12. <div class="container">
  13.     <div class="row">
  14.         <div class="col-sm-10">
  15.             <h2>{{ pimcore_input("title") }}</h2>
  17.             {% if editmode %}
  18.                 {{ slidesEditable|raw }}
  19.             {% endif %}
  20.         </div>
  21.     </div>
  23.     <div class="row">
  24.         <div class="col-sm-12">
  26.             <div id="{{ id }}" class="carousel slide" data-ride="carousel" data-interval="3500">
  27.                 {#  @var CasrouselSlide[] slides #}
  28.                 {% set slides = slidesEditable.elements %}
  29.                 {% set totalSlides = slides|length %}
  30.                 {% set maxId = totalSlides - 1 %}
  31.                 <ol class="carousel-indicators">
  32.                     {% for i in 0..maxId %}
  33.                         <li data-target="#{{ id }}" data-slide-to="{{ i }}"
  34.                             class="{% if i == 0 %}active{% endif %}"></li>
  35.                     {% endfor %}
  36.                 </ol>
  38.                 <div class="carousel-inner">
  39.                     {% for i in 0..maxId %}
  40.                         <div class="carousel-item {% if i == 0 %}active{% endif %}">
  41.                             <div class="row">
  42.                                 <div class="col-sm-12">
  43.                                     <img src="{{ slides[i].image.getThumbnail('carouselImage', {
  44.                                         imgAttributes: {
  45.                                             class: 'd-block w-100'
  46.                                         }
  47.                                     }) }}" class="d-block w-100" alt="">
  48.                                 </div>
  49.                             </div>
  50.                             <div class="carousel-caption d-block p-2 text-left">
  51.                                 <h3>{{ slides[i].title }}</h3>
  52.                                 <p class="text-reset">{{ slides[i].content|raw }}</p>
  53.                                 <p class="text-right"><a href="{{ slides[i].page.href }}"
  54.                                                          title="Ga naar uitgelicht: {{ slides[i].title }}"
  55.                                                          class="btn btn-primary">Lees meer &gt;</a></p>
  56.                             </div>
  58.                         </div>
  59.                     {% endfor %}
  60.                 </div>
  61.             </div>
  63.         </div>
  64.     </div>
  65. </div>