templates/network/profile/components/hero.html.twig line 1

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