templates/component/large_image_text.html.twig line 1

Open in your IDE?
  1. {#
  2.     component: large image text
  4.     heading: [{
  5.         title {string}: Titre 
  6.         titleAnnex {string}: Titre annexe (au dessus du titre)
  7.     }]
  8.     text {string}: Texte
  9.     image {image}: Image 
  10.         size: {
  11.             width: "1320",
  12.             height: "650"
  13.         }
  14.     links: [{
  15.         text {string}: Texte du lien
  16.         to {string}: Lien
  17.     }]
  19. #}
  21. {% set props = {
  22.     heading: null,
  23.     text: null,
  24.     image: null,
  25.     links: null
  26. }|merge(props|default({}))  %}
  28. <section
  29.     data-component="large-image-text" class="LargeImageText-component">
  31.     {# Image #}
  32.     <div class="LargeImageText-image-container">
  34.         <div class="LargeImageText-image" ref="images">
  36.             {% include "component/image.html.twig" with {
  37.                 props: props.image
  38.             } %}
  39.             {# {% include "component/picture.html.twig" with {
  40.                 props: props.image|merge({
  41.                     srcWebp: (props.image.src) ? asset(props.image.src | imagine_filter('convert_img_to_webp')) : ''
  42.                 })
  43.             } %} #}
  45.         </div>
  47.     </div>
  49.     <div class="l-container">
  51.         <div class="l-row LargeImageText-row u-v-center u-end">
  53.             <div
  54.                 class="l-column LargeImageText-main">
  56.                 {# Heading #}
  57.                 {% include "component/heading.html.twig" with {
  58.                     props: props.heading
  59.                 } %}
  61.                 {# Text #}
  62.                 <div class="LargeImageText-text">
  64.                     {% include "component/wysiwyg.html.twig" with {
  65.                         props: {
  66.                             content: props.text
  67.                         }
  68.                     } %}
  70.                 </div>
  72.                 {% if props.links %}
  74.                     {# Links #}
  75.                     <div class="LargeImageText-links">
  77.                         {% for link in props.links %}
  79.                             {% include "component/button.html.twig" with {
  80.                                 props: link
  81.                             } %}
  83.                         {% endfor %}
  85.                     </div>
  87.                 {% endif %}
  89.             </div>
  91.         </div>
  93.     </div>
  95. </section>