templates/areas/teaser/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' } %}
  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.                         ["teaser2col", "Teaserboxen, halbe Content-Breite (ohne Limit)"],
  16.                         ["teaser3col", "Teaserboxen, 3-spaltig (max)"],
  17.                         ["teaserRoundBorders", "Teaser mit abgerundeten Ecken und Icon"]
  18.                     ],
  19.                     "defaultValue" : "teaser2col",
  20.                     "reload" : true,
  21.                     "width" : 400
  22.                 }) }}
  23.             </div>
  24.         </div>
  25.         <hr/>
  27.         <div class="my-3 flex flex-wrap overflow-hidden">
  28.             <div class="w-1/2 overflow-hidden">
  29.                 {% include 'color-selector.html.twig' with { 'name': 'color', 'description': 'Hintergrundfarbe der Box' } %}
  30.             </div>
  31.             <div class="w-1/2 overflow-hidden">
  32.                 {% include 'icon-selector.html.twig' with { name: 'iconselect', description: 'Icon auswählen' } %}
  33.             </div>
  34.         </div>
  35.         <hr/>
  37.         <div class="my-3 flex flex-wrap overflow-hidden">
  38.             <div class="w-1/4 overflow-hidden">
  39.                 Content-Überschrift: (optional)
  40.             </div>
  41.             <div class="w-2/4 overflow-hidden">
  42.                 {{ pimcore_input("headline") }}
  43.             </div>
  44.         </div>
  46.         <div class="my-3 flex flex-wrap overflow-hidden">
  47.             <div class="w-1/4 overflow-hidden">
  48.                 SEO:
  49.             </div>
  50.             <div class="w-1/4 overflow-hidden">
  51.                 {% include 'seo.html.twig' with { 'name': 'seo', 'default' : 'h2' } %}
  52.             </div>
  53.             <div class="w-1/2 overflow-hidden">
  54.                 {% include 'color-selector.html.twig' with { 'name': 'seoHeadlineColor', 'description': 'Farbe der Überschrift', 'type': 'accordeon' } %}
  55.             </div>
  56.         </div>
  57.         <hr />
  59.         <div class="my-3 flex flex-wrap overflow-hidden">
  60.             <div class="w-1/4 overflow-hidden">
  61.                 Content-Teaser (optional):
  62.             </div>
  63.             <div class="w-3/4 overflow-hidden">
  64.                 {{ pimcore_wysiwyg("boxteaser") }}
  65.             </div>
  66.         </div>
  67.         <hr/>
  69.         {% set auswahl = pimcore_select("darstellung").getData() %}
  71.         {% if auswahl != 'teaserRoundBorders' %}
  72.             <div class="my-3 flex flex-wrap overflow-hidden">
  73.                 <div class="w-1/4 overflow-hidden">
  74.                     Soll die Content-Überschrift unterstrichen werden?
  75.                 </div>
  76.                 <div class="w-1/4 overflow-hidden">
  77.                     {{ pimcore_checkbox("hasDivider") }} JA
  78.                 </div>
  79.                 <div class="w-1/4 overflow-hidden">
  80.                     Überschrift zentrieren?
  81.                 </div>
  82.                 <div class="w-1/4 overflow-hidden">
  83.                     {{ pimcore_checkbox("head-center") }} JA
  84.                 </div>
  85.                 <div class="w-1/2 overflow-hidden">
  86.                     {% include 'color-selector.html.twig' with { 'name': 'headline-divider-color', 'description': 'Farbe vom Unterstrich', 'default': 'stwh-rot-2024' } %}
  87.                 </div>
  88.             </div>
  89.             <hr/>
  90.         {% endif %}
  92.         {# Teaser mit abgerundeten Ecken und Icon #}
  93.         {% if auswahl == 'teaserRoundBorders' %}
  94.             {% set block = pimcore_block('gridblock', {'manual' : true, 'limit' : 3, 'default' : 1}).start() %}
  95.             {% for b in block.iterator %}
  96.                 {% do block.blockConstruct() %}
  97.                 {% do block.blockStart() %}
  98.                 <div class="border border-gray-400 p-3">
  99.                     <p class="text-gray-400">Element: {{ (b+1) }}</p>
  100.                     {{ pimcore_link('teaser_link') }}
  101.                 </div>
  102.                 {% do block.blockEnd() %}
  103.                 {% do block.blockDestruct() %}
  104.             {% endfor %}
  105.             {% do block.end() %}
  106.         {% endif %}
  109.         {# Teaserboxen, halbe Content-Breite (ohne Limit) #}
  110.         {% if auswahl == 'teaser2col' %}
  112.             {% set block = pimcore_block('gridblock', {'manual' : true}).start() %}
  113.             {% for b in block.iterator %}
  114.                 {% do block.blockConstruct() %}
  115.                 {% do block.blockStart() %}
  116.                 <div class="border border-gray-400 p-3">
  117.                     <p class="text-gray-400">Element: {{ (b+1) }}</p>
  119.                     <div class="my-3 flex flex-wrap overflow-hidden">
  120.                         <div class="w-1/2 overflow-hidden pr-5">
  121.                             <div class="flex flex-wrap overflow-hidden">
  122.                                 <div class="w-4/6 overflow-hidden">
  123.                                     <p>Teaser-Headline: {{ pimcore_input("headline_box", { 'height': 100}) }}</p>
  124.                                 </div>
  125.                                 <div class="w-1/2 overflow-hidden">
  126.                                     {% include 'color-selector.html.twig' with { 'name': 'headline-box-divider-color', 'description': 'Farbe vom Unterstrich', 'default': 'stwh-rot-2024' } %}
  127.                                 </div>
  128.                             </div>
  129.                             <div class="my-3 flex flex-wrap overflow-hidden">
  130.                                 <div class="w-1/4 overflow-hidden">
  131.                                     SEO:
  132.                                 </div>
  133.                                 <div class="w-1/4 overflow-hidden">
  134.                                     {% include 'seo.html.twig' with { 'name': 'seo2', 'default' : 'h3' } %}
  135.                                 </div>
  136.                                 <div class="w-1/2 overflow-hidden">
  137.                                     {% include 'color-selector.html.twig' with { 'name': 'seoHeadlineColor2', 'description': 'Farbe der Überschrift', 'type': 'accordeon' } %}
  138.                                 </div>
  139.                             </div>
  140.                             <hr />
  142.                             <div class="flex flex-wrap overflow-hidden">
  143.                                 <div class="w-full overflow-hidden">
  144.                                     Teasertext:<br/>
  145.                                     {{ pimcore_textarea("teaser_box", { 'height': 100 }) }}
  146.                                 </div>
  147.                             </div>
  148.                             <hr/>
  150.                             <div class="flex flex-wrap overflow-hidden">
  151.                                 <div class="w-full overflow-hidden">
  152.                                     Teaserlink:<br/>
  153.                                     {{ pimcore_link("teaser_link") }}<br/>
  154.                                     <small>Hinweis: Link wird nur angezeigt, wenn ein Text und ein Pfad angegeben
  155.                                         wurden.</small>
  156.                                 </div>
  157.                             </div>
  158.                             <hr/>
  159.                         </div>
  161.                         <div class="w-1/2 overflow-hidden pl-5">
  162.                             Teaser-Bild:
  163.                             {{ pimcore_image("bild_box", {
  164.                                 "height": 200
  165.                             }) }}
  166.                         </div>
  167.                     </div>
  168.                 </div>
  169.                 {% do block.blockEnd() %}
  170.                 {% do block.blockDestruct() %}
  171.             {% endfor %}
  172.             {% do block.end() %}
  173.         {% endif %}
  175.         {# Teaserboxen, 3-spaltig (max) #}
  176.         {% if auswahl == 'teaser3col' %}
  178.             {% set block = pimcore_block('gridblock', {'manual' : true, 'limit' : 3, 'default' : 3}).start() %}
  179.             {% for b in block.iterator %}
  180.                 {% do block.blockConstruct() %}
  181.                 {% do block.blockStart() %}
  182.                 {% set azz = '' %}
  183.                 {% if pimcore_select("bullets").getData() != '' %}
  184.                     {% set azz = pimcore_select("bullets").getData() %}
  185.                     {% set azzColor = pimcore_select("bulletColor").getData() %}
  186.                     {% if azzColor is empty %}
  187.                         {% set azzColor = 'stwh-rot-2024' %}
  188.                     {% endif %}
  189.                 {% endif %}
  190.                 <div class="border border-gray-400 p-3">
  191.                     <p class="text-gray-400">Element: {{ (b+1) }}</p>
  193.                     <div class="my-3 flex flex-wrap overflow-hidden">
  194.                         <div class="w-1/2 overflow-hidden pr-3">
  195.                             Teaser-Bild:
  196.                             {{ pimcore_image("bild_box", {
  197.                                 "height": 200
  198.                             }) }}
  199.                         </div>
  200.                         <div class="w-1/2 overflow-hidden pl-3">
  201.                             <div class="flex flex-wrap overflow-hidden">
  202.                                 <div class="w-4/6 overflow-hidden">
  203.                                     <p>Teaser-Headline: {{ pimcore_input("headline_box", { 'height': 80}) }}</p>
  204.                                 </div>
  205.                             </div>
  207.                             <div class="my-3 flex flex-wrap overflow-hidden">
  208.                                 <div class="w-1/4 overflow-hidden">
  209.                                     SEO:
  210.                                 </div>
  211.                                 <div class="w-1/4 overflow-hidden">
  212.                                     {% include 'seo.html.twig' with { 'name': 'seo2', 'default' : 'h3' } %}
  213.                                 </div>
  214.                                 <div class="w-1/2 overflow-hidden">
  215.                                     {% include 'color-selector.html.twig' with { 'name': 'seoHeadlineColor2', 'description': 'Farbe der Überschrift', 'type': 'accordeon' } %}
  216.                                 </div>
  217.                             </div>
  218.                             <hr />
  220.                             <div class="w-full overflow-hidden {{ azz }} list-{{ azzColor }}">
  221.                                 Teasertext:
  222.                                 {{ pimcore_wysiwyg("teaser_box", { 'height': 100 }) }}
  223.                                 {% include 'bullet-points.html.twig' with { 'name': 'bullets', 'description': 'Aufzählungszeichen' } %}
  224.                                 {% include 'color-selector.html.twig' with { 'name': 'bulletColor', 'description': 'Farbe der Bullets', 'default': 'stwh-rot-2024' } %}
  225.                                 Teaserlink:
  226.                                 {{ pimcore_link("teaser_link") }}
  227.                             </div>
  228.                         </div>
  230.                     </div>
  231.                 </div>
  232.                 {% do block.blockEnd() %}
  233.                 {% do block.blockDestruct() %}
  234.             {% endfor %}
  235.             {% do block.end() %}
  236.         {% endif %}
  238.     </div>
  240.     {% include 'areaHeadAndFooter.html.twig' with { 'footer': true } %}
  242. {% else %}
  244.     <section
  245.         class="wysiwyg-heading {{ pimcore_select('paddingTop') }} {{ pimcore_select('paddingBottom') }} bg-{{ pimcore_select('color') }}">
  246.         <div class="container mx-auto px-5">
  248.             {% set auswahl = pimcore_select("darstellung").getData() %}
  250.             {# Teaser mit abgerundeten Ecken und Icon #}
  251.             {% if auswahl == 'teaserRoundBorders' %}
  253.             <div class="w-full flex flex-wrap">
  254.                 <div
  255.                     class="bg-white hidden lg:flex w-1/5 text-[200px] items-center border border-red-600 text-red-600 justify-center rounded-tl-large">
  256.                     {% include 'icon-selector.html.twig' with { name: 'iconselect', description: 'Icon auswählen' } %}
  257.                 </div>
  258.                 <div
  259.                     class="bg-red-600 flex flex-wrap w-full lg:w-4/5 p-5 items-center border border-red-600 text-white rounded-tl-3xl rounded-br-3xl lg:rounded-tl-none lg:rounded-br-large">
  260.                     {% if pimcore_input("headline") != '' %}
  261.                     {% set seo = pimcore_select("seo").getData() %}
  262.                     <{{ seo }} class="block font-bold text-center text-2xl md:text-3xl lg:text-4xl text-white
  263.                     mb-5">{{ pimcore_input("headline") }}</{{ seo }}>
  264.                 {% endif %}
  266.                 {{ pimcore_wysiwyg("boxteaser") }}
  268.                 {% if auswahl == 'teaserRoundBorders' %}
  269.                     {% set block = pimcore_block('gridblock', {'manual' : true, 'limit' : 3, 'default' : 1}).start() %}
  270.                     {% for b in block.iterator %}
  271.                         {% do block.blockConstruct() %}
  272.                         {% do block.blockStart() %}
  273.                         <div class="w-full md:w-1/3 teaser">
  274.                             {% include 'widgets/morelink.html.twig' with { name: 'teaser_link', othercolor: 'white' } %}
  275.                         </div>
  276.                         {% do block.blockEnd() %}
  277.                         {% do block.blockDestruct() %}
  278.                     {% endfor %}
  279.                     {% do block.end() %}
  280.                 {% endif %}
  282.             </div>
  283.         </div>
  284.         {% endif %}
  286.         {# Teaserboxen, halbe Content-Breite (ohne Limit) #}
  287.         {% if auswahl == 'teaser2col' %}
  289.             {% if pimcore_input("headline") != '' %}
  290.                 {% set bordy = '' %}
  291.                 {% set borderColor = pimcore_select('headline-divider-color').getData() %}
  292.                 {% if pimcore_checkbox('hasDivider').isChecked() %}
  293.                     {% set bordy = 'border-b-2 pb-2 border-' ~ borderColor %}
  294.                 {% endif %}
  296.                 {% set center = '' %}
  297.                 {% if pimcore_checkbox('head-center').isChecked() %}
  298.                     {% set center = 'lg:mx-auto' %}
  299.                 {% endif %}
  300.                 <div class="flex flex-wrap overflow-hidden">
  301.                     <div class="{{ center }} overflow-hidden">
  302.                         {% set seo = pimcore_select("seo").getData() %}
  303.                         <{{ seo }} class="text-{{ pimcore_select("seoHeadlineColor").getData() }} block font-bold mb-5 text-2xl md:text-4xl lg:text-5xl {{ bordy }}">
  304.                         {{ pimcore_input("headline") }}
  305.                     </{{ seo }}>
  306.                 </div>
  307.                 </div>
  308.                 {% if pimcore_wysiwyg("boxteaser") != '' %}
  309.                     <div class="flex flex-wrap overflow-hidden">
  310.                         <div class="{{ center }} mb-5">
  311.                             <div class="text-lg">
  312.                                 {{ pimcore_wysiwyg("boxteaser") }}
  313.                             </div>
  314.                         </div>
  315.                     </div>
  316.                 {% endif %}
  317.             {% endif %}
  319.             <div class="lg:grid lg:grid-cols-2 grid-cols-1 lg:gap-8">
  320.                 {% set block = pimcore_block('gridblock', {'manual' : true}).start() %}
  321.                 {% for b in block.iterator %}
  322.                     {% do block.blockConstruct() %}
  323.                     {% do block.blockStart() %}
  324.                     {% set seo2 = pimcore_select("seo2").getData() %}
  326.                     {% set borderColorBox = pimcore_select('headline-box-divider-color').getData() %}
  327.                      {% if borderColorBox is empty %}
  328.                        {% set borderColorBox = 'stwh-rot-2024' %}
  329.                     {% endif %}
  331.                     {% if pimcore_link("teaser_link").getHref() != '' %}
  332.                         <a target="{{ pimcore_link("teaser_link").getTarget() }}" href="{{ pimcore_link("teaser_link").getHref() }}">
  333.                     {% endif %}
  334.                     <div class="group relative overflow-hidden mt-1 mb-5 lg:mb-0 aspect-[16/9] rounded-lg">
  335.                         <div
  336.                             class="lazy absolute group-hover:scale-110 w-full h-full top-0 left-0 transition-all duration-300 ease-in-out bg-cover"
  337.                             data-bg="{{ pimcore_image("bild_box").getThumbnail('teaser-bild') }}"></div>
  338.                         <div class="relative h-full flex flex-wrap content-end">
  339.                             <div class="bg-gradient-to-t from-black p-4 md:p-10 text-base md:text-xl w-full content-end text-white">
  340.                                 <{{ seo2 }} class="block font-bold text-xl md:text-4xl
  341.                                 lg:text-5xl">{{ pimcore_input("headline_box") }}</{{ seo2 }}>
  342.                             <span class="flex w-1/4 md:pb-3 pb-1 md:mt-3 border-t-4 border-{{ borderColorBox }}"></span>
  343.                             {{ pimcore_textarea("teaser_box", {
  344.                                 "nl2br": true
  345.                             }) }}
  346.                             {% if pimcore_link("teaser_link").getHref() != '' and pimcore_link("teaser_link").getText() != '' %}
  347.                                 {% include 'widgets/morelink.html.twig' with {name: 'teaser_link', act: 'nolink', othercolor: 'white' } %}
  348.                             {% endif %}
  349.                             </div>
  350.                         </div>
  351.                     </div>
  353.                     {% if pimcore_link("teaser_link").getHref() != '' %}
  354.                         </a>
  355.                     {% endif %}
  357.                     {% do block.blockEnd() %}
  358.                     {% do block.blockDestruct() %}
  359.                 {% endfor %}
  360.                 {% do block.end() %}
  361.             </div>
  362.         {% endif %}
  364.         {# Teaserboxen, 3-spaltig (max) #}
  365.         {% if auswahl == 'teaser3col' %}
  366.             {% if pimcore_input("headline") != '' %}
  367.                 {% set bordy = '' %}
  368.                 {% set borderColor = pimcore_select('headline-divider-color').getData() %}
  369.                 {% if pimcore_checkbox('hasDivider').isChecked() %}
  370.                     {% set bordy = 'border-b-2 pb-2 border-' ~ borderColor %}
  371.                 {% endif %}
  373.                 {% set center = '' %}
  374.                 {% if pimcore_checkbox('head-center').isChecked() %}
  375.                     {% set center = 'lg:mx-auto' %}
  376.                 {% endif %}
  377.                 <div class="flex flex-wrap overflow-hidden">
  378.                     <div class="{{ center }} overflow-hidden">
  379.                         {% set seo = pimcore_select("seo").getData() %}
  380.                         <{{ seo }} class="text-{{ pimcore_select("seoHeadlineColor").getData() }} block mb-5 text-2xl md:text-4xl lg:text-5xl font-bold {{ bordy }}">
  381.                         {{ pimcore_input("headline") }}
  382.                     </{{ seo }}>
  383.                 </div>
  384.                 </div>
  385.                 {% if pimcore_wysiwyg("boxteaser") != '' %}
  386.                     <div class="flex flex-wrap overflow-hidden">
  387.                         <div class="{{ center }} mb-5">
  388.                             <div class="text-lg">
  389.                                 {{ pimcore_wysiwyg("boxteaser") }}
  390.                             </div>
  391.                         </div>
  392.                     </div>
  393.                 {% endif %}
  394.             {% endif %}
  396.             <div class="lg:grid lg:grid-cols-3 grid-cols-1 gap-6">
  397.             {% set block = pimcore_block('gridblock', {'manual' : true}).start() %}
  398.             {% for b in block.iterator %}
  399.                 {% do block.blockConstruct() %}
  400.                 {% do block.blockStart() %}
  401.                 {% set seo2 = pimcore_select("seo2").getData() %}
  402.                 {% set azz = '' %}
  403.                 {% if pimcore_select("bullets").getData() != '' %}
  404.                     {% set azz = pimcore_select("bullets").getData() %}
  405.                     {% set azzColor = pimcore_select("bulletColor").getData() %}
  406.                     {% if azzColor is empty %}
  407.                         {% set azzColor = 'stwh-rot-2024' %}
  408.                     {% endif %}
  409.                 {% endif %}
  410.             <div class="overflow-hidden flex flex-col mb-10 md:mb-0 {{ azz }} list-{{ azzColor }}">
  411.                 <img loading="lazy" class="object-cover rounded-lg pb-5"
  412.                      src="{{ pimcore_image("bild_box", {
  413.                          format: 'webp'
  414.                      }).getThumbnail('teaser-bild') }}"
  415.                      alt="{{ pimcore_image("bild_box").getAlt() }}" title="{{ pimcore_image("bild_box").getAlt() }}"/>
  416.                 <{{ seo2 }} class="text-{{ pimcore_select("seoHeadlineColor2").getData() }} block pb-5 font-bold text-xl md:text-2xl
  417.                 lg:text-3xl">{{ pimcore_input("headline_box") }}</{{ seo2 }}>
  418.                 <span class="text flex-grow">
  419.                                             {{ pimcore_wysiwyg("teaser_box") }}
  420.                                         </span>
  421.                 {% if pimcore_link("teaser_link") != '' %}
  422.                     {% set othercolor = '!text-' ~ pimcore_select("seoHeadlineColor2").getData() %}
  423.                     <span class="mehr">
  424.                         {% include 'widgets/morelink.html.twig' with {name: 'teaser_link', othercolor: othercolor } %}
  425.                     </span>
  426.                 {% endif %}
  427.                 </div>
  428.                 <hr class="border-t md:hidden mb-5"/>
  429.                 {% do block.blockEnd() %}
  430.                 {% do block.blockDestruct() %}
  431.             {% endfor %}
  432.             {% do block.end() %}
  433.             </div>
  434.         {% endif %}
  436.         </div>
  437.     </section>
  439. {% endif %}