templates/areas/teaser/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 twoCards = pimcore_checkbox('twoCards') %}
  23. {% if twoCards.isChecked() %}
  24. {% set setTwoCards = '--two-cards' %}
  25. {% else %}
  26. {% set setTwoCards = '' %}
  27. {% endif %}
  29. {% set backgroundGrey = pimcore_checkbox('background') %}
  30. {% if backgroundGrey.isChecked() %}
  31. {% set setBackground = '--background-grey' %}
  32. {% else %}
  33. {% set setBackground = '' %}
  34. {% 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. <div class="item">
  43. <p class="edit-p">Abstand nach unten wählen:</p>
  44. {{ pimcore_select("MarginBottom", {
  45. "reload": true,
  46. "store": [
  47. ["regular", "Normal"],
  48. ["half", "1/2"],
  49. ["small", "1/4"],
  50. ["zero", "kein Abstand"],
  51. ],
  52. "defaultValue" : "regular"
  53. }) }}
  54. </div>
  57. <div class="item">
  58. <p class="edit-p">Titel-Typ definieren:</p>
  59. {{ headlineTag|raw }}
  60. </div>
  62. <div class="item">
  63. <p class="edit-p">Two Cards</p>
  64. {{ twoCards|raw }}
  65. </div>
  67. <div class="item">
  68. <p class="edit-p">Grey Background</p>
  69. {{ backgroundGrey|raw }}
  70. </div>
  71. </div>
  72. </div>
  73. </div>
  74. </div>
  75. {% endif %}
  78. <section class="portal-teaser {{ pimcore_select('MarginBottom').getData() }}">
  79. <div class="container">
  80. <div class="headline-container">
  81. {% if editmode %}
  82. <div class="portal-teaser__title">
  83. {{ pimcore_textarea("headline",{
  84. "nl2br": true,
  85. "height": 100,
  86. "placeholder": "HAUPT ÜBERSCHRIFT FÜR DIESE AREA"
  87. }) }} </div>
  88. {% elseif not pimcore_textarea('headline').isEmpty() %}
  89. <{{headline1|raw}} class="portal-teaser__title">
  90. {{ pimcore_textarea('headline').getData() | nl2br }}
  91. {{ headline2|raw }}
  92. {% endif %}
  94. </div>
  95. <div class="portal-teaser-container flex gap-20">
  97. <div class="portal-teaser-slider flex column {{ setBackground }}">
  98. <div class="img-container">
  99. {% set galleryObjectLeft = pimcore_relation('teaserSliderLeft', {
  100. 'types': ['object'],
  101. 'classes': ['TeaserSlider'],
  102. 'reload': false,
  103. 'required': true
  104. }) %}
  105. {% set galleryLeft = galleryObjectLeft.getElement() %}
  107. {% if galleryLeft is defined and galleryLeft is not null %}
  108. <div class="teaser-slider">
  109. <div class="teaser-slider-inner">
  110. {% for image in galleryLeft.getImages() %}
  111. <div class="teaser-slider-image {% if loop.first %}--active{% endif %}">
  112. {{ image.thumbnail('PortalTeaser').html({
  113. 'disableWidthHeightAttributes': true,
  114. 'imgAttributes': {
  115. 'width': 927,
  116. 'height': 320,
  117. 'loading': 'lazy'
  118. }
  119. })|raw }}
  120. </div>
  121. {% endfor %}
  122. </div>
  123. {% if galleryLeft.getImages()|length > 1 %}
  124. <button class="slider-prev">{{ include('svg/icon-chevron-left.html.twig') }}</button>
  125. <button class="slider-next">{{ include('svg/icon-chevron-left.html.twig') }}</button>
  127. <div class="slider-pagination">
  128. {% for slider in galleryLeft.getImages() %}
  129. <div class="slider-pagination-item {% if loop.first %}--active{% endif %}"></div>
  130. {% endfor %}
  131. </div>
  132. {% endif %}
  133. </div>
  134. {% endif %}
  136. {% if editmode %}
  137. {{ galleryObjectLeft|raw }}
  138. {% endif %}
  139. </div>
  141. <div class="text-container">
  142. {% set headlineTagX = pimcore_select('headlineTagX', {
  143. 'store': [
  144. ['none', 'none'],
  145. ['h1', 'H1'],
  146. ['h2', 'H2'],
  147. ['h3', 'H3'],
  148. ['h4', 'H4'],
  149. ['h5', 'H5'],
  150. ['h6', 'H6'],
  151. ],
  152. 'defaultValue': '',
  153. 'reload': true
  154. }) %}
  155. {% if headlineTagX.isEmpty() %}
  156. {% do headlineTagX.setDataFromResource('h2') %}
  157. {% endif %}
  158. {% set headline1X = headlineTagX.data != 'none' ? headlineTagX.data|raw : 'span'|raw %}
  159. {% set headline2X = headlineTagX.data != 'none' ? '</' ~ headlineTagX.data|raw ~ '>' : '</span>'|raw %}
  161. {% if editmode %}
  162. <div class="item">
  163. <p class="edit-p">Titel-Typ definieren:</p>
  164. {{ headlineTagX|raw }}
  165. </div>
  167. <h3 class="teaser-headline">
  168. {{ pimcore_textarea("headline_teaser_left",{
  169. "nl2br": true,
  170. "height": 100,
  171. "placeholder": "HAUPT ÜBERSCHRIFT FÜR DIESE AREA"
  172. }) }}
  173. </h3>
  174. {% elseif not editmode and not pimcore_textarea('headline_teaser_left').isEmpty() %}
  175. <{{ headline1X|raw }} class="teaser-headline">
  176. {{ pimcore_textarea('headline_teaser_left').getData() | nl2br }}
  177. {{ headline2X|raw }}
  178. {% endif %}
  179. {% if editmode %}
  180. <p>{{ pimcore_textarea("text_teaser_left",{
  181. "nl2br": true,
  182. "height": 100,
  183. "placeholder": "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat."
  184. }) }}
  185. </p>
  186. {% elseif not editmode and not pimcore_textarea('text_teaser_left').isEmpty() %}
  187. <p>{{ pimcore_textarea('text_teaser_left').getData() | nl2br }}</p>
  188. {% endif %}
  189. </div>
  190. <div class="buttons-row flex center">
  191. {% if editmode %}
  192. {{ pimcore_link('left') }}
  193. {% elseif not editmode and not pimcore_link('left').isEmpty() %}
  194. <div class="btn secondary">
  195. {% if pimcore_link('left').getTarget() %}
  196. {% set target = pimcore_link('left').getTarget() %}
  197. {% else %}
  198. {% set target = '_self' %}
  199. {% endif %}
  200. <a class="flex" href="{{ pimcore_link('left').getHref() }}" target="{{ target }}">
  201. <span>{{ pimcore_link('left').getText() }}
  202. {# <svg width="15.708" height="10.709" viewBox="0 0 15.708 10.709">
  203. <g transform="translate(0 0.354)">
  204. <g transform="translate(0)">
  205. <path class="line" d="M7.5,18h15" transform="translate(-7.5 -13)" fill="none" stroke="#fff" stroke-linejoin="round" stroke-width="1"/>
  206. <path class="arrow" d="M18,7.5l5.026,5L18,17.5" transform="translate(-8.027 -7.5)" fill="none" stroke="#fff" stroke-width="1"/>
  207. </g>
  208. </g>
  209. </svg> #}
  210. </span>
  211. </a>
  212. <div class="button-shape">
  213. {{include('svg/button-shape.html.twig')}}
  214. </div>
  215. </div>
  216. {% endif %}
  217. </div>
  218. </div>
  220. <div class="portal-teaser-slider flex column {{ setBackground }}">
  222. <div class="img-container">
  223. {% set galleryObjectMiddle = pimcore_relation('teaserSliderMiddle', {
  224. 'types': ['object'],
  225. 'classes': ['TeaserSlider'],
  226. 'reload': false,
  227. 'required': true
  228. }) %}
  229. {% set galleryMiddle = galleryObjectMiddle.getElement() %}
  231. {% if galleryMiddle is defined and galleryMiddle is not null %}
  232. <div class="teaser-slider">
  233. <div class="teaser-slider-inner">
  234. {% for image in galleryMiddle.getImages() %}
  235. <div class="teaser-slider-image {% if loop.first %}--active{% endif %}">
  236. {{ image.thumbnail('PortalTeaser').html({
  237. 'disableWidthHeightAttributes': true,
  238. 'imgAttributes': {
  239. 'width': 927,
  240. 'height': 320,
  241. 'loading': 'lazy'
  242. }
  243. })|raw }}
  244. </div>
  245. {% endfor %}
  246. </div>
  247. {% if galleryMiddle.getImages()|length > 1 %}
  248. <button class="slider-prev">{{ include('svg/icon-chevron-left.html.twig') }}</button>
  249. <button class="slider-next">{{ include('svg/icon-chevron-left.html.twig') }}</button>
  251. <div class="slider-pagination">
  252. {% for slider in galleryMiddle.getImages() %}
  253. <div class="slider-pagination-item {% if loop.first %}--active{% endif %}"></div>
  254. {% endfor %}
  255. </div>
  256. {% endif %}
  257. </div>
  258. {% endif %}
  259. {% if editmode %}
  260. {{ galleryObjectMiddle|raw }}
  261. {% endif %}
  262. </div>
  264. <div class="text-container">
  265. {% set headlineTagY = pimcore_select('headlineTagY', {
  266. 'store': [
  267. ['none', 'none'],
  268. ['h1', 'H1'],
  269. ['h2', 'H2'],
  270. ['h3', 'H3'],
  271. ['h4', 'H4'],
  272. ['h5', 'H5'],
  273. ['h6', 'H6'],
  274. ],
  275. 'defaultValue': '',
  276. 'reload': true
  277. }) %}
  278. {% if headlineTagY.isEmpty() %}
  279. {% do headlineTagY.setDataFromResource('h2') %}
  280. {% endif %}
  281. {% set headline1Y = headlineTagY.data != 'none' ? headlineTagY.data|raw : 'span'|raw %}
  282. {% set headline2Y = headlineTagY.data != 'none' ? '</' ~ headlineTagY.data|raw ~ '>' : '</span>'|raw %}
  284. {% if editmode %}
  285. <div class="item">
  286. <p class="edit-p">Titel-Typ definieren:</p>
  287. {{ headlineTagY|raw }}
  288. </div>
  290. <h3 class="teaser-headline">{{ pimcore_textarea("headline_teaser_center",{
  291. "nl2br": true,
  292. "height": 100,
  293. "placeholder": "HAUPT ÜBERSCHRIFT FÜR DIESE AREA"
  294. }) }}
  295. </h3>
  296. {% elseif not editmode and not pimcore_textarea('headline_teaser_center').isEmpty() %}
  297. <{{ headline1Y|raw }} class="teaser-headline">
  298. {{ pimcore_textarea('headline_teaser_center').getData() | nl2br }}
  299. {{ headline2Y|raw}}
  300. {% endif %}
  301. {% if editmode %}
  302. <p>{{ pimcore_textarea("text_teaser_center",{
  303. "nl2br": true,
  304. "height": 100,
  305. "placeholder": "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat."
  306. }) }}
  307. </p>
  308. {% elseif not editmode and not pimcore_textarea('text_teaser_center').isEmpty() %}
  309. <p>{{ pimcore_textarea('text_teaser_center').getData() | nl2br }}</p>
  310. {% endif %}
  311. </div>
  312. <div class="buttons-row flex center">
  313. {% if editmode %}
  314. {{ pimcore_link('center') }}
  315. {% elseif not editmode and not pimcore_link('center').isEmpty() %}
  316. <div class="btn secondary">
  317. {% if pimcore_link('left').getTarget() %}
  318. {% set target = pimcore_link('left').getTarget() %}
  319. {% else %}
  320. {% set target = '_self' %}
  321. {% endif %}
  322. <a class="flex" href="{{ pimcore_link('center').getHref() }}" target="{{ target }}">
  323. <span>{{ pimcore_link('center').getText() }}
  324. {# <svg width="15.708" height="10.709" viewBox="0 0 15.708 10.709">
  325. <g transform="translate(0 0.354)">
  326. <g transform="translate(0)">
  327. <path class="line" d="M7.5,18h15" transform="translate(-7.5 -13)" fill="none" stroke="#fff" stroke-linejoin="round" stroke-width="1"/>
  328. <path class="arrow" d="M18,7.5l5.026,5L18,17.5" transform="translate(-8.027 -7.5)" fill="none" stroke="#fff" stroke-width="1"/>
  329. </g>
  330. </g>
  331. </svg> #}
  332. </span>
  333. </a>
  334. <div class="button-shape">
  335. {{include('svg/button-shape.html.twig')}}
  336. </div>
  337. </div>
  338. {% endif %}
  339. </div>
  340. </div>
  342. <div class="portal-teaser-slider flex column {{ setBackground }} {{ setTwoCards }}">
  344. <div class="img-container">
  345. {% set galleryObjectRight = pimcore_relation('teaserSliderRight', {
  346. 'types': ['object'],
  347. 'classes': ['TeaserSlider'],
  348. 'reload': false,
  349. 'required': true
  350. }) %}
  351. {% set galleryRight = galleryObjectRight.getElement() %}
  353. {% if galleryRight is defined and galleryRight is not null %}
  354. <div class="teaser-slider">
  355. <div class="teaser-slider-inner">
  356. {% for image in galleryRight.getImages() %}
  357. <div class="teaser-slider-image {% if loop.first %}--active{% endif %}">
  358. {{ image.thumbnail('PortalTeaser').html({
  359. 'disableWidthHeightAttributes': true,
  360. 'imgAttributes': {
  361. 'width': 927,
  362. 'height': 320,
  363. 'loading': 'lazy'
  364. }
  365. })|raw }}
  366. </div>
  367. {% endfor %}
  368. </div>
  369. {% if galleryRight.getImages()|length > 1 %}
  370. <button class="slider-prev">{{ include('svg/icon-chevron-left.html.twig') }}</button>
  371. <button class="slider-next">{{ include('svg/icon-chevron-left.html.twig') }}</button>
  373. <div class="slider-pagination">
  374. {% for slider in galleryRight.getImages() %}
  375. <div class="slider-pagination-item {% if loop.first %}--active{% endif %}"></div>
  376. {% endfor %}
  377. </div>
  378. {% endif %}
  379. </div>
  380. {% endif %}
  381. {% if editmode %}
  382. {{ galleryObjectRight|raw }}
  383. {% endif %}
  384. </div>
  387. <div class="text-container">
  388. {% set headlineTagZ = pimcore_select('headlineTagZ', {
  389. 'store': [
  390. ['none', 'none'],
  391. ['h1', 'H1'],
  392. ['h2', 'H2'],
  393. ['h3', 'H3'],
  394. ['h4', 'H4'],
  395. ['h5', 'H5'],
  396. ['h6', 'H6'],
  397. ],
  398. 'defaultValue': '',
  399. 'reload': true
  400. }) %}
  401. {% if headlineTagZ.isEmpty() %}
  402. {% do headlineTagZ.setDataFromResource('h2') %}
  403. {% endif %}
  404. {% set headline1Z = headlineTagZ.data != 'none' ? headlineTagZ.data|raw : 'span'|raw %}
  405. {% set headline2Z = headlineTagZ.data != 'none' ? '</' ~ headlineTagZ.data|raw ~ '>' : '</span>'|raw %}
  407. {% if editmode %}
  408. <div class="item">
  409. <p class="edit-p">Titel-Typ definieren:</p>
  410. {{ headlineTagZ|raw }}
  411. </div> <h3 class="teaser-headline">{{ pimcore_textarea("headline_teaser_right",{
  412. "nl2br": true,
  413. "height": 100,
  414. "placeholder": "HAUPT ÜBERSCHRIFT FÜR DIESE AREA"
  415. }) }}
  416. </h3>
  417. {% elseif not editmode and not pimcore_textarea('headline_teaser_right').isEmpty() %}
  418. <{{ headline1Z|raw }} class="teaser-headline">
  419. {{ pimcore_textarea('headline_teaser_right').getData() | nl2br }}
  420. {{ headline2Z|raw }}
  421. {% endif %}
  422. {% if editmode %}
  423. <p>{{ pimcore_textarea("text_teaser_right",{
  424. "nl2br": true,
  425. "height": 100,
  426. "placeholder": "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat."
  427. }) }}
  428. </p>
  429. {% elseif not editmode and not pimcore_textarea('text_teaser_right').isEmpty() %}
  430. <p>{{ pimcore_textarea('text_teaser_right').getData() | nl2br }}</p>
  431. {% endif %}
  432. </div>
  433. <div class="buttons-row flex center">
  434. {% if editmode %}
  435. {{ pimcore_link('right') }}
  436. {% elseif not editmode and not pimcore_link('right').isEmpty() %}
  437. <div class="btn secondary">
  438. {% if pimcore_link('left').getTarget() %}
  439. {% set target = pimcore_link('left').getTarget() %}
  440. {% else %}
  441. {% set target = '_self' %}
  442. {% endif %}
  443. <a class="flex" href="{{ pimcore_link('right').getHref() }}" target="{{ target }}">
  444. <span>{{ pimcore_link('right').getText() }}
  445. {# <svg width="15.708" height="10.709" viewBox="0 0 15.708 10.709">
  446. <g transform="translate(0 0.354)">
  447. <g transform="translate(0)">
  448. <path class="line" d="M7.5,18h15" transform="translate(-7.5 -13)" fill="none" stroke="#fff" stroke-linejoin="round" stroke-width="1"/>
  449. <path class="arrow" d="M18,7.5l5.026,5L18,17.5" transform="translate(-8.027 -7.5)" fill="none" stroke="#fff" stroke-width="1"/>
  450. </g>
  451. </g>
  452. </svg> #}
  453. </span>
  454. </a>
  455. <div class="button-shape">
  456. {{include('svg/button-shape.html.twig')}}
  457. </div>
  458. </div>
  459. {% endif %}
  460. </div>
  461. </div>
  463. </div>
  464. </div>
  465. </section>