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>