templates/areas/hero-large-brick/view.html.twig line 1

Open in your IDE?
  1. {% include 'includes/partials/hero_usp_bar.html.twig' %}
  3. {% embed 'app/area-brick-layout.html.twig' %}
  5.     {% block content %}
  7.         {% set customButtonLabel = pimcore_input('customButtonLabel').getData() %}
  9.         <section class="relative pb-8 md:pb-10">
  10.             {% set selectedImage = pimcore_image('background-image') %}
  11.             {% set HeroLargeBackgroundImage = selectedImage.getThumbnail("header-large-gradient") %}
  12.             {% set backgroundPositionStyle = "background-position:" ~ (selectedImage.getImage().getCustomSetting('focalPointX') ?? "50") ~ "% " ~  (selectedImage.getImage().getCustomSetting('focalPointY') ?? "50") ~ "%; " %}
  14.             <section>
  15.                 <div class="bg-blue-200 pb-8 pt-[150px] sm:py-20">
  16.                     <div class="sm:container flex flex-row h-full items-center sm:min-h-[650px]">
  17.                         <div class="sm:absolute sm:left-0 hero-large-background" style="{{ backgroundPositionStyle ?? "" }} background-image:url('{{ HeroLargeBackgroundImage }}');"></div>
  18.                         <div class="mx-5 sm:mx-0 w-full sm:w-[630px] relative hero-card hero-card--overlap bg-white px-10 py-8 sm:ml-8 rounded">
  19.                             {% include 'includes/partials/hero_content.html.twig' %}
  20.                         </div>
  21.                     </div>
  22.                 </div>
  23.             </section>
  25.             {# Defined as editableDialogBox field #}
  26.             {% if pimcore_relations("product-categories") is not empty %}
  27.                 <div
  28.                     class="container flex flex-wrap justify-center -mt-3 text-base font-bold md:-mt-[68px] drop-shadow-xl">
  29.                     {% for productCategory in pimcore_relations("product-categories") %}
  30.                         {% include 'areas/hero-large-brick/partials/editmode/_no-page-found-for-object.html.twig' %}
  32.                         {% if productCategory.page is empty or productCategory.page == false %}
  33.                             <div
  34.                                 class="flex items-center w-full p-4 transition-transform bg-white border-b border-gray-300 md:border-r md:border-b-0 md:w-1/4 hover:border-none hover:rounded-md hover:scale-105 hover:drop-shadow-xl hover:text-blue md:rounded-none {{ loop.index === 1 ? "rounded-t-md md:rounded-l-md md:rounded-r-none" : "" }}">
  35.                                 <div class="flex items-center w-full md:justify-center md:flex-col">
  36.                                     {% if productCategory.icon %}
  37.                                         <div class="inline w-8 h-8 mr-4 md:mb-6 md:mr-0 md:h-14 md:w-14 sm:mt-4">
  38.                                             {{ productCategory.icon.thumbnail('default').html|raw }}
  39.                                         </div>
  40.                                     {% endif %}
  41.                                     <span class="text-center">
  42.                                         {{ productCategory.name ?: productCategory.key }}
  43.                                     </span>
  44.                                 </div>
  45.                                 <span class="text-gray-800 md:hidden">
  46.                                     <svg class="w-4 h-8 " xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
  47.                                         <path fill="currentColor" fill-rule="evenodd"
  48.                                               d="m6.406 15.656 6.963-6.731c.249-.24.389-.575.389-.925 0-.35-.14-.685-.389-.925L6.406.343A1.206 1.206 0 0 0 4.657.41l-.09.113a1.297 1.297 0 0 0 .154 1.67L10.731 8l-6.008 5.806a1.295 1.295 0 0 0-.065 1.783c.463.52 1.248.55 1.748.066Z"/>
  49.                                     </svg>
  50.                                 </span>
  51.                             </div>
  52.                         {% else %}
  53.                             <a href="{{ productCategory.page.url | trimUrl }}"
  54.                                class="flex items-center w-full p-4 transition-transform bg-white border-b border-gray-300  md:border-r md:border-b-0 md:w-1/4 hover:border-none hover:rounded-md hover:scale-105 hover:drop-shadow-xl hover:text-blue md:rounded-none {{ loop.index === 1 ? "rounded-t-md md:rounded-l-md md:rounded-r-none" : "" }}">
  55.                                 <div class="flex items-center w-full md:justify-center md:flex-col">
  56.                                     {% if productCategory.icon %}
  57.                                         <div class="inline w-8 h-8 mr-4 md:mb-6 md:mr-0 md:h-14 md:w-14 sm:mt-4">
  58.                                             {{ productCategory.icon.thumbnail('default').html|raw }}
  59.                                         </div>
  60.                                     {% endif %}
  61.                                     <span class="text-center">
  62.                                         {{ productCategory.name ?: productCategory.key }}
  63.                                     </span>
  64.                                 </div>
  65.                                 <span class="text-gray-800 md:hidden">
  66.                                     <svg class="w-4 h-8 " xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
  67.                                         <path fill="currentColor" fill-rule="evenodd"
  68.                                               d="m6.406 15.656 6.963-6.731c.249-.24.389-.575.389-.925 0-.35-.14-.685-.389-.925L6.406.343A1.206 1.206 0 0 0 4.657.41l-.09.113a1.297 1.297 0 0 0 .154 1.67L10.731 8l-6.008 5.806a1.295 1.295 0 0 0-.065 1.783c.463.52 1.248.55 1.748.066Z"/>
  69.                                     </svg>
  70.                                 </span>
  71.                             </a>
  72.                         {% endif %}
  73.                     {% endfor %}
  75.                     {% if document.getProperty('productCategoryArchivePage') is defined
  76.                         and document.getProperty('productCategoryArchivePage') is not null %}
  77.                         <a href="{{ document.getProperty('productCategoryArchivePage').url | trimUrl }}"
  78.                            class="flex items-center w-full p-4 transition-transform bg-white rounded-b-md md:border-r md:border-b-0 md:w-1/4 hover:border-none hover:rounded-md hover:scale-105 hover:drop-shadow-xl hover:text-blue md:rounded-none md:rounded-r-md">
  79.                             <div class="flex items-center w-full md:justify-center md:flex-col">
  80.                                 {% if pimcore_website_config('allSolutionsIcon') %}
  81.                                     <div class="inline w-8 h-8 mr-4 md:mb-6 md:mr-0 md:h-14 md:w-14">
  82.                                         {{ pimcore_website_config('allSolutionsIcon').thumbnail('default').html|raw }}
  83.                                     </div>
  84.                                 {% endif %}
  85.                                 <span class="text-center">
  86.                                     {{ "Alle oplossingen"|trans }}
  87.                                 </span>
  88.                             </div>
  89.                             <span class="text-gray-800 md:hidden">
  90.                                 <svg class="w-4 h-8 " xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
  91.                                     <path fill="currentColor" fill-rule="evenodd"
  92.                                           d="m6.406 15.656 6.963-6.731c.249-.24.389-.575.389-.925 0-.35-.14-.685-.389-.925L6.406.343A1.206 1.206 0 0 0 4.657.41l-.09.113a1.297 1.297 0 0 0 .154 1.67L10.731 8l-6.008 5.806a1.295 1.295 0 0 0-.065 1.783c.463.52 1.248.55 1.748.066Z"/>
  93.                                 </svg>
  94.                             </span>
  95.                         </a>
  96.                     {% endif %}
  98.                 </div>
  99.             {% endif %}
  101.         </section>
  102.     {% endblock %}
  103. {% endembed %}