templates/areas/iconflipbox/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 Flipbox' } %}
  6.     {% include 'padding.html.twig' %}
  8.     {% include 'headline-editmode.html.twig' with {'name': 'headline' } %}
  11.     <div class="bg-white flex flex-wrap overflow-hidden xl:-mx-3">
  12.         <div class="w-1/3 my-3 px-3">
  13.             1. Box, Bild vorne:
  14.             {{ pimcore_image('first-image', {'width': '250'}) }}
  15.         </div>
  16.         <div class="w-1/3 my-3 px-3">
  17.             1. Box, Titel vorne:
  18.             {{ pimcore_input('first-front-text') }}
  19.         </div>
  20.         <div class="w-1/3 my-3 px-3">
  21.             1. Box, Text hinten:
  22.             {{ pimcore_textarea('first-back-text') }}
  23.         </div>
  24.     </div>
  25.     <hr />
  26.     <div class="bg-white flex flex-wrap overflow-hidden xl:-mx-3">
  27.         <div class="w-1/2 my-3 px-3">
  28.             {% include 'color-selector.html.twig' with { 'name': 'textColor1', 'description': 'Schrift-Farbe', 'type': 'accordeon' } %}
  29.         </div>
  30.         <div class="w-1/2 my-3 px-3">
  31.             {% include 'color-selector.html.twig' with { 'name': 'backColor1', 'description': 'Hintergrundfarbe', 'type': 'accordeon' } %}
  32.         </div>
  33.     </div>
  34.     <hr>
  36.     <div class="flex flex-wrap overflow-hidden xl:-mx-3">
  37.         <div class="w-1/3 my-3 px-3">
  38.             2. Box, Bild vorne:
  39.             {{ pimcore_image('second-image', {'width': '250'}) }}
  40.         </div>
  41.         <div class="w-1/3 my-3 px-3">
  42.             2. Box, Titel vorne:
  43.             {{ pimcore_input('second-front-text') }}
  44.         </div>
  45.         <div class="w-1/3 my-3 px-3">
  46.             2. Box, Text hinten:
  47.             {{ pimcore_textarea('second-back-text') }}
  48.         </div>
  49.     </div>
  50.     <hr>
  51.     <hr />
  52.     <div class="flex flex-wrap overflow-hidden xl:-mx-3">
  53.         <div class="w-1/2 my-3 px-3">
  54.             {% include 'color-selector.html.twig' with { 'name': 'textColor2', 'description': 'Schrift-Farbe', 'type': 'accordeon' } %}
  55.         </div>
  56.         <div class="w-1/2 my-3 px-3">
  57.             {% include 'color-selector.html.twig' with { 'name': 'backColor2', 'description': 'Hintergrundfarbe', 'type': 'accordeon' } %}
  58.         </div>
  59.     </div>
  60.     <hr>
  62.     <div class="bg-white flex flex-wrap overflow-hidden xl:-mx-3">
  63.         <div class="w-1/3 my-3 px-3">
  64.             3. Box, Bild vorne:
  65.             {{ pimcore_image('third-image', {'width': '250'}) }}
  66.         </div>
  67.         <div class="w-1/3 my-3 px-3">
  68.             3. Box, Titel vorne:
  69.             {{ pimcore_input('third-front-text') }}
  70.         </div>
  71.         <div class="w-1/3 my-3 px-3">
  72.             3. Box, Text hinten:
  73.             {{ pimcore_textarea('third-back-text') }}
  74.         </div>
  75.     </div>
  76.     <hr />
  77.     <div class="bg-white flex flex-wrap overflow-hidden xl:-mx-3">
  78.         <div class="w-1/2 my-3 px-3">
  79.             {% include 'color-selector.html.twig' with { 'name': 'textColor3', 'description': 'Schrift-Farbe', 'type': 'accordeon' } %}
  80.         </div>
  81.         <div class="w-1/2 my-3 px-3">
  82.             {% include 'color-selector.html.twig' with { 'name': 'backColor3', 'description': 'Hintergrundfarbe', 'type': 'accordeon' } %}
  83.         </div>
  84.     </div>
  86. </div>
  88. {% else %}
  90.     <section class="md:px-6 py-8">
  91.         {%  if not pimcore_input('headline-headline').isEmpty() %}
  92.             <div class="container flex flex-wrap w-full mx-auto px-4">
  93.                 {% include 'headline.html.twig' with {'name': 'headline', 'input_name': 'headline-headline', 'classes':  'my-4 font-bold text-3xl'} %}
  94.             </div>
  95.         {% endif %}
  97.         <div class="container flex flex-wrap justify-center w-full mx-auto px-4">
  99.             <div tabindex="0" class="flip-card flex flex-col items-stretch bg-transparent w-full min-h-flip lg:w-2/3 xl:w-1/3 lg:px-12 my-4 relative">
  100.                 <div class="absolute hidden lg:flex right-0 h-full w-32 z-0 -mr-12  items-center">
  101.                     <div class="bg-arrow  bg-cover bg-center bg-no-repeat w-full h-32"></div>
  102.                 </div>
  103.                 <div class="flip-card-inner flex-auto items-stretch flex shadow-xl rounded-lg w-full relative">
  104.                     <div class="flip-card-front bg-{{ pimcore_select("backColor1").getData() }} z-10 w-full h-full absolute flex items-center justify-center flex-col border-gray-300 border rounded-lg  shadow-flip-boxes">
  105.                         <img class="my-4 h-32 lazy"
  106.                              data-src="{{ pimcore_image('first-image').getThumbnail('icon-flipbox-front') }}"
  107.                              alt="{{ pimcore_image('first-image').getAlt() }}">
  108.                         <h3 class="text-{{ pimcore_select("textColor1").getData() }} font-bold flex items-center flex-wrap my-2 text-3xl px-6">
  109.                             {{ pimcore_input('first-front-text').getData() }}
  110.                         </h3>
  111.                     </div>
  112.                     <div class="flip-card-back z-50 bg-{{ pimcore_select("backColor1").getData() }} shadow-flip-boxes w-full flex-auto flex-col flex items-stretch border-gray-300 border rounded-lg px-6 py-8">
  113.                         <div class="flex justify-between items-center"
  114.                              x-data="{ first: '{{ pimcore_input('first-front-text').getData() }}' }">
  115.                             <h3 class="text-{{ pimcore_select("textColor1").getData() }} font-bold w-2/3 my-2 text-2xl lg:text-3xl" x-html="first">
  116.                             </h3>
  117.                             <img class="w-1/3 text-center mr-3 my-2 lazy"
  118.                                  data-src="{{ pimcore_image('first-image').getThumbnail('icon-flipbox-back') }}"
  119.                                  alt="{{ pimcore_image('first-image').getAlt() }}">
  120.                         </div>
  121.                         <p class="text-{{ pimcore_select("textColor1").getData() }} text-base">
  122.                             {{ pimcore_textarea('first-back-text').getData() }}
  123.                         </p></div>
  124.                 </div>
  125.             </div>
  127.             <div tabindex="0" class="flip-card flex flex-col items-stretch bg-transparent w-full min-h-flip lg:w-2/3 xl:w-1/3 lg:px-12 my-4 relative">
  128.                 <div class="absolute hidden lg:flex right-0 h-full w-32 z-0 -mr-12  items-center">
  129.                     <div class="bg-arrow  bg-cover bg-center bg-no-repeat w-full h-32"></div>
  130.                 </div>
  131.                 <div  class="flip-card-inner flex-auto items-stretch flex shadow-xl rounded-lg w-full relative">
  132.                     <div class="flip-card-front bg-{{ pimcore_select("backColor2").getData() }} z-10 w-full h-full absolute flex items-center justify-center flex-col border-gray-300 rounded-lg border shadow-flip-boxes">
  133.                         <img class="my-4 h-32 lazy"
  134.                              data-src="{{ pimcore_image('second-image').getThumbnail('icon-flipbox-front') }}"
  135.                              alt="{{ pimcore_image('second-image').getAlt() }}">
  136.                         <h3 class="text-{{ pimcore_select("textColor2").getData() }} font-bold flex items-center flex-wrap my-2 text-3xl px-6">
  137.                             {{ pimcore_input('second-front-text').getData() }}
  138.                         </h3>
  139.                     </div>
  140.                     <div class="flip-card-back bg-{{ pimcore_select("backColor2").getData() }} z-50 shadow-flip-boxes w-full flex-auto flex-col flex items-stretch border-gray-300 rounded-lg border px-6 py-8">
  141.                         <div class="flex justify-between items-center"
  142.                              x-data="{ second: '{{ pimcore_input('second-front-text').getData() }}' }">
  143.                             <h3 class="text-{{ pimcore_select("textColor2").getData() }} font-bold w-2/3 my-2 text-2xl lg:text-3xl" x-html="second">
  144.                             </h3>
  145.                             <img class="w-1/3 text-center mr-3 my-2 lazy"
  146.                                  data-src="{{ pimcore_image('second-image').getThumbnail('icon-flipbox-back') }}"
  147.                                  alt="{{ pimcore_image('second-image').getAlt() }}">
  148.                         </div>
  149.                         <p class="text-{{ pimcore_select("textColor2").getData() }} text-base">
  150.                             {{ pimcore_textarea('second-back-text').getData() }}
  151.                         </p></div>
  152.                 </div>
  153.             </div>
  155.             <div tabindex="0" class="flip-card flex flex-col items-stretch bg-transparent w-full min-h-flip lg:w-2/3 xl:w-1/3 lg:px-12 my-4 relative">
  156.                 <div  class="flip-card-inner flex-auto items-stretch flex shadow-xl rounded-lg w-full relative">
  157.                     <div class="flip-card-front bg-{{ pimcore_select("backColor3").getData() }} z-10 w-full h-full absolute flex items-center justify-center flex-col border-gray-300 border rounded-lg shadow-flip-boxes">
  158.                         <img class="my-4 h-32 lazy"
  159.                              data-src="{{ pimcore_image('third-image').getThumbnail('icon-flipbox-front') }}"
  160.                              alt="{{ pimcore_image('third-image').getAlt() }}">
  161.                         <h3 class="text-{{ pimcore_select("textColor3").getData() }} font-bold flex items-center flex-wrap my-2 text-3xl px-6">
  162.                             {{ pimcore_input('third-front-text').getData() }}
  163.                         </h3>
  164.                     </div>
  165.                     <div class="flip-card-back bg-{{ pimcore_select("backColor3").getData() }} z-50  shadow-flip-boxes w-full flex-auto flex-col flex items-stretch border-gray-300 border rounded-lg px-6 py-8">
  166.                         <div class="flex justify-between items-center"
  167.                              x-data="{ third: '{{ pimcore_input('third-front-text').getData() }}' }">
  168.                             <h3 class="text-{{ pimcore_select("textColor3").getData() }} font-bold w-2/3 my-2 text-2xl lg:text-3xl" x-html="third">
  169.                             </h3>
  170.                             <img class="w-1/3 text-center mr-3 my-2 lazy"
  171.                                  data-src="{{ pimcore_image('third-image').getThumbnail('icon-flipbox-back') }}"
  172.                                  alt="{{ pimcore_image('third-image').getAlt() }}">
  173.                         </div>
  174.                         <p class="text-{{ pimcore_select("textColor3").getData() }} text-base">
  175.                             {{ pimcore_textarea('third-back-text').getData() }}
  176.                         </p></div>
  177.                 </div>
  178.             </div>
  179.         </div>
  180.     </section>
  181. {% endif %}