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

Open in your IDE?
  1. {% set azz = '' %}
  2. {% if pimcore_select("bullets").getData() != '' %}
  3.     {% set azz = pimcore_select("bullets").getData() %}
  4.     {% set azzColor = pimcore_select("bulletColor").getData() %}
  5.     {% if azzColor is empty %}
  6.         {% set azzColor = 'stwh-rot-2024' %}
  7.     {% endif %}
  8. {% endif %}
  10. {% if editmode %}
  12.     <div class="bg-gray-100 p-5 wysiwyg-heading">
  13.         {% include 'areaHeadAndFooter.html.twig' with { 'header': 'STWH: Text-Image-Banner' } %}
  15.         {% include 'padding.html.twig' %}
  17.         <div class="my-3 flex flex-wrap overflow-hidden">
  18.             <div class="w-1/2 overflow-hidden">
  19.                 {% include 'color-selector.html.twig' with { 'name': 'color', 'description': 'Bereichs-Hintergrundfarbe' } %}
  20.             </div>
  21.         </div>
  22.         <hr/>
  24.         <div class="my-3 flex flex-wrap overflow-hidden">
  25.             <div class="w-1/4 overflow-hidden">
  26.                 Überschrift:
  27.             </div>
  28.             <div class="w-3/4 overflow-hidden">
  29.                 {{ pimcore_textarea("headline", { 'height': 60}) }}
  30.             </div>
  31.         </div>
  32.         <hr/>
  34.         <div class="my-3 flex flex-wrap overflow-hidden">
  35.             <div class="w-1/4 overflow-hidden">
  36.                 SEO:
  37.             </div>
  38.             <div class="w-1/4 overflow-hidden">
  39.                 {% include 'seo.html.twig' with { 'name': 'seo', 'default' : 'h2' } %}
  40.             </div>
  41.             <div class="w-1/2 overflow-hidden">
  42.                 {% include 'color-selector.html.twig' with { 'name': 'seoHeadlineColor', 'description': 'Farbe der Überschrift', 'type': 'accordeon' } %}
  43.             </div>
  44.         </div>
  45.         <hr />
  47.         <div class="my-3 flex flex-wrap overflow-hidden">
  48.             <div class="w-1/4 overflow-hidden">
  49.                 Soll die Überschrift unterstrichen werden?
  50.             </div>
  51.             <div class="w-1/4 overflow-hidden">
  52.                 {{ pimcore_checkbox("hasDivider") }} JA
  53.             </div>
  54.             <div class="w-1/4 overflow-hidden">
  55.                 Text und Bild vertauschen?
  56.             </div>
  57.             <div class="w-1/4 overflow-hidden">
  58.                 {{ pimcore_checkbox("txt-pic-reverse") }} JA
  59.             </div>
  60.             <div class="w-1/2 overflow-hidden">
  61.                 {% include 'color-selector.html.twig' with { 'name': 'headline-divider-color', 'description': 'Farbe vom Unterstrich', 'default': 'stwh-rot-2024' } %}
  62.             </div>
  63.         </div>
  64.         <hr/>
  66.         <div class="my-3 flex flex-wrap overflow-hidden">
  67.             <div class="w-1/4 overflow-hidden">
  68.                 Text:
  69.             </div>
  70.             <div class="w-3/4 overflow-hidden {{ azz }}">
  71.                 {{ pimcore_wysiwyg("text") }}
  72.                 {% include 'bullet-points.html.twig' with { 'name': 'bullets', 'description': 'Aufzählungszeichen' } %}
  73.                 {% include 'color-selector.html.twig' with { 'name': 'bulletColor', 'description': 'Farbe der Bullets', 'default': 'stwh-rot-2024' } %}
  75.             </div>
  76.         </div>
  77.         <hr/>
  79.         <div class="my-3 flex flex-wrap overflow-hidden">
  80.             <div class="w-1/4 overflow-hidden">
  81.                 Bild:
  82.             </div>
  83.             <div class="w-3/4 overflow-hidden">
  84.                 {{ pimcore_image("image", { "width" : 300 }) }}
  85.             </div>
  86.         </div>
  87.         <hr/>
  89.         <div class="my-3 flex flex-wrap overflow-hidden">
  90.             <div class="w-1/4 overflow-hidden">
  91.                 Link für den Button (optional):
  92.             </div>
  93.             <div class="w-1/4 overflow-hidden">
  94.                 {{ pimcore_link("button-below-text") }}
  95.             </div>
  96.             <div class="w-2/4 overflow-hidden">
  97.                 {% include 'color-selector.html.twig' with { 'name': 'buttoncolor', 'description': 'Button-Farbe', 'type': 'button' } %}
  98.             </div>
  99.         </div>
  100.     </div>
  102.     {% include 'areaHeadAndFooter.html.twig' with { 'footer': true } %}
  104. {% else %}
  106.     <section
  107.         class="wysiwyg-heading {{ pimcore_select('paddingTop') }} {{ pimcore_select('paddingBottom') }} relative bg-{{ pimcore_select('color') }}">
  108.         <div class="container flex flex-wrap relative mx-auto px-5">
  109.             {% set marg = 'pr-5' %}
  111.             {% if not pimcore_checkbox("txt-pic-reverse").isChecked() %}
  112.                 {% set marg = 'pl-5' %}
  113.                 <div class="pb-5 md:pr-5 w-full md:w-5/12 overflow-hidden">
  114.                     <img class="object-cover rounded-lg lazy" data-src="{{ pimcore_image("image", {
  115.                         format: 'webp'
  116.                     }).getThumbnail('teaser-bild') }}"
  117.                          alt="{{ pimcore_image("image").getAlt() }}" title="{{ pimcore_image("image").getAlt() }}"/>
  118.                 </div>
  119.             {% endif %}
  121.             <div class="md:{{ marg }} w-full md:w-7/12 text-lg overflow-hidden {{ azz }} list-{{ azzColor }}">
  122.                 {% set seo = pimcore_select("seo").getData() %}
  123.                 {% set bordy = '' %}
  124.                 {% set borderColor = pimcore_select('headline-divider-color').getData() %}
  125.                 {% if pimcore_checkbox('hasDivider').isChecked() %}
  126.                     {% set bordy = 'border-b-2 pb-2 border-' ~ borderColor %}
  127.                 {% endif %}
  128.                 <{{ seo }} class="text-{{ pimcore_select("seoHeadlineColor").getData() }} block font-bold text-xl md:text-2xl lg:text-3xl {{ bordy }}
  129.                 ">{{ pimcore_textarea("headline")|nl2br }}</{{ seo }}>
  130.             <p class="mt-6">
  131.                 {{ pimcore_wysiwyg("text") }}
  132.             </p>
  133.             {% if pimcore_link("button-below-text") != '' %}
  134.                 {% include 'widgets/button.html.twig' with {name: 'button-below-text', backColor: pimcore_select('buttoncolor').getData() } %}
  135.             {% endif %}
  136.         </div>
  138.         {% if pimcore_checkbox("txt-pic-reverse").isChecked() %}
  139.             <div class="md:pl-5 md:w-5/12 w-full overflow-hidden">
  140.                 <img class="object-cover rounded-lg lazy" data-src="{{ pimcore_image("image").getThumbnail('teaser-bild') }}"
  141.                      alt="{{ pimcore_image("image").getAlt() }}" title="{{ pimcore_image("image").getAlt() }}"/>
  142.             </div>
  143.         {% endif %}
  144.         </div>
  145.     </section>
  147. {% endif %}