templates/areas/kacheln/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': 'Kacheln' } %}
  6.         {% include 'padding.html.twig' %}
  8.         <div class="my-3 flex flex-wrap overflow-hidden">
  9.             <div class="w-1/2 overflow-hidden">
  10.                 {% include 'color-selector.html.twig' with { 'name': 'color', 'description': 'Hintergrundfarbe der Box' } %}
  11.             </div>
  12.         </div>
  13.         <hr />
  15.         <div class="my-3 flex flex-wrap overflow-hidden">
  16.             <div class="w-1/4 overflow-hidden">
  17.                 Überschrift: (optional)
  18.             </div>
  19.             <div class="w-3/4 overflow-hidden">
  20.                 {{ pimcore_textarea("headline", { "height" : 60 }) }}
  21.             </div>
  22.         </div>
  24.         <div class="my-3 flex flex-wrap overflow-hidden">
  25.             <div class="w-1/4 overflow-hidden">
  26.                 SEO:
  27.             </div>
  28.             <div class="w-1/4 overflow-hidden">
  29.                 {% include 'seo.html.twig' with { 'name': 'seo', 'default' : 'h2' } %}
  30.             </div>
  31.             <div class="w-1/2 overflow-hidden">
  32.                 {% include 'color-selector.html.twig' with { 'name': 'seoHeadlineColor', 'description': 'Farbe der Überschrift', 'type': 'accordeon' } %}
  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.                 Darstellung:
  40.             </div>
  41.             <div class="w-1/4 overflow-hidden">
  42.                 {{ pimcore_select("darstellung", {
  43.                     "store": [
  44.                         ["norm", "mit einem roten Rand"],
  45.                         ["invers", "als rote Fläche"]
  46.                     ],
  47.                     "defaultValue" : "norm"
  48.                 }) }}
  49.             </div>
  50.             <div class="w-1/4 overflow-hidden">
  51.                 Größe:
  52.             </div>
  53.             <div class="w-1/4 overflow-hidden">
  54.                 {{ pimcore_select("groesse", {
  55.                     "store": [
  56.                         ["rechteck", "rechteckig"],
  57.                         ["quadrat", "quadratisch (max. 6 in einer Reihe)"]
  58.                     ],
  59.                     "defaultValue" : "rechteck"
  60.                 }) }}
  61.             </div>
  62.         </div>
  64.         {% set groesse = pimcore_select("groesse").getData() %}
  66.         {% set block = pimcore_block('gridblock', {'manual' : true, 'default' : 1}).start() %}
  67.             {% for b in block.iterator %}
  68.                 {% do block.blockConstruct() %}
  69.                     {% do block.blockStart() %}
  70.                     <div class="border border-gray-400 p-3">
  71.                         <p class="text-gray-400">Element: {{ (b+1) }}</p>
  73.                         <div class="my-3 flex flex-wrap overflow-hidden">
  74.                             <div class="w-1/2 overflow-hidden pl-2">
  75.                                 Text in der Box:
  76.                                 {{ pimcore_textarea("teaser_box", {
  77.                                     "nl2br": true,
  78.                                     "height": 100
  79.                                 }) }}
  80.                             </div>
  81.                             <div class="w-1/2 overflow-hidden pl-2">
  82.                                 Mehr-Link:
  83.                                 {{ pimcore_link("teaser_link") }}
  84.                                 {% if groesse == 'quadrat' %}
  85.                                     {% include 'icon-selector.html.twig' with { name: 'iconselect', description: 'Icon auswählen' } %}
  86.                                 {% endif %}
  87.                             </div>
  88.                         </div>
  89.                     </div>
  90.                     {% do block.blockEnd() %}
  91.                 {% do block.blockDestruct() %}
  92.             {% endfor %}
  93.         {% do block.end() %}
  94.     </div>
  96.     {% include 'areaHeadAndFooter.html.twig' with { 'footer': true } %}
  98. {% else %}
  100.     <section class="{{ pimcore_select('paddingTop') }} {{ pimcore_select('paddingBottom') }} bg-{{ pimcore_select('color') }}">
  101.         <div class="container mx-auto px-5">
  102.             {% set boxstyle = 'border border-red-600 text-red-600' %}
  103.             {% if pimcore_select("darstellung").getData() == 'invers' %}
  104.                 {% set boxstyle = 'border border-red-600 bg-red-600 text-white' %}
  105.             {% endif %}
  106.             {% set darstellung = pimcore_select("darstellung").getData() %}
  108.             {% set spalten = 'grid-cols-2 md:grid-cols-3' %}
  109.             {% set groesse = pimcore_select("groesse").getData() %}
  110.             {% if groesse == 'quadrat' %}
  111.                 {% set spalten = 'grid-cols-2 md:grid-cols-3 lg:grid-cols-6' %}
  112.             {% endif %}
  114.             {% if pimcore_textarea("headline") != '' %}
  115.                 {% set seo = pimcore_select("seo").getData() %}
  116.                 <{{ seo }} class="text-{{ pimcore_select("seoHeadlineColor").getData() }} block mb-5 md:mb-10 text-2xl md:text-4xl lg:text-5xl font-bold">
  117.                     {{ pimcore_textarea("headline")|nl2br }}
  118.                 </{{ seo }}>
  119.             {% endif %}
  121.             <div class="grid {{ spalten }} grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-5">
  122.                 {% set block = pimcore_block('gridblock', {'manual' : true}).start() %}
  123.                     {% for b in block.iterator %}
  124.                         {% do block.blockConstruct() %}
  125.                             {% do block.blockStart() %}
  126.                                 <div class="{{ boxstyle }} flex flex-wrap text-2xl px-5 py-3 rounded-lg font-bold hover:scale-105 transition duration-500 ease-in-out">
  127.                                     <div class="w-full flex text-center justify-center">
  128.                                         {{ pimcore_textarea("teaser_box", {
  129.                                             "nl2br": true
  130.                                         }) }}
  131.                                         {% if groesse == 'quadrat' %}
  132.                                         </div>
  133.                                         <div class="w-full flex text-center justify-center text-6xl pt-3">
  134.                                             {% include 'icon-selector.html.twig' with { name: 'iconselect' } %}
  135.                                         {% endif %}
  136.                                     </div>
  137.                                     {% if pimcore_link("teaser_link") != '' %}
  138.                                         <div class="w-full flex justify-center text-lg font-normal">
  139.                                             {% if darstellung == 'invers' %}
  140.                                                 {% include 'widgets/morelink.html.twig' with { name: 'teaser_link', othercolor: 'white' } %}
  141.                                             {% else %}
  142.                                                 {% include 'widgets/morelink.html.twig' with { name: 'teaser_link' } %}
  143.                                             {% endif %}
  144.                                         </div>
  145.                                     {% endif %}
  146.                                 </div>
  147.                             {% do block.blockEnd() %}
  148.                         {% do block.blockDestruct() %}
  149.                     {% endfor %}
  150.                 {% do block.end() %}
  151.             </div>
  152.         </div>
  153.     </section>
  155. {% endif %}