templates/areas/text-slider/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">Slider / Einzelbild wählen:</p>
  13.                         {{ pimcore_select("ContentType", {
  14.                             "reload": true,
  15.                             "store": [
  16.                                 ["slider", "Slider"],
  17.                                 ["image", "Einzelbild"]
  18.                             ],
  19.                             "defaultValue" : "slider"
  20.                         }) }}
  21.                     </div>
  22.                     <div class="item">
  23.                         <p class="edit-p">Texttyp wählen:</p>
  24.                         {{ pimcore_select("TextType", {
  25.                             "reload": true,
  26.                             "store": [
  27.                                 ["lead", "Lead Text"],
  28.                                 ["basic", "Fliess Text"]
  29.                             ],
  30.                             "defaultValue" : "lead"
  31.                         }) }}
  32.                     </div>
  33.                     <div class="item">
  34.                         <p class="edit-p">Hintergrundfarbe wählen:</p>
  35.                         {{ pimcore_select("ColorType", {
  36.                             "reload": true,
  37.                             "store": [
  38.                                 ["beige", "Beige"],
  39.                                 ["orange", "Orange"]
  40.                             ],
  41.                             "defaultValue" : "orange"
  42.                         }) }}
  43.                     </div>
  44.                     <div class="item">
  45.                         <p class="edit-p">Buttons einfügen:</p>
  46.                         {{ pimcore_select("ButtonsRow", {
  47.                             "reload": true,
  48.                             "store": [
  49.                                 ["true", "Mit Buttons"],
  50.                                 ["false", "Ohne Buttons"]
  51.                             ],
  52.                             "defaultValue" : "false"
  53.                         }) }}
  54.                     </div>
  55.                     <div class="item">
  56.                         <p class="edit-p">Anker Text:</p>
  57.                         {{ pimcore_input('anchor',{'placeholder':'Anker Text','width':300}) }}
  58.                     </div>
  59.                 </div>
  60.                 <div class="content-box">
  61.                     <div class="item">
  62.                         <p class="edit-p">Schattenbild ablegen:</p>
  63.                         {{ pimcore_relation("ShadowImage",{
  64.                             "reload": false,
  65.                             "types": ["asset"],
  66.                             "subtypes": {
  67.                                 "asset": ["image"]
  68.                             }
  69.                         }) }}
  70.                     </div>
  71.                     {#<div class="item">
  72.                     <p class="edit-p">Schattenbild unten ablegen:</p>
  73.                     {{ pimcore_relation("ShadowImage2",{
  74.                         "reload": false,
  75.                         "types": ["asset"],
  76.                         "subtypes": {
  77.                             "asset": ["image"]
  78.                         }
  79.                     }) }}
  80.                 </div>#}
  81.                 </div>
  83.             </div>
  84.             <div class="content flex column gap-20">
  85.                 {% if pimcore_select("ContentType").getData() == "image" %}
  86.                 <div class="content-box">
  87.                     <div class="item">
  88.                         <p class="edit-p">Hintergrundbild ablegen:</p>
  89.                         {{ pimcore_relation("Image",{
  90.                             "reload": true,
  91.                             "types": ["asset"],
  92.                             "subtypes": {
  93.                                 "asset": ["image"]
  94.                             }
  95.                         }) }}
  96.                     </div>
  98.                 </div>
  99.                 {% endif %}
  100.                 {% if pimcore_select("ContentType").getData() == "slider" %}
  101.                 <div class="content-box">
  102.                     <div class="item">
  103.                         <p class="edit-p">Bilder für den Slider ablegen:</p>
  104.                         {{ pimcore_relations("SliderImages", {
  105.                             "title": "Bilder ablegen",
  106.                             "types": ["asset"],
  107.                             "subtypes": {
  108.                                 "asset": ["image"]
  109.                             }
  110.                         }) }}
  111.                     </div>
  112.                 </div>
  113.                 {% endif %}
  114.             </div>
  116.         </div>
  117.     </div>
  118. {% endif %}
  120. <section class="text-slider {{ pimcore_select("ColorType").getData() }} {% if not pimcore_relation("Image").isEmpty() %}text-image{% endif %}" {% if not pimcore_input('anchor').isEmpty() %}id="{{ pimcore_input('anchor').getData() }}"{% endif %}>
  122.     {% if not pimcore_relation("ShadowImage").isEmpty() and not editmode %}
  123.         <div class="shadow-image-con text-slider-shadow">
  124.             {{ pimcore_relation("ShadowImage").getElement().getThumbnail('ShadowImage').html({
  125.                 imgAttributes: {
  126.                     "class": "shadow-image-top"
  127.                 }
  128.             }) | raw }}
  129.         </div>
  130.     {% endif %}
  132.     {#{% if not pimcore_relation("ShadowImage2").isEmpty() and not editmode %}
  133.         <div class="slider-textbox-shadow slider-textbox-shadow-2" id="slider-textbox-shadow-2">
  134.             {{ pimcore_relation("ShadowImage2").getElement().getThumbnail('ShadowImage').html({
  135.                 imgAttributes: {
  136.                     "class": "shadow-image-bottom"
  137.                 }
  138.             }) | raw }}
  139.         </div>
  140.     {% endif %}#}
  142.     {% if not pimcore_input('h1').isEmpty() %}
  143.         <h1 class="vertical">{{ pimcore_input('h1').getData() }}</h1>
  144.     {% endif %}
  145.     {# MOBILE Slider #}
  146.     <div class="slider-content-mobile">
  147.         {% if pimcore_relation("Image").isEmpty() %}
  148.             <div class="swiper textSliderSwiperMobile">
  149.                 <div class="swiper-wrapper">
  150.                     {% for image in pimcore_relations("SliderImages") %}
  151.                         <div class="swiper-slide">{{ image.thumbnail('textSliderSwiper').html | raw }}</div>
  152.                     {% endfor %}
  153.                 </div>
  154.             </div>
  155.         {% else %}
  156.             {{ pimcore_relation("Image").getElement().getThumbnail('textSliderSwiper').getHtml({
  157.                 'imgAttributes': {
  158.                     'class':'text-image-mobile'
  159.                 }
  160.             }) | raw }}
  161.         {% endif %}
  163.     </div>
  164.     {# MOBILE Slider #}
  165.     <div class="container text-slider">
  166.         <div class="content-container flex">
  167.             <div class="text-content">
  168.                 {% if editmode %}
  169.                     <h2>
  170.                         {{ pimcore_textarea("h2",{
  171.                             "nl2br": true,
  172.                             "height": 120,
  173.                             "placeholder": "H2 Headline Text"
  174.                         }) }}
  175.                     </h2>
  176.                 {% elseif not editmode and not pimcore_textarea("h2").isEmpty() %}
  177.                     <h2>{{ pimcore_textarea("h2").getData() | nl2br }}</h2>
  178.                 {% endif %}
  179.                 <div class="{{ pimcore_select("TextType").getData() }}">
  180.                     {% if editmode %}
  181.                         {{ pimcore_wysiwyg('Content', {
  182.                             height: 300,
  183.                             customConfig: '/assets/js/editmode/config.js'
  184.                         }) }}
  185.                     {% elseif not pimcore_wysiwyg('Content').isEmpty() %}
  186.                         {{ pimcore_wysiwyg('Content').getData() | raw }}
  187.                     {% endif %}
  188.                 </div>
  190.                 {{ pimcore_areablock('AreablockContent', {
  191.                     'allowed': [
  192.                         'text',
  193.                     ]
  194.                 }) }}
  196.                 {% if pimcore_select("ButtonsRow").getData() == "true" %}
  197.                 <div class="buttons-row flex">
  198.                     {% for i in pimcore_block('linkblock').iterator %}
  199.                         <button class="primary">
  200.                             {{ pimcore_link('Link') }}
  201.                             <svg width="15.708" height="10.709" viewBox="0 0 15.708 10.709">
  202.                                 <g transform="translate(0 0.354)">
  203.                                     <g transform="translate(0)">
  204.                                         <path class="line" d="M7.5,18h15" transform="translate(-7.5 -13)" fill="none" stroke="#b76e2b" stroke-linejoin="round" stroke-width="1"/>
  205.                                         <path class="arrow" d="M18,7.5l5.026,5L18,17.5" transform="translate(-8.027 -7.5)" fill="none" stroke="#b76e2b" stroke-width="1"/>
  206.                                     </g>
  207.                                 </g>
  208.                             </svg>
  209.                         </button>
  210.                     {% endfor %}
  211.                 </div>
  212.                 {% endif %}
  213.             </div>
  214.             <div class="slider-content">
  215.                 {% if pimcore_relation("Image").isEmpty() %}
  216.                     {# DESKTOP Slider #}
  217.                     <div class="swiper textSliderSwiper">
  218.                         <div class="swiper-wrapper">
  219.                             {% for image in pimcore_relations("SliderImages") %}
  220.                                 <div class="swiper-slide">{{ image.thumbnail('textSliderSwiper').html | raw }}</div>
  221.                             {% endfor %}
  222.                         </div>
  223.                     </div>
  224.                 {% else %}
  225.                     {{ pimcore_relation("Image").getElement().getThumbnail('textSliderSwiper').getHtml({
  226.                         'imgAttributes': {
  227.                             'class':'text-image'
  228.                         }
  229.                     }) | raw }}
  230.                 {% endif %}
  231.                 {% if not editmode and pimcore_relation("Image").isEmpty() %}
  232.                     <div class="swipe-controls">
  233.                         <div class="swiper-button-next"></div>
  234.                         <div class="swiper-button-prev"></div>
  235.                     </div>
  236.                 {% endif %}
  237.                 {# DESKTOP Slider #}
  239.             </div>
  240.         </div>
  242.     </div>
  243.     <div class="slider-footer"></div>
  244. </section>