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

Open in your IDE?
  1. {% if editmode %}
  3.     <div class="bg-gray-100 p-5 wysiwyg-heading">
  4.         {% include 'areaHeadAndFooter.html.twig' with { 'header': 'STWH: Teaser-Slider' } %}
  6.         {% include 'padding.html.twig' %}
  8.         <div class="my-3 flex flex-wrap overflow-hidden">
  9.             <div class="w-1/2 overflow-hidden pr-3">
  10.                 {% include 'color-selector.html.twig' with { 'name': 'color', 'description': 'Hintergrundfarbe der Box' } %}
  11.             </div>
  12.             <div class="w-1/4 overflow-hidden pl-3">
  13.                 Darstellung:
  14.             </div>
  15.             <div class="w-1/4 overflow-hidden">
  16.                 {{ pimcore_select("darstellung", {
  17.                     "store": [
  18.                         ["one", "Ein Teaser über volle Breite"],
  19.                         ["two", "Zwei Teaser nebeneinander"]
  22.                     ],
  23.                     "defaultValue" : "two"
  24.                 }) }}
  25.             </div>
  26.         </div>
  28.         {% set block = pimcore_block('gridblock', {'manual' : true, 'default' : 2}).start() %}
  29.         {% for b in block.iterator %}
  30.             {% do block.blockConstruct() %}
  31.             {% do block.blockStart() %}
  32.             {% set azz = '' %}
  33.             {% if pimcore_select("bullets").getData() != '' %}
  34.                 {% set azz = pimcore_select("bullets").getData() %}
  35.                 {% set azzColor = pimcore_select("bulletColor").getData() %}
  36.                 {% if azzColor is empty %}
  37.                     {% set azzColor = 'stwh-rot-2024' %}
  38.                 {% endif %}
  39.             {% endif %}
  40.             <div class="border border-gray-400 p-3">
  41.                 <p class="text-gray-400">Element: {{ (b+1) }}</p>
  43.                 <div class="my-3 flex flex-wrap overflow-hidden">
  44.                     <div class="w-1/2 overflow-hidden pr-3">
  46.                         <div class="my-3 flex flex-wrap overflow-hidden">
  47.                             <div class="w-full overflow-hidden">
  48.                                 <p>Teaser-Überschrift: {{ pimcore_textarea("headline_box", { 'height': 60}) }}</p>
  49.                             </div>
  50.                         </div>
  52.                         <div class="my-3 flex flex-wrap overflow-hidden">
  53.                             <div class="w-1/4 overflow-hidden">
  54.                                 SEO:
  55.                             </div>
  56.                             <div class="w-1/4 overflow-hidden">
  57.                                 {% include 'seo.html.twig' with { 'name': 'seo2', 'default' : 'h3' } %}
  58.                             </div>
  59.                             <div class="w-2/4 overflow-hidden">
  60.                                 {% include 'color-selector.html.twig' with { 'name': 'seoHeadlineColor', 'description': 'Farbe der Überschrift', 'type': 'accordeon' } %}
  61.                             </div>
  62.                         </div>
  63.                         <hr />
  65.                         <div class="my-3 flex flex-wrap overflow-hidden">
  66.                             <div class="w-full overflow-hidden {{ azz }} list-{{ azzColor }}">
  67.                                 Teasertext:
  68.                                 {{ pimcore_wysiwyg("teaser_box", { 'height': 100 }) }}
  69.                                 {% include 'bullet-points.html.twig' with { 'name': 'bullets', 'description': 'Aufzählungszeichen' } %}
  70.                                 {% include 'color-selector.html.twig' with { 'name': 'bulletColor', 'description': 'Farbe der Bullets', 'default': 'stwh-rot-2024' } %}
  71.                             </div>
  72.                         </div>
  73.                         <hr/>
  75.                         <div class="my-3 flex flex-wrap overflow-hidden">
  76.                             <div class="w-1/2 overflow-hidden">
  77.                                 Teaserlink:
  78.                             </div>
  79.                             <div class="w-1/2 overflow-hidden">
  80.                                 {{ pimcore_link("teaser_link") }}
  81.                             </div>
  82.                         </div>
  83.                         <hr/>
  85.                         <div class="my-3 flex flex-wrap overflow-hidden">
  86.                             <div class="w-3/4 overflow-hidden">
  87.                                 Soll die Überschrift unterstrichen werden?
  88.                             </div>
  89.                             <div class="w-1/4 overflow-hidden">
  90.                                 {{ pimcore_checkbox("hasDivider") }} JA
  91.                             </div>
  92.                             <div class="w-1/2 overflow-hidden">
  93.                                 {% include 'color-selector.html.twig' with { 'name': 'headline-divider-color', 'description': 'Farbe vom Unterstrich', 'default': 'stwh-rot-2024' } %}
  94.                             </div>
  95.                         </div>
  97.                     </div>
  98.                     <div class="w-1/2 overflow-hidden pl-3">
  99.                         Teaser-Bild:
  100.                         {{ pimcore_image("bild_box", {
  101.                             "height": 400
  102.                         }) }}
  103.                     </div>
  104.                 </div>
  105.             </div>
  106.             {% do block.blockEnd() %}
  107.             {% do block.blockDestruct() %}
  108.         {% endfor %}
  109.         {% do block.end() %}
  110.     </div>
  112.     {% include 'areaHeadAndFooter.html.twig' with { 'footer': true } %}
  114. {% else %}
  116.     {% set darstellung = pimcore_select("darstellung").getData() %}
  118.     <section
  119.         class="wysiwyg-heading {{ pimcore_select('paddingTop') }} {{ pimcore_select('paddingBottom') }} relative bg-{{ pimcore_select('color') }}">
  120.         <div class="container mx-auto px-5 overflow-hidden">
  122.             {# Ein Teaser-Slider über volle Breite #}
  123.             {% if darstellung == 'one' %}
  124.             <div class="teaserslider-full">
  125.                 <div class="swiper-wrapper">
  126.                     {% set block = pimcore_block('gridblock', {'manual' : true}).start() %}
  127.                     {% for b in block.iterator %}
  128.                     {% do block.blockConstruct() %}
  129.                     {% do block.blockStart() %}
  130.                     {% set seo2 = pimcore_select("seo2").getData() %}
  131.                     {% set azz = '' %}
  132.                     {% if pimcore_select("bullets").getData() != '' %}
  133.                         {% set azz = pimcore_select("bullets").getData() %}
  134.                         {% set azzColor = pimcore_select("bulletColor").getData() %}
  135.                         {% if azzColor is empty %}
  136.                             {% set azzColor = 'stwh-rot-2024' %}
  137.                         {% endif %}
  138.                     {% endif %}
  139.                     <div class="flex flex-wrap overflow-hidden swiper-slide {{ azz }} list-{{ azzColor }}">
  140.                         <div class="w-full lg:w-1/2 lg:pr-5">
  141.                             <img data-src="{{ pimcore_image("bild_box", {
  142.                                 format: 'webp'
  143.                             }).getThumbnail('teaser-bild') }}"
  144.                                  alt="{{ pimcore_image("bild_box").getAlt() }}"
  145.                                  title="{{ pimcore_image("bild_box").getAlt() }}"
  146.                                  class="swiper-lazy rounded-lg"/>
  147.                         </div>
  148.                         <div class="w-full lg:w-1/2 lg:pl-5 text-lg">
  149.                             {% set bordy = '' %}
  150.                             {% set borderColor = pimcore_select('headline-divider-color').getData() %}
  151.                             {% if pimcore_checkbox('hasDivider').isChecked() %}
  152.                                 {% set bordy = 'border-b-2 pb-2 border-' ~ borderColor %}
  153.                             {% endif %}
  154.                             <{{ seo2 }} class="text-{{ pimcore_select("seoHeadlineColor").getData() }} block py-5 font-bold lg:text-4xl md:text-3xl sm:text-xl {{ bordy }}
  155.                             ">{{ pimcore_textarea("headline_box")|nl2br }}</{{ seo2 }}>
  156.                         {{ pimcore_wysiwyg("teaser_box") }}
  157.                         {% if pimcore_link("teaser_link") != '' %}
  158.                             {% include 'widgets/morelink.html.twig' with {name: 'teaser_link' } %}
  159.                         {% endif %}
  160.                     </div>
  161.                 </div>
  162.                 {% do block.blockEnd() %}
  163.                 {% do block.blockDestruct() %}
  164.                 {% endfor %}
  165.                 {% do block.end() %}
  166.             </div>
  167.             <!-- If we need pagination -->
  168.             <div class="swiper-pagination"></div>
  170.             <!-- If we need navigation buttons -->
  171.             <div class="invisible lg:visible swiper-button-prev"></div>
  172.             <div class="invisible lg:visible swiper-button-next"></div>
  173.         </div>
  174.         {% endif %}
  176.         {# Zwei Teaser-Slider nebeneinander #}
  177.         {% if darstellung == 'two' %}
  178.             <div class="teaserslider">
  179.                 <div class="swiper-wrapper">
  180.                     {% set block = pimcore_block('gridblock', {'manual' : true}).start() %}
  181.                     {% for b in block.iterator %}
  182.                     {% do block.blockConstruct() %}
  183.                     {% do block.blockStart() %}
  184.                     {% set seo2 = pimcore_select("seo2").getData() %}
  185.                     {% set azz = '' %}
  186.                     {% if pimcore_select("bullets").getData() != '' %}
  187.                         {% set azz = pimcore_select("bullets").getData() %}
  188.                         {% set azzColor = pimcore_select("bulletColor").getData() %}
  189.                         {% if azzColor is empty %}
  190.                             {% set azzColor = 'stwh-rot-2024' %}
  191.                         {% endif %}
  192.                     {% endif %}
  193.                     <div class="swiper-slide {{ azz }} list-{{ azzColor }} text-lg">
  194.                         <div class="aspect-[3/2]">
  195.                             <img class="object-cover swiper-lazy rounded-lg"
  196.                                  data-src="{{ pimcore_image("bild_box", {
  197.                                      format: 'webp'
  198.                                  }).getThumbnail('teaser-bild') }}"
  199.                                  alt="{{ pimcore_image("bild_box").getAlt() }}"
  200.                                  title="{{ pimcore_image("bild_box").getAlt() }}"
  201.                             />
  202.                         </div>
  203.                         <{{ seo2 }} class="text-{{ pimcore_select("seoHeadlineColor").getData() }} block py-5 font-bold lg:text-5xl md:text-4xl
  204.                         sm:text-2xl">{{ pimcore_textarea("headline_box")|nl2br }}</{{ seo2 }}>
  205.                     {{ pimcore_wysiwyg("teaser_box") }}
  206.                     {% if pimcore_link("teaser_link") != '' %}
  207.                         {% include 'widgets/morelink.html.twig' with {name: 'teaser_link' } %}
  208.                     {% endif %}
  209.                 </div>
  210.                 {% do block.blockEnd() %}
  211.                 {% do block.blockDestruct() %}
  212.                 {% endfor %}
  213.                 {% do block.end() %}
  214.             </div>
  215.             <!-- If we need pagination -->
  216.             <div class="swiper-pagination"></div>
  218.             <!-- If we need navigation buttons -->
  219.             <div class="invisible lg:visible swiper-button-prev"></div>
  220.             <div class="invisible lg:visible swiper-button-next"></div>
  221.             </div>
  222.         {% endif %}
  224.         </div>
  225.     </section>
  227. {% endif %}