templates/component/home_introduction.html.twig line 1

Open in your IDE?
  1. {#
  2.     component: home introduction
  4.     text {string}: Text d'introduction
  5.     firstImage {image}: Première image d'introduction
  6.         size: {
  7.             width: "480",
  8.             height: "360"
  9.         }
  10.     secondImage {image}: Deuxième image d'introduction
  11.         size: {
  12.             width: "480",
  13.             height: "550"
  14.         }
  15.     link: [{
  16.         text {string}: Texte du lien
  17.         to {string}: Lien
  18.     }]
  19. #}
  21. {% set props = {
  22.   heading: null,
  23.     text:null,
  24.     shape:{
  25.         src:null,
  26.         backgroundcolor:false
  27.     }
  28. }|merge(props|default({}))  %}
  30. <section
  31.     data-component="home-introduction" class="HomeIntroduction-component">
  34.     {# Background pattern #}
  35.     <div class="HomeIntroduction-backgroundPattern ">
  37.         {% include "component/waves.html.twig"  with {
  38.                 props: {
  39.                     speed:0.1,
  40.                     shape:props.shape
  41.                 }
  42.         } %}
  44.     </div>
  46.     <div class="l-container">
  48.         <div
  49.             class="l-row">
  51.             {# Heading #}
  52.             {% include "component/heading.html.twig" with {
  53.                 props: props.heading
  54.             } %}
  56.         </div>
  58.         <div class="l-row HomeIntroduction-firstContent">
  60.             <div class="l-column HomeIntroduction-firstImage">
  62.                 {# 1st image #}
  63.                 {% include "component/image.html.twig" with {
  64.                     props: props.firstImage
  65.                 } %}
  66.                 
  67.                 {# Exemple of pictrue with webp src #}
  68.                 {# {% if props.firstImage %}
  69.                     {% include "component/picture.html.twig" with {
  70.                             props: props.firstImage|merge({
  71.                                 srcWebp: (props.firstImage.src) ? asset(props.firstImage.src | imagine_filter('convert_img_to_webp')) : ''
  72.                             })
  73.                     } %}
  74.                 {% endif %} #}
  76.             </div>
  78.         </div>
  80.         <div
  81.             class="l-row HomeIntroduction-secondContent">
  83.             {# Main #}
  84.             <div
  85.                 class="l-column HomeIntroduction-main">
  87.                 {# Text #}
  88.                 <div class="HomeIntroduction-wysiwyg">
  90.                     {% include "component/wysiwyg.html.twig" with {
  91.                         props: {
  92.                             content: props.text
  93.                         }
  94.                     } %}
  96.                 </div>
  98.                 {% if props.link is defined %}
  99.                     {# Button #}
  100.                     <div class="HomeIntroduction-button">
  102.                         {% include "component/button.html.twig" with {
  103.                         props: props.link
  104.                     } %}
  106.                     </div>
  107.                 {% endif %}
  109.             </div>
  111.             <div
  112.                 class="l-column HomeIntroduction-secondImage">
  114.                 {# 2nd image #}
  115.                 {% include "component/image.html.twig" with {
  116.                     props: props.secondImage
  117.                 } %}
  118.                 {# Exemple of pictrue with webp src #}
  119.                 {# {% if props.secondImage %}
  120.                     {% include "component/picture.html.twig" with {
  121.                             props: props.secondImage|merge({
  122.                                 srcWebp: (props.secondImage.src) ? asset(props.secondImage.src | imagine_filter('convert_img_to_webp')) : ''
  123.                             })
  124.                     } %}
  125.                 {% endif %} #}
  127.             </div>
  129.         </div>
  131.     </div>
  133. </section>