templates/areas/images-slider-text-box/view.html.twig line 1

Open in your IDE?
  1. {% if editmode %}
  2.     <div class="edit-box">
  3.         <h1>KONFIGURATIONEN FÜR DEN AREABRICK:</h1>
  4.         <div class="flex gap-20">
  5.             <div class="content flex column gap-20">
  6.                 <div class="content-box">
  7.                     <div class="item">
  8.                     <p class="edit-p">H1 HEADLINE TEXT:</p>
  9.                     {{ pimcore_input('h1', {'placeholder':'H1 HEADLINE' }) }}
  10.                     </div>
  11.                 </div>
  12.                 <div class="content-box flex gap-20">
  13.                     <div class="item">
  14.                     <p class="edit-p">Texttyp wählen:</p>
  15.                     {{ pimcore_select("TextType", {
  16.                         "reload": true,
  17.                         "store": [
  18.                             ["lead", "Lead Text"],
  19.                             ["basic", "Fliess Text"]
  20.                         ],
  21.                         "defaultValue" : "lead"
  22.                     }) }}
  23.                     </div>
  24.                     <div class="item">
  25.                         <p class="edit-p">Textbox Seite:</p>
  26.                         {{ pimcore_select("BoxSide", {
  27.                             "reload": true,
  28.                             "store": [
  29.                                 ["right", "Box rechts"],
  30.                                 ["left", "Box links"]
  31.                             ],
  32.                             "defaultValue" : "left"
  33.                         }) }}
  34.                     </div>
  35.                     <div class="item">
  36.                         <p class="edit-p">Abstand oben:</p>
  37.                         {{ pimcore_select("PaddingTop", {
  38.                             "reload": true,
  39.                             "store": [
  40.                                 ["no-padding-top", "Kein Abstand"],
  41.                                 ["default-padding", "Standard Abstand"]
  42.                             ],
  43.                             "defaultValue" : "default-padding"
  44.                         }) }}
  45.                     </div>
  46.                     <div class="item">
  47.                         <p class="edit-p">Buttons einfügen:</p>
  48.                         {{ pimcore_select("ButtonsRow", {
  49.                             "reload": true,
  50.                             "store": [
  51.                                 ["true", "Mit Buttons"],
  52.                                 ["false", "Ohne Buttons"]
  53.                             ],
  54.                             "defaultValue" : "false"
  55.                         }) }}
  56.                     </div>
  58.                     <div class="item">
  59.                         <p class="edit-p">Anker Text:</p>
  60.                         {{ pimcore_input('anchor',{'placeholder':'Anker Text','width':300}) }}
  61.                     </div>
  62.                 </div>
  63.             </div>
  64.             <div class="content flex column gap-20">
  65.                 <div class="content-box">
  66.                     <div class="item">
  67.                     <p class="edit-p">Bilder für den Slider ablegen:</p>
  68.                     {{ pimcore_relations("SliderImages", {
  69.                         "reload": true,
  70.                         "title": "Bilder ablegen",
  71.                         "types": ["asset"],
  72.                         "subtypes": {
  73.                             "asset": ["image"]
  74.                         }
  75.                     }) }}
  76.                     </div>
  77.                 </div>
  78.                 <div class="content-box">
  79.                     <div class="item">
  80.                         <p class="edit-p">Schattenbild oben ablegen:</p>
  81.                         {{ pimcore_relation("ShadowImage",{
  82.                             "reload": false,
  83.                             "types": ["asset"],
  84.                             "subtypes": {
  85.                                 "asset": ["image"]
  86.                             }
  87.                         }) }}
  88.                     </div>
  89.                     <div class="item">
  90.                         <p class="edit-p">Schattenbild unten ablegen:</p>
  91.                         {{ pimcore_relation("ShadowImage2",{
  92.                             "reload": false,
  93.                             "types": ["asset"],
  94.                             "subtypes": {
  95.                                 "asset": ["image"]
  96.                             }
  97.                         }) }}
  98.                     </div>
  99.                 </div>
  100.             </div>
  101.         </div>
  102.     </div>
  103. {% endif %}
  105. <section class="slider-text-box images-slider-text-box {{ pimcore_select("BoxSide").getData() }} {{ pimcore_select("PaddingTop").getData() }}" {% if not pimcore_input('anchor').isEmpty() %}id="{{ pimcore_input('anchor').getData() }}"{% endif %}>
  107.     {% if not pimcore_relation("ShadowImage").isEmpty() and not editmode %}
  109.         <div class="shadow-image-con images-slider-text-box-shadow">
  110.             {{ pimcore_relation("ShadowImage").getElement().getThumbnail('ShadowImage').html({
  111.                 imgAttributes: {
  112.                     "class": "shadow-image-top"
  113.                 }
  114.             }) | raw }}
  115.         </div>
  116.     {% endif %}
  118.     {% if not pimcore_relation("ShadowImage2").isEmpty() and not editmode %}
  119.         <div class="shadow-image-con images-slider-text-box-shadow images-slider-text-box-shadow-2">
  120.             {{ pimcore_relation("ShadowImage2").getElement().getThumbnail('ShadowImage').html({
  121.                 imgAttributes: {
  122.                     "class": "shadow-image-top"
  123.                 }
  124.             }) | raw }}
  125.         </div>
  126.     {% endif %}
  128.     {% if not pimcore_input('h1').isEmpty() %}
  129.         <h1 class="vertical alt">{{ pimcore_input('h1').getData() }}</h1>
  130.     {% endif %}
  131.     <div class="swipe-slider-content">
  133.         <div class="swiper textSliderSwiperMobile">
  134.             <div class="swiper-wrapper">
  135.                 {% for image in pimcore_relations("SliderImages") %}
  136.                     <div class="swiper-slide">{{ image.thumbnail('textSliderSwiper').html | raw }}</div>
  137.                 {% endfor %}
  138.             </div>
  139.         </div>
  141.     </div>
  142.     <div class="container {% if pimcore_relations("SliderImages").isEmpty() %}empty-slider-relation{% endif %}">
  143.         {# DESKTOP Slider #}
  144.         <div class="slider-container flex">
  145.             <div class="wrapper">
  146.                 <div class="swiper sliderTextSwiperDesktop">
  147.                     <div class="swiper-wrapper">
  148.                         {% for image in pimcore_relations("SliderImages") %}
  149.                             <div class="swiper-slide">{{ image.thumbnail('textSliderSwiper').html | raw }}</div>
  150.                         {% endfor %}
  151.                     </div>
  152.                 </div>
  153.                 <div class="swipe-controls">
  154.                     <div class="sliderTextSwiperNext"></div>
  155.                     <div class="sliderTextSwiperPrev"></div>
  156.                 </div>
  157.             </div>
  160.         </div>
  161.         {# DESKTOP Slider #}
  163.         <div class="images-container {% if pimcore_relations("SliderImages").getElements() | length  > 1 %}row-reverse{% endif %}">
  165.             {% for image in pimcore_relations("SliderImages") %}
  167.                 {% if pimcore_relations("SliderImages").getElements() | length  <= 1 %}
  169.                     {{ image.thumbnail('textSliderSwiper').getHtml({
  170.                         'imgAttributes': {
  171.                             'class': 'big'
  172.                         },
  173.                         'pictureAttributes': {
  174.                             'class': 'big'
  175.                         }
  176.                     }) | raw }}
  178.                 {% else %}
  181.                         {% if loop.index == 1 %}
  182.                             {{ image.thumbnail('textSliderSwiper').getHtml({
  183.                                 'imgAttributes': {
  184.                                     'class': 'big'
  185.                                 },
  186.                                 'pictureAttributes': {
  187.                                     'class': 'big'
  188.                                 }
  189.                             }) | raw }}
  190.                         {% endif %}
  192.                         {% if loop.index == 2 %}
  193.                             {{ image.thumbnail('textSliderSwiper').getHtml({
  194.                                 'imgAttributes': {
  195.                                     'class': 'mid'
  196.                                 },
  197.                                 'pictureAttributes': {
  198.                                     'class': 'mid'
  199.                                 }
  200.                             }) | raw }}
  201.                         {% endif %}
  207.                 {% endif %}
  209.             {% endfor %}
  211.         </div>
  213.         <div class="text-image-box">
  214.             <div class="content text-box">
  216.                 {% if editmode %}
  217.                     <h2>
  218.                         {{ pimcore_textarea("h2",{
  219.                             "nl2br": true,
  220.                             "height": 120,
  221.                             "placeholder": "H2 Headline Text"
  222.                         }) }}
  223.                     </h2>
  224.                 {% elseif not editmode and not pimcore_textarea("h2").isEmpty() %}
  225.                     <h2>{{ pimcore_textarea("h2").getData() | nl2br }}</h2>
  226.                 {% endif %}
  227.                 <div class="{{ pimcore_select("TextType").getData() }}">
  228.                     {% if editmode %}
  229.                         {{ pimcore_wysiwyg('Content', {
  230.                             height: 200,
  231.                             customConfig: '/assets/js/editmode/config.js'
  232.                         }) }}
  233.                     {% elseif not pimcore_wysiwyg('Content').isEmpty() %}
  234.                         {{ pimcore_wysiwyg('Content').getData() | raw }}
  235.                     {% endif %}
  236.                 </div>
  238.                 {{ pimcore_areablock('AreablockContent', {
  239.                     'allowed': [
  240.                         'text',
  241.                     ]
  242.                 }) }}
  243.                 {% if pimcore_select("ButtonsRow").getData() == "true" %}
  244.                 <div class="buttons-row flex">
  245.                     {% for i in pimcore_block('linkblock').iterator %}
  246.                         <button class="primary">
  247.                             {{ pimcore_link('Link') }}
  248.                             <svg width="15.708" height="10.709" viewBox="0 0 15.708 10.709">
  249.                                 <g transform="translate(0 0.354)">
  250.                                     <g transform="translate(0)">
  251.                                         <path class="line" d="M7.5,18h15" transform="translate(-7.5 -13)" fill="none" stroke="#b76e2b" stroke-linejoin="round" stroke-width="1"/>
  252.                                         <path class="arrow" d="M18,7.5l5.026,5L18,17.5" transform="translate(-8.027 -7.5)" fill="none" stroke="#b76e2b" stroke-width="1"/>
  253.                                     </g>
  254.                                 </g>
  255.                             </svg>
  256.                         </button>
  257.                     {% endfor %}
  258.                 </div>
  259.                 {% endif %}
  260.             </div>
  262.             {% if pimcore_relations("SliderImages").getElements() > 3 %}
  263.             <div class="images-container single-image">
  264.                 {% for image in pimcore_relations("SliderImages") %}
  266.                     {% if loop.index == 3 %}
  267.                     {{ image.thumbnail('textSliderSwiper').getHtml({
  268.                         'imgAttributes': {
  269.                             'class': 'small'
  270.                         }
  271.                     }) | raw }}
  272.                     {% endif %}
  274.                 {% endfor %}
  275.             </div>
  276.             {% endif %}
  277.         </div>
  278.     </div>
  280. </section>