templates/areas/heroslider/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: Hero-Slider' } %}
  6.         {% include 'padding.html.twig' %}
  8.         <div class="my-3 flex flex-wrap overflow-hidden">
  9.             <div class="w-1/4 overflow-hidden">
  10.                 Darstellung:
  11.             </div>
  12.             <div class="w-3/4 overflow-hidden">
  13.                 {{ pimcore_select("darstellung", {
  14.                     "store": [
  15.                         ["slider", "für die Startseite"],
  16.                         ["header", "für Unterseiten (mit Breadcrumb und nicht ganz so hoch)"]
  17.                     ],
  18.                     "defaultValue" : "slider",
  19.                     "reload" : true,
  20.                     "width" : 300
  21.                 }) }}
  22.             </div>
  23.         </div>
  24.         <hr/>
  26.         <div class="my-3 flex flex-wrap overflow-hidden">
  27.             <div class="w-1/4 overflow-hidden">
  28.                 Anzeigedauer in ms:
  29.             </div>
  30.             <div class="w-1/4 overflow-hidden">
  31.                 {{ pimcore_input("sliderdelay", {
  32.                     "placeholder" : "2000"
  33.                 }) }}
  34.             </div>
  35.             <div class="w-2/4 pl-2 text-gray-500">
  36.                 default: 2000 (Millisekunden)
  37.             </div>
  38.         </div>
  39.         <hr/>
  41.         <div class="my-3 flex flex-wrap overflow-hidden">
  42.             <div class="w-1/4 overflow-hidden">
  43.                 Soll ein Overlay angezeigt werden?
  44.             </div>
  45.             <div class="w-3/4 overflow-hidden">
  46.                 {{ pimcore_checkbox("overlay") }} JA (Hinweis: Das Overlay hat 50% transparenten weißen Hintergrund)
  47.             </div>
  48.         </div>
  49.         <hr/>
  51.         <div class="my-3 flex flex-wrap overflow-hidden">
  52.             <div class="w-1/4 overflow-hidden">
  53.                 Overlay-Breite:
  54.             </div>
  55.             <div class="w-3/4 overflow-hidden">
  56.                 {{ pimcore_select("overlaywidth", {
  57.                     "store": [
  58.                         ["w-full", "volle Bannerbreite"],
  59.                         ["w-1/2", "1/2 der Bannerbreite"],
  60.                         ["w-3/4", "3/4 der Bannerbreite"]
  61.                     ],
  62.                     "defaultValue" : "w-1/2",
  63.                     "width" : 300
  64.                 }) }}
  65.             </div>
  66.         </div>
  68.         {% set auswahl = pimcore_select("darstellung").getData() %}
  70.         {% if auswahl == 'header' %}
  71.             <div class="my-3 flex flex-wrap overflow-hidden">
  72.                 <div class="w-1/4 overflow-hidden">
  73.                     Breadcrumb ausschalten?
  74.                 </div>
  75.                 <div class="w-3/4 overflow-hidden">
  76.                     {{ pimcore_checkbox("brotkrume") }} JA
  77.                 </div>
  78.             </div>
  79.             <hr/>
  80.         {% endif %}
  82.         {% set block = pimcore_block('gridblock', {'manual' : true, 'default' : 2}).start() %}
  83.         {% for b in block.iterator %}
  84.             {% do block.blockConstruct() %}
  85.             {% do block.blockStart() %}
  86.             <div class="border border-gray-400 p-3">
  87.                 <p class="text-gray-400">Element: {{ (b+1) }}</p>
  88.                 <div class="my-3 flex flex-wrap overflow-hidden">
  89.                     <div class="w-5/12 overflow-hidden pr-3">
  90.                         Bannergrafik: {{ pimcore_image("sliderimage", { "height" : 300 }) }}
  91.                     </div>
  93.                     <div class="w-7/12 overflow-hidden pl-3">
  94.                         <div class="flex flex-wrap overflow-hidden">
  95.                             <div class="w-full overflow-hidden">
  96.                                 <p>Banner-Headline: {{ pimcore_textarea("sliderheadline", { "height" : 100 }) }}</p>
  97.                             </div>
  98.                         </div>
  100.                         <div class="my-3 flex flex-wrap overflow-hidden">
  101.                             <div class="w-1/4 overflow-hidden">
  102.                                 SEO:
  103.                             </div>
  104.                             <div class="w-1/4 overflow-hidden">
  105.                                 {% include 'seo.html.twig' with { 'name': 'seo', 'default' : 'h2' } %}
  106.                             </div>
  107.                             <div class="w-1/2 overflow-hidden">
  108.                                 {% include 'color-selector.html.twig' with { 'name': 'seoHeadlineColor', 'description': 'Farbe der Überschrift', 'type': 'accordeon' } %}
  109.                             </div>
  110.                         </div>
  111.                         <hr />
  113.                         <div class="flex flex-wrap overflow-hidden">
  114.                             <div class="w-full overflow-hidden">
  115.                                 <p>Banner-Teaser: {{ pimcore_textarea("sliderteaser", { "height" : 100 }) }}</p>
  116.                             </div>
  117.                         </div>
  118.                         <br/>
  120.                         {% include 'color-selector.html.twig' with { 'name': 'textcolor', 'description': 'Schriftfarbe Teaser' } %}
  121.                         <br/>
  123.                         <div class="flex flex-wrap overflow-hidden">
  124.                             <div class="w-1/2 overflow-hidden">
  125.                                 Banner-Button Mehrlink:
  126.                             </div>
  127.                             <div class="w-1/2 overflow-hidden">
  128.                                 {{ pimcore_link("sliderlink") }}
  129.                             </div>
  130.                         </div>
  131.                         <br/>
  133.                         {% include 'color-selector.html.twig' with { 'name': 'buttoncolor', 'description': 'Button-Farbe', 'type': 'button' } %}
  134.                     </div>
  135.                 </div>
  136.             </div>
  137.             {% do block.blockEnd() %}
  138.             {% do block.blockDestruct() %}
  139.         {% endfor %}
  140.         {% do block.end() %}
  141.     </div>
  143.     {% include 'areaHeadAndFooter.html.twig' with { 'footer': true } %}
  145. {% else %}
  147.     {% set auswahl = pimcore_select("darstellung").getData() %}
  148.     {% set overlaywidth = pimcore_select("overlaywidth").getData() %}
  149.     {% set bgoverlay = '' %}
  150.     {% if pimcore_checkbox('overlay').isChecked() %}
  151.         {% set bgoverlay = 'bg-white bg-opacity-50 p-4 lg:p-10' %}
  152.     {% endif %}
  154.     <section class="md:{{ pimcore_select('paddingTop') }} {{ pimcore_select('paddingBottom') }} relative bg-white">
  155.         {% set isSlider = pimcore_block('gridblock').getCount() > 1 %}
  156.         <div x-data x-init="initHeroSlider($el)" class="relative overflow-hidden">
  157.             {% if isSlider %}
  158.             <div class="swiper-wrapper aspect-square aspect-video xl:aspect-auto xl:min-h-[700px] md:max-h-[700px]">
  159.                 {% endif %}
  160.                 {% set sliderdelay = 2000 %}
  161.                 {% if not pimcore_input("sliderdelay").isEmpty() %}
  162.                     {% set sliderdelay = pimcore_input("sliderdelay").getData() %}
  163.                 {% endif %}
  165.                 {% set block = pimcore_block('gridblock', {'manual' : true}).start() %}
  166.                 {% for b in block.iterator %}
  167.                 {% do block.blockConstruct() %}
  168.                 {% do block.blockStart() %}
  169.                 {% set seo = pimcore_select("seo").getData() %}
  170.                 {% set slideIndex = block.getCurrent() %}
  172.                 {% set bannerThumb = pimcore_image("sliderimage", {
  173.                     format: 'webp'
  174.                 }).getThumbnail('hero-slide-image') %}
  175.                 {# für Unterseiten #}
  176.                 {% if auswahl == 'header' %}
  177.                     {% set bannerThumb = pimcore_image("sliderimage").getThumbnail('hero-image') %}
  178.                 {% endif %}
  180.                 <div
  181.                     {{ (slideIndex > 0) ? 'x-cloak' }}
  182.                     class="{{ (isSlider) ? 'swiper-lazy swiper-slide' : 'lazy' }} aspect-square aspect-video xl:aspect-auto xl:min-h-[700px] md:max-h-[700px] flex justify-center lg:items-center w-full h-full bg-center bg-cover"
  183.                     data-background="{{ bannerThumb }}"
  184.                     data-bg="{{ bannerThumb }}"
  185.                     data-swiper-autoplay="{{ sliderdelay }}">
  186.                     {% if  bannerThumb != '' %}
  187.                         <div class="lazy-preloader"></div>
  188.                     {% endif %}
  190.                     <div class="container h-fit lg:h-auto flex lg:items-center mx-auto p-5">
  191.                         {% if pimcore_textarea("sliderheadline").getData() != '' %}
  192.                         <div class="w-full md:{{ overlaywidth }} {{ bgoverlay }} rounded-lg">
  193.                             <{{ seo }} class="text-{{ pimcore_select("seoHeadlineColor").getData() }}  block relative drop-shadow-md
  194.                             font-bold lg:leading-8xl text-3xl md:text-4xl lg:text-8xl w-full flex
  195.                             items-center">
  196.                             {{ pimcore_textarea("sliderheadline")|nl2br }}
  197.                         </{{ seo }}>
  198.                         {% if pimcore_textarea("sliderteaser").getData() != '' %}
  199.                             <span
  200.                                 class="relative text-{{ pimcore_select('textcolor') }} my-1 md:mt-5 drop-shadow-md font-bold lg:leading-8xl text-md sm:text-2xl md:text-3xl lg:text-6xl w-full flex items-center">
  201.                                                         {{ pimcore_textarea("sliderteaser")|nl2br }}
  202.                                                     </span>
  203.                         {% endif %}
  205.                         {% if pimcore_link("sliderlink") != '' %}
  206.                             {% include 'widgets/button.html.twig' with { name: 'sliderlink', backColor: pimcore_select('buttoncolor').getData() } %}
  207.                         {% endif %}
  208.                     </div>
  209.                     {% endif %}
  211.                     {% if not pimcore_checkbox('brotkrume').isChecked() %}
  212.                         <div class="absolute pb-2 w-full left-0 pt-2 bottom-0 text-white shadow-xl" class="{{ document != '/' ? 'bg-black bg-opacity-40' : '' }}">
  213.                             {% if not document is defined or not document %}
  214.                                 {% set document = pimcore_document(1) %}
  215.                             {% endif %}
  216.                             {% set mainNavStartNode = document.getProperty('mainNavStartNode') %}
  217.                             {% set mainNavigation = pimcore_build_nav({
  218.                                 active: document,
  219.                                 root: mainNavStartNode
  220.                             }) %}
  221.                             <div class="pl-16 my-breadcrumbs">
  222.                                 {% if document != '/' %}
  223.                                   <a href="/" class="main active-trail">HOME</a>
  224.                                     &gt; {{ pimcore_render_nav(mainNavigation, 'breadcrumbs') }}
  225.                                 {% endif %}
  226.                             </div>
  227.                         </div>
  228.                     {% endif %}
  230.                 </div>
  231.             </div>
  232.             {% do block.blockEnd() %}
  233.             {% do block.blockDestruct() %}
  234.             {% endfor %}
  235.             {% do block.end() %}
  236.             {% if pimcore_block('gridblock').getCount() > 1 %}
  237.         </div>
  238.         {% endif %}
  239.         {% if pimcore_block('gridblock').getCount() > 1 %}
  240.             <div
  241.                 class="swiper-pagination container left-1/2 -translate-x-1/2 mx-auto pb-4 sm:pb-8 lg:pb-10 pr-4 lg:pr-0"></div>
  242.         {% endif %}
  243.         </div>
  244.     </section>
  246. {% endif %}