templates/component/large_image_heading.html.twig line 1

Open in your IDE?
  1. {#
  2.     component: large image heading
  4.     heading: [{
  5.         title {string}: Titre 
  6.         titleAnnex {string}: Titre annexe 
  7.     }]
  8.     subtitle {string}: Sous-titre après le heading
  9.     content {string}: Text après l'image
  10.     image {image}: Image du contenu
  11.         size: {
  12.             width: "1200",
  13.             height: "480"
  14.         }
  15.     link: [{
  16.         text {string}: Texte du lien
  17.         to {string}: Lien
  18.     }]
  19. #}
  21. {% set props = {
  22.   heading: null,
  23.   image:null,
  24.   subtitle:null,
  25.   content:null,
  26.   link:null
  27. }|merge(props|default({}))  %}
  29. <section data-component="large-image-heading" class="LargeImageHeading-component">
  31.     <div class="l-container">
  33.         <div
  34.             class="l-row">
  36.             {# Main #}
  37.             <div
  38.                 class="l-column LargeImageHeading-main">
  40.                 {# Background image #}
  41.                 <div class="LargeImageHeading-backgroundImage  {% if props.subtitle %}has-Subtitle {% endif %} ">
  43.                     {% include "component/image.html.twig" with {
  44.                         props: props.image
  45.                     } %}
  46.                     {# {% include "component/picture.html.twig" with {
  47.                         props: props.image|merge({
  48.                             srcWebp: (props.image.src) ? asset(props.image.src | imagine_filter('convert_img_to_webp')) : ''
  49.                         })
  50.                     } %} #}
  52.                 </div>
  54.                 {# Subtitle #}
  55.                 {% if props.subtitle is defined %}
  57.                     <div class="LargeImageHeading-subtitle-container">
  59.                         <p class="LargeImageHeading-subtitle">{{ props.subtitle }}</p>
  61.                     </div>
  63.                 {% endif %}
  65.             </div>
  67.         </div>
  69.         <div
  70.             class="l-row LargeImageHeading-contentRow">
  72.             {# Content #}
  73.             <div
  74.                 class="l-column LargeImageHeading-content">
  76.                 {# Heading #}
  77.                 {% include "component/heading.html.twig" with {
  78.                     props: props.heading
  79.                 } %}
  81.             </div>
  83.         </div>
  85.         {% if props.content %}
  87.             <div class="l-row LargeImageHeading-textAttachedRow">
  89.                 {% include "component/wysiwyg.html.twig" with {
  90.                     props: {
  91.                         content: props.content
  92.                     }
  93.                 } %}
  95.             </div>
  97.             {% if props.link %}
  99.                 <div class="l-row LargeImageHeading-button">
  101.                     {% include "component/button.html.twig" with {
  102.                     props: props.link
  103.                 } %}
  105.                 </div>
  107.             {% endif %}
  109.         {% endif %}
  110.     </div>
  112. </section>