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

Open in your IDE?
  1. <figure class="homepage-hero">
  2.     {%- if editmode -%}
  3.         <picture class="homepage-hero__picture">
  4.             {{- pimcore_image('heroImage', {
  5.                 'class': 'homepage-hero__image'
  6.             }) -}}
  7.         </picture>
  9.         <figcaption class="homepage-hero__caption">
  10.             <div class="homepage-hero__claim">
  11.                 {{- pimcore_input('claim', {
  12.                     'placeholder': 'Sie.'
  13.                 }) -}}
  14.             </div>
  16.             <p class="homepage-hero__questions-item homepage-hero__questions-item--one">
  17.                 {{- pimcore_textarea('questionOne', {
  18.                     'placeholder': 'Frage Eins'
  19.                 }) -}}
  20.             </p>
  22.             <p class="homepage-hero__questions-item homepage-hero__questions-item--two">
  23.                 {{- pimcore_textarea('questionTwo', {
  24.                     'placeholder': 'Frage Zwei'
  25.                 }) -}}
  26.             </p>
  28.             <p class="homepage-hero__questions-item homepage-hero__questions-item--three">
  29.                 {{- pimcore_textarea('questionThree', {
  30.                     'placeholder': 'Frage Drei'
  31.                 }) -}}
  32.             </p>
  34.             <p class="homepage-hero__questions-item homepage-hero__questions-item--four">
  35.                 {{- pimcore_textarea('questionFour', {
  36.                     'placeholder': 'Frage Vier'
  37.                 }) -}}
  38.             </p>
  40.             <h1 class="homepage-hero__headline">
  41.                 {{ pimcore_input('headlineWordOne', {
  42.                     'placeholder': 'Wort vorne'
  43.                 }) }}
  45.                 {{ pimcore_input('headlineWordTwo', {
  46.                     'placeholder': 'Wort hinten'
  47.                 }) }}
  48.             </h1>
  50.             {{- pimcore_link('headlineLink') -}}
  51.         </figcaption>
  52.     {%- else -%}
  53.         {%- set heroImage = pimcore_image('heroImage', {
  54.             'thumbnail': 'homepageHeroImage',
  55.             'pictureAttributes': {
  56.                 'class': 'homepage-hero__picture'
  57.             },
  58.             'imgAttributes': {
  59.                 'class': 'homepage-hero__image',
  60.                 'loading': 'eager'
  61.             }
  62.         }) -%}
  63.         {%- set claim = pimcore_input('claim') -%}
  64.         {%- set questionOne = pimcore_textarea('questionOne') -%}
  65.         {%- set questionTwo = pimcore_textarea('questionTwo') -%}
  66.         {%- set questionThree = pimcore_textarea('questionThree') -%}
  67.         {%- set questionFour = pimcore_textarea('questionFour') -%}
  68.         {%- set headlineWordOne = pimcore_input('headlineWordOne') -%}
  69.         {%- set headlineWordTwo = pimcore_input('headlineWordTwo') -%}
  70.         {%- set headlineLink = pimcore_link('headlineLink') -%}
  72.         {%- if not heroImage.isEmpty() -%}
  73.             {{- heroImage|raw -}}
  74.         {%- endif -%}
  76.         <figcaption class="homepage-hero__caption">
  77.             {%- if not claim.isEmpty() -%}
  78.                 <p class="homepage-hero__claim">
  79.                     {{- claim|raw -}}
  80.                 </p>
  81.             {%- endif -%}
  83.             {%- if not questionOne.isEmpty() -%}
  84.                 <p class="homepage-hero__questions-item homepage-hero__questions-item--one">
  85.                     {{- questionOne|nl2br  -}}
  86.                     <span class="anim-wrapper anim-wrapper-1">
  87.                         <span class="border-animation border-animation-1">
  88.                         </span><span class="pulsar"></span>
  89.                     </span>
  90.                 </p>
  91.             {%- endif -%}
  93.             {% if not questionTwo.isEmpty() %}
  94.                 <p class="homepage-hero__questions-item homepage-hero__questions-item--two">
  95.                     {{- questionTwo|nl2br -}}
  96.                     <span class="anim-wrapper anim-wrapper-2">
  97.                         <span class="border-animation border-animation-2">
  98.                         </span><span class="pulsar"></span>
  99.                     </span>
  100.                 </p>
  101.             {%- endif -%}
  103.             {%- if not questionThree.isEmpty() -%}
  104.                 <p class="homepage-hero__questions-item homepage-hero__questions-item--three">
  105.                     {{- questionThree|nl2br -}}
  106.                     <span class="anim-wrapper anim-wrapper-3">
  107.                         <span class="border-animation border-animation-3">
  108.                         </span><span class="pulsar"></span>
  109.                     </span>
  110.                 </p>
  111.             {%- endif -%}
  113.             {%- if not questionFour.isEmpty() -%}
  114.                 <p class="homepage-hero__questions-item homepage-hero__questions-item--four">
  115.                     {{- questionFour|nl2br -}}
  117.                     <span class="anim-wrapper anim-wrapper-4">
  118.                         <span class="border-animation border-animation-4">
  119.                         </span><span class="pulsar"></span>
  120.                     </span>
  121.                 </p>
  122.             {%- endif -%}
  124.             {%- if not headlineWordOne.isEmpty() or not headlineWordTwo.isEmpty() -%}
  125.                 <h1 class="homepage-hero__headline">
  126.                     {%- if not headlineLink.isEmpty() and headlineLink.href != '' -%}
  127.                         <a href="{{ headlineLink.href }}">
  128.                             {%- if not headlineWordOne.isEmpty() -%}
  129.                                 <span class="homepage-hero__headline-one">
  130.                                     {{- headlineWordOne|raw -}}
  131.                                 </span>
  132.                             {%- endif -%}
  134.                             {%- if not headlineWordTwo.isEmpty() -%}
  135.                                 <span class="homepage-hero__headline-two">
  136.                                     {{- headlineWordTwo|raw -}}
  137.                                 </span>
  138.                             {%- endif -%}
  139.                         </a>
  140.                     {%- endif -%}
  142.                     <svg class="icon"
  143.                          aria-hidden="true"
  144.                          focusable="false">
  146.                         <use xlink:href="#angle-down-regular" />
  147.                     </svg>
  148.                 </h1>
  149.             {%- endif -%}
  150.         </figcaption>
  151.     {%- endif -%}
  152. </figure>
  153. <script src="/lef-career/js/hero-observer.js" async></script>