templates/component/hero_content.html.twig line 1

Open in your IDE?
  1. {#
  2.     component: hero content
  4.     title {string}: Titre
  5.     titleAnnex {string|null}: Sur titre au dessus du titre (Default: null, pas de sur titre)
  6.   background {image}:     
  7.     size: {
  8.       width: "1440",
  9.       height: "540"
  10.     }
  11.   breadcrumb {array|null}: tableau des liens du fil d'ariane (chacun contenant title, to, et text) (Default: null, pas de breadcrumb)
  12. #}
  14. {% set props = {
  15.     heading: null,
  16.     video:null,
  17.     background: null,
  18.     breadcrumb: null
  19. }|merge(props|default({}))  %}
  21. <section data-component="hero-content" class="HeroContent-component">
  23.     <div class="l-container u-fh">
  25.         <div class="l-row u-fh">
  27.             <div
  28.                 class="l-column HeroContent-wrapper">
  30.                 {# Background #}
  31.                 <div class="HeroContent-backgroundMedia">
  32.                     {% if not props.video %}
  33.                         {% include "component/image.html.twig" with {
  34.                             props: props.background
  35.                         } only %}
  36.                         {# {% include "component/picture.html.twig" with {
  37.                             props: props.background|merge({
  38.                                 srcWebp: (props.background.src) ? asset(props.background.src | imagine_filter('convert_img_to_webp')) : ''
  39.                             })
  40.                         } only %} #}
  41.                     {% endif %}
  43.                     {% if props.video %}
  45.                         {% include "component/image.html.twig" with {
  46.                             props: props.background
  47.                         } only %}
  48.                         {# {% include "component/picture.html.twig" with {
  49.                             props: props.background|merge({
  50.                                 srcWebp: (props.background.src) ? asset(props.background.src | imagine_filter('convert_img_to_webp')) : ''
  51.                             })
  52.                         } %} #}
  53.                         {% include "component/video.html.twig" with {
  54.                             props: props.video
  55.                         } only %}
  56.                     {% endif %}
  58.                 </div>
  60.                 {# Main #}
  61.                 <div
  62.                     class="HeroContent-main">
  64.                     {# Heading #}
  65.                     <div class="HeroContent-heading">
  67.                         {% include "component/heading.html.twig" with {
  68.               props: props.heading|merge_object({
  69.                 hLevel: '1'
  70.               })
  71.             } %}
  73.                     </div>
  75.                     {# Breadcrumb #}
  76.                     {% if props.breadcrumb %}
  78.                         <ol class="HeroContent-breadcrumb">
  80.                             {% for item in props.breadcrumb %}
  82.                                 {# Breadcrumb item #}
  83.                                 <li class="HeroContent-breadcrumbItem">
  85.                                     {% if loop.index == props.breadcrumb|length %}
  87.                                         <span>{{ item.text }}</span>
  89.                                     {% else %}
  91.                                         <a href="{{ item.to }}" title="{{ item.title }}" class="HeroContent-breadcrumbItemLink">{{ item.text }}</a>
  93.                                     {% endif %}
  95.                                 </li>
  97.                             {% endfor %}
  99.                         </ol>
  101.                     {% endif %}
  103.                 </div>
  105.             </div>
  107.         </div>
  109.     </div>
  111. </section>