custom/static-plugins/NdVoorwindenTheme/src/Resources/views/storefront/element/cms-element-hero.html.twig line 1

Open in your IDE?
  1. {% block element_hero %}
  2.     {% block element_hero_button_var %}
  3.         {% set button = element.config.button.value %}
  4.     {% endblock %}
  5.     {% set image_desktop = element.data.get('images').image_1_desktop %}
  6.     {% set image_mobile = element.data.get('images').image_2_mobile %}
  8.     {% set heroUrlActive = element.config.hero_url.value %}
  9.     {% set heroUrl = element.config.hero_url_text.value %}
  11.     {% if element.config.hero_url.value %}
  12.         <a class="block h-full w-full" href="{{ element.config.hero_url_text.value }}">
  13.     {% endif %}
  14.     <div class="hero-container relative">
  15.         <div class="hero-images ratio ratio_5x4 md:ratio_3x1 bg-grey-300">
  16.             {% sw_thumbnails 'cms-image-thumbnails' with {
  17.                 media: image_desktop,
  18.                 attributes: {
  19.                     'class': 'hero-image-desktop hidden md:block',
  20.                     'alt': (image_desktop.translated.alt ?: ''),
  21.                     'title': (image_desktop.translated.title ?: '')
  22.                 }
  23.             } %}
  24.             {% sw_thumbnails 'cms-image-thumbnails' with {
  25.                 media: image_mobile,
  26.                 attributes: {
  27.                     'class': 'hero-image-mobile md:hidden',
  28.                     'alt': (image_desktop.translated.alt ?: ''),
  29.                     'title': (image_desktop.translated.title ?: '')
  30.                 }
  31.             } %}
  32.         </div>
  33.         {% block hero_background_placeholder %}
  34.             <div class="hidden background-placeholder absolute inset-0 bg-[#000000]/[.3]"></div>
  35.         {% endblock %}
  36.         {% block element_hero_content %}
  37.             <div class="absolute top-0 left-0 w-full h-full p-4 flex flex-col justify-end {% if element.config.text_color.value %} text-grey-600 {% else %} text-white #{!important} {% endif %} md:justify-center md:px-8">
  38.                 <div class="w-full h-full boxed-layout flex flex-col justify-end md:justify-center">
  39.                     {% if element.config.subtitle.value %}
  40.                         <div class="hero-label font-bold text-sm font-accent tracking-wider md:text-base">
  41.                             {{ element.config.subtitle.value }}
  42.                         </div>
  43.                     {% endif %}
  45.                     {% if element.config.title.value %}
  46.                         <h1 class="hero-title font-display font-bold text-4xl tracking-tight md:text-6xl mt-2 -ml-0 md:-ml-1">
  47.                             {{ element.config.title.value }}
  48.                         </h1>
  49.                     {% endif %}
  51.                     {% if element.config.text.value %}
  52.                         <div class="hero-description font-body text-sm max-w-[600px] md:text-base mt-2">
  53.                             {{ element.config.text.value }}
  54.                         </div>
  55.                     {% endif %}
  56.                     {% if element.config.button.value.active and not heroUrlActive %}
  57.                         <span>
  58.                         <a class="{% if elongated %} btn-link {% else %}btn rounded-sm {{ element.config.button.value.type }}{% endif %} tracking-wider mt-2 md:max-w-fit z-50"
  59.                            href="{{ element.config.button.value.url }}"
  60.                            {% if element.config.button.value.newtab %}target="_blank"{% endif %}>
  61.                             {{ element.config.button.value.text }}
  62.                             {% if not elongated %}
  63.                                 <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
  64.                                      stroke-width="1.5"
  65.                                      stroke="currentColor" class="w-4 h-4">
  66.                                     <path stroke-linecap="round" stroke-linejoin="round"
  67.                                           d="M8.25 4.5l7.5 7.5-7.5 7.5"/>
  68.                                 </svg>
  69.                             {% endif %}
  70.                         </a>
  71.                             </span>
  72.                     {% endif %}
  73.                 </div>
  74.             </div>
  75.         {% endblock %}
  76.     </div>
  77.     {% if element.config.hero_url.value %}
  78.         </a>
  79.     {% endif %}
  80. {% endblock %}