templates/areas/iconslider/view.html.twig line 1

Open in your IDE?
  1. {% if editmode %}
  3.     <div class="bg-gray-100 p-5">
  4.         {% include 'areaHeadAndFooter.html.twig' with { 'header': 'STWH: Icon-Slider' } %}
  6.         {% include 'padding.html.twig' %}
  8.         <div class="my-3 flex flex-wrap overflow-hidden">
  9.             <div class="w-1/2 overflow-hidden">
  10.                 {% include 'color-selector.html.twig' with { 'name': 'color', 'description': 'Hintergrundfarbe der Box' } %}
  11.             </div>
  12.         </div>
  14.         <div class="my-3 flex flex-wrap overflow-hidden">
  15.             <div class="w-1/4 overflow-hidden">
  16.                 Überschrift: (optional)
  17.             </div>
  18.             <div class="w-2/4 overflow-hidden">
  19.                 {{ pimcore_input("headline") }}
  20.             </div>
  21.         </div>
  23.         <div class="my-3 flex flex-wrap overflow-hidden">
  24.             <div class="w-1/4 overflow-hidden">
  25.                 SEO:
  26.             </div>
  27.             <div class="w-1/4 overflow-hidden">
  28.                 {% include 'seo.html.twig' with { 'name': 'seo', 'default' : 'h2' } %}
  29.             </div>
  30.             <div class="w-1/2 overflow-hidden">
  31.                 {% include 'color-selector.html.twig' with { 'name': 'seoHeadlineColor', 'description': 'Farbe der Überschrift', 'type': 'accordeon' } %}
  32.             </div>
  33.         </div>
  34.         <hr />
  36.         {% set block = pimcore_block('gridblock', {'manual' : true, 'default' : 4}).start() %}
  37.         {% for b in block.iterator %}
  38.             {% do block.blockConstruct() %}
  39.             {% do block.blockStart() %}
  40.             <div class="border border-gray-400 p-3">
  41.                 <p class="text-gray-400">Grafik: {{ (b+1) }}</p>
  42.                 <div class="w-1/4 overflow-hidden">
  43.                     {{ pimcore_image("sliderimage", {
  44.                         "height" : 100
  45.                     }) }}
  46.                 </div>
  47.             </div>
  48.             {% do block.blockEnd() %}
  49.             {% do block.blockDestruct() %}
  50.         {% endfor %}
  51.         {% do block.end() %}
  52.     </div>
  54.     {% include 'areaHeadAndFooter.html.twig' with { 'footer': true } %}
  56. {% else %}
  58.     <section
  59.         class="{{ pimcore_select('paddingTop') }} {{ pimcore_select('paddingBottom') }} relative bg-{{ pimcore_select('color') }}">
  60.         <div class="container mx-auto px-5">
  61.             {% if pimcore_input("headline") != '' %}
  62.             {% set seo = pimcore_select("seo").getData() %}
  63.             <{{ seo }} class="text-{{ pimcore_select("seoHeadlineColor").getData() }} block font-bold text-center text-3xl text-black mb-5">{{ pimcore_input("headline") }}</{{ seo }}>
  64.         {% endif %}
  66.         <div class="iconslider max-w-full">
  67.             <div class="swiper-wrapper">
  68.                 {% set block = pimcore_block('gridblock', {'manual' : true}).start() %}
  69.                 {% for b in block.iterator %}
  70.                     {% do block.blockConstruct() %}
  71.                     {% do block.blockStart() %}
  72.                     <div class="swiper-slide">
  73.                         <img alt="{{ pimcore_image("sliderimage").getAlt() }}"
  74.                              title="{{ pimcore_image("sliderimage").getAlt() }}"
  75.                              data-src="{{ pimcore_image("sliderimage",{
  76.                                  format: 'webp'
  77.                              }).getThumbnail('icon-slider') }}"
  78.                              src="{{ pimcore_image("sliderimage",{
  79.                                  format: 'webp'
  80.                              }).getThumbnail('icon-slider') }}"
  81.                              class="lazy"/>
  82.                         {% if  pimcore_image("sliderimage").getThumbnail('icon-slider') == '' %}
  83.                             <div class="swiper-lazy-preloader"></div>
  84.                         {% endif %}
  85.                     </div>
  86.                     {% do block.blockEnd() %}
  87.                     {% do block.blockDestruct() %}
  88.                 {% endfor %}
  89.                 {% do block.end() %}
  90.             </div>
  91.             <div class="swiper-pagination icons"></div>
  92.         </div>
  93.     </section>
  95. {% endif %}