templates/areas/hero/view.html.twig line 1

Open in your IDE?
  1. {% extends 'areas/hero/editables.html.twig' %}
  3. {% block view %}
  5. {% if heroType == 'big-image' %}
  6.   <section class="l-hero">
  7.     <div class="container">
  8.       <div class="row">
  9.         <div class="col">
  11.           <div class="c-hero {{componentMargin}} {% if editmode %}c-hero__editmode{% endif %} {% if heroType == 'big-image' %} c-hero__bigImage{% endif %}">
  12.             {% if heroType == 'big-image' %}
  13.               {# gradient #}
  14.               {% set gradient %}
  15.                 {% if heroGradientOpacity.number %}
  16.                   {% set opacity = heroGradientOpacity.number / 100 %}
  17.                 {% endif %}
  18.                 {% if heroShade is not defined or heroShade is null %}
  19.                   {% set heroShade = 'multi' %}
  20.                 {% endif %}
  21.                 <div class="gradient-{{heroGradient}} gradient-color-{{heroShade}}"{% if heroGradientOpacity.number %} style="--gradientOpacity: {{opacity}}; --gradientSize: {{heroGradientSize}}%"{% endif %}></div>
  22.               {% endset %}
  24.               {% if heroImageSingle.getThumbnail('content-full') != '' %}
  25.                 <div class="c-hero__image background-image js-big-image" style="background-image: url({{heroImageSingle.getThumbnail('content-full').getPath()}}); background-position: {{imagePosition|replace({'-' : ' '})}}">
  26.                   {{gradient}}
  27.                   <div class="c-hero__text">
  28.                     <div class="container">
  29.                       <div class="row">
  30.                         <div class="c-col col-xs-12 col-lg-10 e-rte">
  31.                           {{ replaceHeroVars(headline) | raw}}
  32.                         </div>
  33.                       </div>
  34.                     </div>
  35.                   </div>
  36.                   {% if document.getProperty('showBreadcrumb') %}
  37.                     <div class="c-hero__back js-hero-back-button d-none">
  38.                       {% if document.getProperty('backPage') is defined and document.getProperty('backPage') is not null %}
  39.                         <div class="c-hero__back-button" data-back="{{ document.getProperty('backPage').getFullPath() }}">{{'html.hero.backButton' | trans}}</div>
  40.                       {% else %}
  41.                         <div class="c-hero__back-button">{{'html.hero.backButton' | trans}}</div>
  42.                       {% endif %}
  43.                     </div>
  44.                   {% endif %}
  45.                 </div>
  46.               {% endif %}
  47.             {% endif %}
  48.           </div>
  49.         </div>
  50.       </div>
  51.     </div>
  52.   </section>
  53. {% else %}
  54.   <section class="l-hero"></section>
  55. {% endif %}
  56. {% endblock %}