templates/components/image-text-section.html.twig line 1

Open in your IDE?
  1. {% set linkIsDefined = link is defined %}
  2. {% set buttonIsDefined = button is defined %}
  3. {% set externalLinkDefined = externalLink is defined and externalLink %}
  5. <div class="image-text-section mt-3 mb-5 my-md-3 {{ backgroundColorClass ?? '' }}">
  6.     <div class="container py-3 py-md-5">
  7.         <div class="row gx-0 gx-lg-5">
  8.             <div class="col-12 col-lg-6 order-2 order-lg-{{ order.text ?? '1' }}">
  9.                 {% if (link.enabled|default(false)) %}
  10.                 <div class="d-flex flex-column justify-content-between h-100">
  11.                 {% endif %}
  12.                 <div>
  13.                     {% if (title is defined) %}
  14.                     <h2 class="mb-3 mb-md-5 point {{ darkPoint|default(false) ? 'dark' : 'light' }}">{{ title }}</h2>
  15.                     {% endif %}
  16.                     <div class="mb-4 {{ title is not defined ? 'teaser-text' : '' }}">{{ text|raw }}</div>
  17.                 </div>
  18.                 {% if (buttonIsDefined) %}
  19.                     {% if (button.withIcon is defined and button.withIcon) %}
  20.                         {{ include('@components/button-with-icon.html.twig', {
  21.                             text: button.text,
  22.                             link: {
  23.                                 href: button.link,
  24.                                 external: externalLinkDefined
  25.                             },
  26.                             order: {
  27.                                 text: button.order.text|default('1'),
  28.                                 icon: button.order.icon|default('2')
  29.                             }
  30.                         }) }}
  31.                     {% else %}
  32.                         {{ include('@components/button.html.twig', {
  33.                             text: button.text,
  34.                             link: {
  35.                                 href: button.link|default('#')
  36.                             },
  37.                         }) }}
  38.                     {% endif %}
  39.                 {% endif %}
  40.                 {% if (linkIsDefined) %}
  41.                     {{ include('@components/link.html.twig', {
  42.                         link: link.link|default('#'),
  43.                         text: link.text|default('')
  44.                     }) }}
  45.                 {% endif %}
  46.                 {% if (link.enabled|default(false)) %}
  47.                 </div>
  48.                 {% endif %}
  49.             </div>
  50.             <div class="col-12 col-lg-6 mb-4 mb-lg-0 order-1 order-lg-{{ order.image ?? '2' }}">
  51.             {% if (imageIsIcon is defined and imageIsIcon) %}
  52.                 {% if image is defined and image %}
  53.                     <img style="width: 14rem; height: 14rem;" class="d-block mx-auto" src="{{ image }}" alt="">
  54.                 {% endif %}
  55.             {% elseif (imageAsBackground is defined and imageAsBackground) %}
  56.                 <div class="ratio ratio16x9 position-relative" style="height: 20rem">
  57.                     <div class="image position-absolute w-100 h-100 top-0" style="background-image: url('{{image}}'); background-size: cover; background-position: center; background-repeat: no-repeat"></div>
  58.                 </div>
  59.             {% else %}
  60.                 {% if image %}
  61.                     <img class="d-block w-100" src="{{ image }}" alt="">
  62.                 {% endif %}
  63.             {% endif %}
  64.             </div>
  65.         </div>
  66.     </div>
  67. </div>