templates/areas/text-image/view.html.twig line 1

Open in your IDE?
  1. {% set headlineTag = pimcore_select('headlineTag', {
  2.     'store': [
  3.         ['none', 'none'],
  4.         ['h1', 'H1'],
  5.         ['h2', 'H2'],
  6.         ['h3', 'H3'],
  7.         ['h4', 'H4'],
  8.         ['h5', 'H5'],
  9.         ['h6', 'H6'],
  10.     ],
  11.     'defaultValue': '',
  12.     'reload': true
  13. }) %}
  15. {% if headlineTag.isEmpty() %}
  16.     {% do headlineTag.setDataFromResource('h2') %}
  17. {% endif %}
  19. {% set headline1 = headlineTag.data != 'none' ? headlineTag.data|raw : 'span'|raw %}
  20. {% set headline2 = headlineTag.data != 'none' ? '</' ~ headlineTag.data|raw ~ '>' : '</span>'|raw %}
  22. {% set backgroundColor = pimcore_select('backgorundColor', {
  23.     'store': [
  24.         ['dark', 'Dark'],
  25.         ['light', 'Light'],
  26.     ],
  27.     'defaultValue': '',
  28.     'reload': true
  29. }) %}
  31. {% if backgroundColor.isEmpty() %}
  32.     {% do backgroundColor.setDataFromResource('dark') %}
  33. {% endif %}
  36. {% if editmode %}
  37.     <div class="edit-box editmode">
  38.         <h1>KONFIGURATIONEN FÜR DEN AREABRICK:</h1>
  39.         <div class="flex gap-20">
  40.             <div class="content flex column gap-20">
  41.                 <div class="content-box flex gap-20">
  42.    
  43.                      <div class="item">
  44.                         <p class="edit-p">Titel-Typ definieren:</p>
  45.                         {{ headlineTag|raw }}
  46.                     </div>
  48.                     <div class="item">
  49.                         <p class="edit-p">Hintergrundfarbe definieren:</p>
  50.                         {{ backgroundColor|raw }}
  51.                     </div>
  53.                 </div>
  54.             </div>
  55.         </div>
  56.     </div>
  57. {% endif %}
  59. <section class="image-text text-image {{ backgroundColor.data }}">
  60.     <div class="text">
  61.         <div class="wrapper">
  62.             {% if editmode %}
  63.                 <h2 class="teaser-headline">
  64.                 {{ pimcore_textarea("headline",{
  65.                         "nl2br": true,
  66.                         "height": 100,
  67.                         "placeholder": "HAUPT ÜBERSCHRIFT FÜR DIESE AREA"
  68.                     }) }}
  69.                 </h2>
  70.             {% elseif not editmode and not pimcore_textarea('headline').isEmpty() %}
  71.                 <h2 class="teaser-headline">
  72.                     {{ pimcore_textarea('headline').getData() | nl2br }}
  73.                 </h2>
  74.             {% endif %}
  76.             {% if editmode %}
  77.                 {{ pimcore_wysiwyg('Content', {
  78.                     height: 150,
  79.                     customConfig: '/assets/js/editmode/config.js'
  80.                 }) }}
  81.             {% elseif not pimcore_wysiwyg('Content').isEmpty() %}
  82.                 {{ pimcore_wysiwyg('Content').getData() | raw }}
  83.             {% endif %}
  85.             {% if editmode %}
  86.                 <div style="margin-top: 30px;"></div>
  87.                 {{ pimcore_link('teaserLink', {'class': ""}) }}
  88.             {% elseif not editmode and not pimcore_link('teaserLink').isEmpty() %}
  89.                 <div class="btn secondary">
  90.                     {% if pimcore_link('left').getTarget() %}
  91.                         {% set target = pimcore_link('left').getTarget() %}
  92.                     {% else %}
  93.                         {% set target = '_self' %}
  94.                     {% endif %}
  95.                     <a class="flex" href="{{ pimcore_link('left').getHref() }}" target="{{ target }}">
  96.                         <span>{{ pimcore_link('teaserLink').getText() }}<svg width="15.708" height="10.709" viewBox="0 0 15.708 10.709">
  97.                                 <g transform="translate(0 0.354)">
  98.                                     <g transform="translate(0)">
  99.                                         <path class="line" d="M7.5,18h15" transform="translate(-7.5 -13)" fill="none" stroke="#fff" stroke-linejoin="round" stroke-width="1"/>
  100.                                         <path class="arrow" d="M18,7.5l5.026,5L18,17.5" transform="translate(-8.027 -7.5)" fill="none" stroke="#fff" stroke-width="1"/>
  101.                                     </g>
  102.                                 </g>
  103.                             </svg>
  104.                         </span>
  105.                     </a>
  106.                     <div class="button-shape">
  107.                         {{include('svg/button-shape.html.twig')}}
  108.                     </div>
  109.                 </div>
  110.             {% endif %}
  111.         </div>
  112.     </div>
  113.     <div class="image">
  114.         {% if not pimcore_relation("imageRelation").isEmpty() %}
  115.             {{ pimcore_relation("imageRelation").getElement().getThumbnail('ImageTextTeaser').html | raw }}
  116.         {% endif %}
  117.         {% if editmode %}
  118.             <div style="width: 400px; position: absolute; top: 0;">
  119.                 {{ pimcore_relation("imageRelation",{
  120.                     "types": ["asset"],
  121.                     "subtypes": {
  122.                         "asset": ["image"]
  123.                     }
  124.                 }) }}
  125.             </div>
  126.         {% endif %}
  127.     </div>
  128. </section>