templates/areas/image-text/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">
  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">
  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 {{ backgroundColor.data }}">
  60.     <div class="image">
  61.         {% if not pimcore_relation("imageRelation").isEmpty() %}
  62.             {{ pimcore_relation("imageRelation").getElement().getThumbnail('ImageTextTeaser').html | raw }}
  63.         {% endif %}
  64.         {% if editmode %}
  65.             <div style="width: 400px; position: aboslute; top: 0;">
  66.                 {{ pimcore_relation("imageRelation",{
  67.                     "types": ["asset"],
  68.                     "subtypes": {
  69.                         "asset": ["image"]
  70.                     }
  71.                 }) }}
  72.             </div>
  73.         {% endif %}
  74.     </div>
  76.     <div class="text">
  77.         <div class="wrapper">
  78.             {% if editmode %}
  79.                 <h2 class="teaser-headline">
  80.                     {{ pimcore_textarea("headline",{
  81.                         "nl2br": true,
  82.                         "height": 100,
  83.                         "placeholder": "HAUPT ÜBERSCHRIFT FÜR DIESE AREA"
  84.                     }) }}
  85.                 </h2>
  86.             {% elseif not editmode and not pimcore_textarea('headline').isEmpty() %}
  87.                 <{{headline1|raw}} class="teaser-headline">
  88.                     {{ pimcore_textarea('headline').getData() | nl2br }}
  89.                 {{headline2|raw}}
  90.             {% endif %}
  93.             {% if editmode %}
  94.                 {{ pimcore_wysiwyg('Content', {
  95.                     height: 150,
  96.                     customConfig: '/assets/js/editmode/config.js'
  97.                 }) }}
  98.             {% elseif not pimcore_wysiwyg('Content').isEmpty() %}
  99.                 {{ pimcore_wysiwyg('Content').getData() | raw }}
  100.             {% endif %}
  102.             {% if editmode %}
  103.                 <div style="margin-top: 30px;"></div>
  104.                 {{ pimcore_link('teaserLink', {'class': ""}) }}
  105.             {% elseif not editmode and not pimcore_link('teaserLink').isEmpty() %}
  106.                 <div class="btn secondary">
  107.                     {% if pimcore_link('teaserLink').getTarget %}
  108.                         {% set target = pimcore_link('teaserLink').getTarget %}
  109.                     {% else %}
  110.                         {% set target = '_self' %}
  111.                     {% endif %}
  112.                     <a class="flex" href="{{ pimcore_link('teaserLink').getHref() }}" target="{{ target }}">
  113.                         <span>{{ pimcore_link('teaserLink').getText() }}
  114.                             <svg width="15.708" height="10.709" viewBox="0 0 15.708 10.709">
  115.                                 <g transform="translate(0 0.354)">
  116.                                     <g transform="translate(0)">
  117.                                         <path class="line" d="M7.5,18h15" transform="translate(-7.5 -13)" fill="none" stroke="#fff" stroke-linejoin="round" stroke-width="1"/>
  118.                                         <path class="arrow" d="M18,7.5l5.026,5L18,17.5" transform="translate(-8.027 -7.5)" fill="none" stroke="#fff" stroke-width="1"/>
  119.                                     </g>
  120.                                 </g>
  121.                             </svg>
  122.                         </span>
  123.                     </a>
  124.                     <div class="button-shape">
  125.                         {{include('svg/button-shape.html.twig')}}
  126.                     </div>
  127.                 </div>
  128.             {% endif %}
  129.         </div>
  130.     </div>
  131. </section>