templates/areas/whatWeDo/whatWeDo.html.twig line 1

Open in your IDE?
  1. <div class="what-we-do">
  2.     {%- if editmode -%}
  3.         <div class="what-we-do__topleft">
  4.             {{- pimcore_textarea('topleftText', {
  5.                 'placeholder': 'Text'
  6.             }) -}}
  8.             <h2 class="what-we-do__headline">
  9.                 {{- pimcore_input('headline', {
  10.                     'placeholder': 'Sektions-Überschrift'
  11.                 }) -}}
  12.             </h2>
  13.         </div>
  15.         <div class="what-we-do__topmid">
  16.             <svg class="what-we-do__logo"
  17.                 aria-hidden="true"
  18.                 focusable="false">
  20.                 <use xlink:href="#logo-dark" />
  21.             </svg>
  22.         </div>
  24.         <div class="what-we-do__topright">
  25.             <div class="what-we-do__topright-text">
  26.                 {{- pimcore_input('topRightTextTop', {
  27.                     'placeholder': 'Text'
  28.                 }) -}}
  29.             </div>
  31.             <div class="what-we-do__topright-value">
  32.                 {{- pimcore_input('topRightValue', {
  33.                     'placeholder': '12345'
  34.                 }) -}}
  35.             </div>
  37.             <div class="what-we-do__topright-text">
  38.                 {{- pimcore_input('topRightTextBottom', {
  39.                     'placeholder': 'Text'
  40.                 }) -}}
  41.             </div>
  42.         </div>
  44.         <picture class="what-we-do__left-image">
  45.             {{- pimcore_image('imageleft', {
  46.                 'class': 'what-we-do__image'
  47.             }) -}}
  48.         </picture>
  50.         <div class="what-we-do__center">
  51.             <div class="what-we-do__we">
  52.                 {{- pimcore_input('we', {
  53.                     'placeholder': 'Wir.'
  54.                 }) -}}
  55.             </div>
  56.         </div>
  58.         <figure class="what-we-do__bottom-image">
  59.             <picture class="what-we-do__bottom-picture">
  60.                 {{- pimcore_image('imagebottom', {
  61.                     'class': 'what-we-do__image'
  62.                 }) -}}
  63.             </picture>
  65.             <figcaption class="what-we-do__bottom-caption">
  66.                 <div class="what-we-do__bottom-caption-text">
  67.                     {{- pimcore_input('bottomCaptionText', {
  68.                         'placeholder': 'Text'
  69.                     }) -}}
  70.                 </div>
  72.                 <div class="what-we-do__location">
  73.                     {{- pimcore_input('location', {
  74.                         'placeholder': 'Ort'
  75.                     })-}}
  76.                 </div>
  77.             </figcaption>
  78.         </figure>
  80.         <picture class="what-we-do__right-image">
  81.             {{- pimcore_image('imageright', {
  82.                 'class': 'what-we-do__image'
  83.             }) -}}
  84.         </picture>
  85.     {%- else -%}
  86.         {%- set topleftText = pimcore_textarea('topleftText') -%}
  87.         {%- set headline = pimcore_input('headline') -%}
  88.         {%- set topRightTextTop = pimcore_input('topRightTextTop') -%}
  89.         {%- set topRightValue = pimcore_input('topRightValue') -%}
  90.         {%- set topRightTextBottom = pimcore_input('topRightTextBottom') -%}
  91.         {%- set imageleft = pimcore_image('imageleft', {
  92.             'thumbnail': 'whatWeDoImageLeft',
  93.             'pictureAttributes': {
  94.                 'class': 'what-we-do__left-image'
  95.             },
  96.             'imgAttributes': {
  97.                 'class': 'what-we-do__image',
  98.                 'loading': 'lazy'
  99.             }
  100.         }) -%}
  101.         {%- set weeee = pimcore_input('we') -%}
  102.         {%- set imagebottom = pimcore_image('imagebottom', {
  103.             'thumbnail': 'whatWeDoImageBottom',
  104.             'pictureAttributes': {
  105.                 'class': 'what-we-do__bottom-picture'
  106.             },
  107.             'imgAttributes': {
  108.                 'class': 'what-we-do__image',
  109.                 'loading': 'lazy'
  110.             }
  111.         }) -%}
  112.         {%- set bottomCaptionText = pimcore_input('bottomCaptionText') -%}
  113.         {%- set location = pimcore_input('location') -%}
  114.         {%- set imageright = pimcore_image('imageright', {
  115.             'thumbnail': 'whatWeDoImageLeft',
  116.             'pictureAttributes': {
  117.                 'class': 'what-we-do__right-image'
  118.             },
  119.             'imgAttributes': {
  120.                 'class': 'what-we-do__image',
  121.                 'loading': 'lazy'
  122.             }
  123.         }) -%}
  125.         <div class="what-we-do__topleft">
  126.             {%- if not topleftText.isEmpty() -%}
  127.                 <p class="what-we-do__topleft-text">
  128.                     {{- topleftText|nl2br -}}
  129.                 </p>
  130.             {%- endif -%}
  132.             {%- if not headline.isEmpty() -%}
  133.                 <h2 class="what-we-do__headline">
  134.                     {{- headline|raw -}}
  135.                 </h2>
  136.             {%- endif -%}
  137.         </div>
  139.         <div class="what-we-do__topmid">
  140.             <svg class="what-we-do__logo"
  141.                 aria-hidden="true"
  142.                 focusable="false">
  144.                 <use xlink:href="#logo-dark" />
  145.             </svg>
  146.         </div>
  148.         <div class="what-we-do__topright">
  149.             <div class="what-we-do__topright-content">
  150.                 {%- if not topRightTextTop.isEmpty() -%}
  151.                     <p class="what-we-do__topright-text">
  152.                         {{- topRightTextTop|raw -}}
  153.                     </p>
  154.                 {%- endif -%}
  156.                 {%- if not topRightValue.isEmpty() -%}
  157.                     <p class="what-we-do__topright-value">
  158.                         {{- topRightValue|raw -}}
  159.                     </p>
  160.                 {%- endif -%}
  162.                 {%- if not topRightTextBottom.isEmpty() -%}
  163.                     <p class="what-we-do__topright-text">
  164.                         {{- topRightTextBottom|raw -}}
  165.                     </p>
  166.                 {%- endif -%}
  167.             </div>
  168.         </div>
  170.         {%- if not imageleft.isEmpty() -%}
  171.             {{- imageleft|raw -}}
  172.         {%- else -%}
  173.             <div class="what-we-do__image-left"></div>
  174.         {%- endif -%}
  176.         <div class="what-we-do__center">
  177.             {%- if not weeee.isEmpty() -%}
  178.                 <p class="what-we-do__we">
  179.                     {{- weeee|raw -}}
  180.                 </p>
  181.             {%- endif -%}
  182.         </div>
  184.         {%- if not imagebottom.isEmpty() -%}
  185.             <figure class="what-we-do__bottom-image">
  186.                 {{- imagebottom|raw -}}
  188.                 {%- if not bottomCaptionText.isEmpty() or not location.isEmpty() -%}
  189.                     <figcaption class="what-we-do__bottom-caption">
  190.                         {%- if not bottomCaptionText.isEmpty() -%}
  191.                             <p class="what-we-do__bottom-caption-text">
  192.                                 {{- bottomCaptionText|raw -}}
  193.                             </p>
  194.                         {%- endif -%}
  196.                         {%- if not location.isEmpty() -%}
  197.                             <p class="what-we-do__location">
  198.                                 {{- location|raw -}}
  199.                             </p>
  200.                         {%- endif -%}
  201.                     </figcaption>
  202.                 {%- endif -%}
  203.             </figure>
  204.         {%- else -%}
  205.             <div class="what-we-do__bottom-image"></div>
  206.         {%- endif -%}
  208.         {%- if not imageright.isEmpty() -%}
  209.             {{- imageright|raw -}}
  210.         {%- else -%}
  211.             <div class="what-we-do__image-right"></div>
  212.         {%- endif -%}
  213.     {%- endif -%}
  214. </div>