templates/areas/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.                     <p class="edit-p">H1 HEADLINE TEXT:</p>
  8.                     {{ pimcore_input('h1', {'placeholder':'H1 HEADLINE' }) }}
  9.                 </div>
  10.                 <div class="content-box flex gap-20">
  11.                     <div class="item">
  12.                     <p class="edit-p">Texttyp wählen:</p>
  13.                     {{ pimcore_select("TextType", {
  14.                         "reload": true,
  15.                         "store": [
  16.                             ["lead", "Lead Text"],
  17.                             ["basic", "Fliess Text"]
  18.                         ],
  19.                         "defaultValue" : "lead"
  20.                     }) }}
  21.                     </div>
  22.                     <div class="item">
  23.                         <p class="edit-p">Buttons einfügen:</p>
  24.                         {{ pimcore_select("ButtonsRow", {
  25.                             "reload": true,
  26.                             "store": [
  27.                                 ["true", "Mit Buttons"],
  28.                                 ["false", "Ohne Buttons"]
  29.                             ],
  30.                             "defaultValue" : "false"
  31.                         }) }}
  32.                     </div>
  33.                     <div class="item">
  34.                         <p class="edit-p">Anker Text:</p>
  35.                         {{ pimcore_input('anchor',{'placeholder':'Anker Text','width':300}) }}
  36.                     </div>
  37.                 </div>
  38.             </div>
  39.             <div class="content flex column gap-20">
  40.                 <div class="content-box">
  41.                     <div class="item">
  42.                     <p class="edit-p">Bilder für den Slider ablegen:</p>
  43.                     {{ pimcore_relations("SliderImages", {
  44.                         "title": "Bilder ablegen",
  45.                         "types": ["asset"],
  46.                         "subtypes": {
  47.                             "asset": ["image"]
  48.                         }
  49.                     }) }}
  50.                     </div>
  52.                 </div>
  53.                 <div class="content-box">
  54.                     <div class="item">
  55.                         <p class="edit-p">Schattenbild oben ablegen:</p>
  56.                         {{ pimcore_relation("ShadowImage",{
  57.                             "reload": false,
  58.                             "types": ["asset"],
  59.                             "subtypes": {
  60.                                 "asset": ["image"]
  61.                             }
  62.                         }) }}
  63.                     </div>
  64.                     <div class="item">
  65.                         <p class="edit-p">Schattenbild unten ablegen:</p>
  66.                         {{ pimcore_relation("ShadowImage2",{
  67.                             "reload": false,
  68.                             "types": ["asset"],
  69.                             "subtypes": {
  70.                                 "asset": ["image"]
  71.                             }
  72.                         }) }}
  73.                     </div>
  74.                 </div>
  75.             </div>
  76.         </div>
  77.     </div>
  78. {% endif %}
  80. <section class="slider-text-box" {% if not pimcore_input('anchor').isEmpty() %}id="{{ pimcore_input('anchor').getData() }}"{% endif %}>
  82.     {% if not pimcore_relation("ShadowImage").isEmpty() and not editmode %}
  83.         {#{% set imageId = random() %}#}
  84.         <div class="shadow-image-con slider-textbox-shadow" id="slider-textbox-shadow">
  85.             {{ pimcore_relation("ShadowImage").getElement().getThumbnail('ShadowImage').html({
  86.                 imgAttributes: {
  87.                     "class": "shadow-image-top"
  88.                 }
  89.             }) | raw }}
  90.         </div>
  91.     {% endif %}
  93.     {% if not pimcore_relation("ShadowImage2").isEmpty() and not editmode %}
  94.         <div class="shadow-image-con slider-textbox-shadow slider-textbox-shadow-2" id="slider-textbox-shadow-2">
  95.             {{ pimcore_relation("ShadowImage2").getElement().getThumbnail('ShadowImage').html({
  96.                 imgAttributes: {
  97.                     "class": "shadow-image-bottom"
  98.                 }
  99.             }) | raw }}
  100.         </div>
  101.     {% endif %}
  103.     {% if not pimcore_input('h1').isEmpty() %}
  104.         <h1 class="vertical alt">{{ pimcore_input('h1').getData() }}</h1>
  105.     {% endif %}
  106.     <div class="swipe-slider-content">
  108.         <div class="swiper textSliderSwiperMobile">
  109.             <div class="swiper-wrapper">
  110.                 {% for image in pimcore_relations("SliderImages") %}
  111.                     <div class="swiper-slide">{{ image.thumbnail('textSliderSwiper').html | raw }}</div>
  112.                 {% endfor %}
  113.             </div>
  114.         </div>
  118.     </div>
  119.     <div class="container">
  120.         {# DESKTOP Slider #}
  121.         <div class="slider-container flex">
  122.             <div class="wrapper">
  123.                 <div class="swiper sliderTextSwiperDesktop">
  124.                     <div class="swiper-wrapper">
  125.                         {% for image in pimcore_relations("SliderImages") %}
  126.                             <div class="swiper-slide">{{ image.thumbnail('textSliderSwiper').html | raw }}</div>
  127.                         {% endfor %}
  128.                     </div>
  129.                 </div>
  130.                 <div class="swipe-controls">
  131.                     <div class="sliderTextSwiperNext"></div>
  132.                     <div class="sliderTextSwiperPrev"></div>
  133.                 </div>
  134.             </div>
  137.         </div>
  138.         {# DESKTOP Slider #}
  140.         <div class="content text-box">
  142.                 {% if editmode %}
  143.                     <h2>
  144.                         {{ pimcore_textarea("h2",{
  145.                             "nl2br": true,
  146.                             "height": 120,
  147.                             "placeholder": "H2 Headline Text"
  148.                         }) }}
  149.                     </h2>
  150.                 {% elseif not editmode and not pimcore_textarea("h2").isEmpty() %}
  151.                     <h2>{{ pimcore_textarea("h2").getData() | nl2br }}</h2>
  152.                 {% endif %}
  153.                 <div class="{{ pimcore_select("TextType").getData() }}">
  154.                     {% if editmode %}
  155.                         {{ pimcore_wysiwyg('Content', {
  156.                             height: 200,
  157.                             customConfig: '/assets/js/editmode/config.js'
  158.                         }) }}
  159.                     {% endif %}
  160.                     {% if not editmode and not pimcore_wysiwyg('Content').isEmpty() %}
  161.                         {{ pimcore_wysiwyg('Content').getData() | raw }}
  162.                     {% endif %}
  164.                 </div>
  166.                 {{ pimcore_areablock('AreablockContent', {
  167.                     'allowed': [
  168.                         'text',
  169.                     ]
  170.                 }) }}
  172.                 {% if pimcore_select("ButtonsRow").getData() == "true" %}
  173.                 <div class="buttons-row flex">
  174.                     {% for i in pimcore_block('linkblock').iterator %}
  175.                         <button class="primary">
  176.                             {{ pimcore_link('Link') }}
  177.                             <svg width="15.708" height="10.709" viewBox="0 0 15.708 10.709">
  178.                                 <g transform="translate(0 0.354)">
  179.                                     <g transform="translate(0)">
  180.                                         <path class="line" d="M7.5,18h15" transform="translate(-7.5 -13)" fill="none" stroke="#b76e2b" stroke-linejoin="round" stroke-width="1"/>
  181.                                         <path class="arrow" d="M18,7.5l5.026,5L18,17.5" transform="translate(-8.027 -7.5)" fill="none" stroke="#b76e2b" stroke-width="1"/>
  182.                                     </g>
  183.                                 </g>
  184.                             </svg>
  185.                         </button>
  186.                     {% endfor %}
  187.                 </div>
  188.                 {% endif %}
  190.             </div>
  193.     </div>
  197. </section>