templates/document/areabricks/hero-brick/view.html.twig line 1

Open in your IDE?
  1. {% set bgImageStyle = '' %}
  2. {% set bgFilter = 'bg-neutral-900' %}
  3. {% set textSubheadline = 'text-primary' %}
  4. {% set textHeadline = 'text-white' %}
  5. {% set btnClass = 'btn btn-primary' %}
  6. {% if pimcore_select('colorFilter').getData() == 'gold' %}
  7.   {% set bgImageStyle = 'filter: grayscale(100%);' %}
  8.   {% set textSubheadline = 'text-black' %}
  9.   {% set textHeadline = 'text-white' %}
  10.   {% set btnClass = 'btn btn-black' %}
  11.   {% set bgFilter = 'bg-primary' %}
  12. {% elseif pimcore_select('colorFilter').getData() == 'braun' %}
  13.   {% set bgImageStyle = 'filter: grayscale(100%);' %}
  14.   {% set bgFilter = ' bg-secondary' %}
  15.   {% set textSubheadline = 'text-white' %}
  16.   {% set textHeadline = 'text-white' %}
  17.   {% set btnClass = 'btn btn-primary' %}
  18. {% elseif pimcore_select('colorFilter').getData() == 'hellgrau' %}
  19.   {% set bgImageStyle = 'filter: grayscale(100%);' %}
  20.   {% set bgFilter = ' bg-background' %}
  21.   {% set textSubheadline = 'text-black' %}
  22.   {% set textHeadline = 'text-black' %}
  23.   {% set btnClass = 'btn btn-black' %}
  24. {% elseif pimcore_select('colorFilter').getData() == 'dunkelgrau' %}
  25.   {% set bgImageStyle = 'filter: grayscale(100%);' %}
  26.   {% set bgFilter = 'bg-neutral-900' %}
  27.   {% set btnClass = 'btn btn-primary' %}
  28.   {% set textSubheadline = 'text-primary' %}
  29.   {% set textHeadline = 'text-white' %}
  30.   {% set btnClass = ' btn btn-primary' %}
  31. {% endif %}
  33. <div class="relative grid w-full bg-center bg-contain md:py-0">
  34.   <div class="grid lg:items-center lg:grid-cols-2">
  35.     <div class="z-30 grid px-2 py-8 flex-grow-1 lg:py-20 lg:px-10 lg:py-40 place-content-center">
  36.       <div class="grid justify-center gap-4 md:gap-12">
  37.         <h2 class="m-0 font-light text-center uppercase {{ textSubheadline }} h4 text-shadow">
  38.           {{ pimcore_input('subtitle', { placeholder: 'subheadline' }) }}
  39.         </h2>
  40.         <h1 class="px-4 m-0 text-3xl lg:text-5xl font-medium text-center {{
  41.           textHeadline
  42.           }} normal-case h1 font-headline text-shadow">
  43.           {{ pimcore_input('title', { placeholder: 'headline' }) }}
  44.         </h1>
  45.         {% if editmode or pimcore_link('link') %}
  46.           <div class="mx-auto">
  47.             {{ pimcore_link('link', { class: 'mx-auto ' ~ btnClass }) }}
  48.           </div>
  49.         {% endif %}
  50.       </div>
  51.     </div>
  53.     <div class="z-30 h-full">
  54.       {% if not editmode %}
  55.         {% set image = pimcore_image('background').getThumbnail('hero-background') %}
  56.         {{
  57.           image.html({
  58.             pictureAttributes: { class: 'object-contain h-full' },
  59.             imgAttributes: { class: 'object-contain h-full' }
  60.           })|raw
  61.         }}
  62.       {% endif %}
  64.       {% if editmode %}
  65.         {{
  66.           pimcore_image(
  67.             'background',
  68.             { thumbnail: 'hero-background', class: 'w-full', height: 500 }
  69.           )
  70.         }}
  71.       {% endif %}
  72.     </div>
  73.   </div>
  74.   <div class="absolute top-0 left-0 w-full h-full z-10 {{ bgFilter }}"></div>
  75. </div>