templates/areas/imageflipbox/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: Bilder Flipbox' } %}
  6.     {% include 'padding.html.twig' %}
  8.     {% include 'headline-editmode.html.twig' with {'name': 'headline' } %}
  10.     {% for card in pimcore_block('cards').iterator %}
  11.         <div class="flex flex-wrap overflow-hidden xl:-mx-3">
  12.             <div class="w-1/2 my-3 px-3">
  13.                 Bild Vorderseite:
  14.                 {{ pimcore_image('front-image', {'width': '250'}) }}
  15.             </div>
  16.             <div class="w-1/2 my-3 px-3">
  17.                 Text Vorderseite:
  18.                 {{ pimcore_input('title') }}
  19.             </div>
  20.         </div>
  21.         <div class="flex flex-wrap overflow-hidden xl:-mx-3">
  22.             <div class="w-1/2 my-3 px-3">
  23.                 Bild Rückseite:
  24.                 {{ pimcore_image('back-icon', {'width': '250'}) }}
  25.             </div>
  26.             <div class="w-1/2 my-3 px-3">
  27.                 Text Rückseite:
  28.                 {{ pimcore_textarea('back-text') }}
  29.             </div>
  30.         </div>
  31.         <div class="flex flex-wrap overflow-hidden xl:-mx-3">
  32.             <div class="w-1/2 my-3 px-3">
  33.                 Button mit Link:
  34.                 {{ pimcore_link('link') }}
  35.             </div>
  36.             <div class="w-1/2 my-3 px-3">
  37.                 {% include 'color-selector.html.twig' with {'name': 'bg-button-color', 'description': 'Farbe Button' } %}
  38.                 {% include 'color-selector.html.twig' with {'name': 'bg-button-color-hover', 'description': 'Farbe Button Hover' } %}
  39.                 {% include 'color-selector.html.twig' with {'name': 'text-button-color', 'description': 'Textfarbe Button' } %}
  40.                 {% include 'color-selector.html.twig' with {'name': 'text-button-color-hover', 'description': 'Textfarbe Button Hover' } %}
  41.             </div>
  42.         </div>
  43.         <hr>
  44.     {% endfor %}
  45. </div>
  46. {% else %}
  48.     <section class="md:px-6 py-8 overflow-x-hidden" id="{{ pimcore_input('anchor').getData() }}">
  49.         {% if not pimcore_input('headline-headline').isEmpty() %}
  50.             <div class="container flex flex-wrap w-full mx-auto px-4">
  51.                 {% include 'headline.html.twig' with {'name': 'headline', 'input_name': 'headline-headline', 'classes': 'my-4 font-bold text-3xl'} %}
  52.             </div>
  53.         {% endif %}
  54.         <div class="container flex flex-wrap w-full mx-auto px-4">
  55.             {% for cad in pimcore_block('cards').iterator %}
  56.                 <div class="flip-card  flex flex-col items-stretch bg-transparent w-full min-h-flip xl:w-1/3  md:w-1/2 xl:px-12 md:px-6 my-4 relative">
  58.                     <div class="flip-card-inner flex-auto items-stretch flex shadow-xl w-full relative">
  59.                         <div class="flip-card-front bg-white z-10 w-full h-full absolute flex items-center lg:p-6 p-2 justify-center flex-col border-gray-300 border shadow-flip-boxes lazy">
  60.                             <img data-src="{{ pimcore_image('front-image').getThumbnail('icon-flipbox-front') }}"
  61.                                  alt="{{ pimcore_image('front-image').getAlt() }}" class="lazy">
  62.                             <h3 class="font-bold flex items-center break-all text-st-gray flex-wrap my-3 lg:text-3xl text-4xl">
  63.                                 {{ pimcore_input('title').getData() }}
  64.                             </h3>
  65.                         </div>
  66.                         <div class="flip-card-back z-50 justify-between bg-white shadow-flip-boxes w-full flex-auto flex-col flex items-stretch border-gray-300 border px-6 py-8">
  67.                             <div class="flex">
  68.                                 <h3 class="font-bold {% if not pimcore_image('back-icon').isEmpty() %}w-2/3{% else %}w-full{% endif %} flex items-center break-all text-st-gray justify-between my-2 lg:text-3xl text-4xl">
  69.                                     {{ pimcore_input('title').getData() }}
  70.                                 </h3>
  71.                                 {% if not pimcore_image('back-icon').isEmpty() %}
  72.                                 <img class="w-1/3 lazy"
  73.                                      data-src="{{ pimcore_image('back-icon').getThumbnail('image-flipbox-back') }}"
  74.                                      alt="{{ pimcore_image('back-icon').getAlt() }}">
  75.                                 {% endif %}
  76.                             </div>
  77.                             <p class="my-2">
  78.                                 {{ pimcore_textarea('back-text').getData() }}
  79.                             </p>
  80.                             {% if pimcore_link("link") != '' %}
  81.                             <a href="{{ pimcore_link('link').getHref() }}"
  82.                                target="{{ pimcore_link('link').getTarget() }}">
  83.                                 <div class="w-full
  84.                                 flex
  85.                                 justify-center
  86.                                 bg-{{ pimcore_select('bg-button-color').getData() }}
  87.                                 py-2
  88.                                 px-6
  89.                                 text-{{ pimcore_select('text-button-color').getData() }}
  90.                                 hover:bg-{{ pimcore_select('bg-button-color-hover').getData() }}
  91.                                 hover:text-{{ pimcore_select('text-button-color-hover').getData() }}
  92.                                 border
  93.                                 hover:border-{{ pimcore_select('bg-button-color-hover').getData() }}
  94.                                 transition-all
  95.                                 duration-300
  96.                                 ease-in-out text-lg">
  97.                                     {{ pimcore_link('link').getText() }}
  98.                                 </div>
  99.                             </a>
  100.                             {% endif %}
  101.                         </div>
  102.                     </div>
  103.                 </div>
  104.             {% endfor %}
  106.         </div>
  107.     </section>
  108. {% endif %}