templates/Content/includes/hero.html.twig line 1

Open in your IDE?
  1. {% if editmode or not pimcore_image('hero').empty %}
  2.     <div class="hero {{ not pimcore_date('hero-countdown-dates').empty ? 'hero-has-shadow' : '' }}">
  3.         {% if editmode or not pimcore_image('hero-badge').empty %}
  4.             <div class="hero__content">
  5.                 <div class="container">
  6.                     <div class="hero__decorative-badge-wrapper">
  7.                         <div class="embed-responsive embed-responsive-1by1 hero__decorative-badge">
  8.                             {{ include('Includes/editableImageHelper.html.twig', {
  9.                                 name: 'hero-badge',
  10.                                 class: 'embed-responsive-item js-lazy-img',
  11.                                 lowQualityPlaceholder: true,
  12.                                 thumbnail: "hero-decorative-badge",
  13.                             }) }}
  14.                         </div>
  15.                     </div>
  16.                 </div>
  17.             </div>
  18.         {% endif %}
  20.         {% if decorativeBadge|default(false) and not editmode and not pimcore_link('hero-badge-link').empty %}
  21.             {{ pimcore_link('hero-badge-link', {
  22.                 class: 'hero__link-badge'
  23.             }) }}
  24.         {% endif %}
  26.         {% if not pimcore_image('hero').empty %}
  27.             {% set description = getImageDescription(pimcore_image('hero').image) %}
  28.         {% endif %}
  30.         <figure class="hero__image embed-responsive hero__embed">
  31.             {{ include('Includes/editableImageHelper.html.twig', {
  32.                 name: 'hero',
  33.                 thumbnail: 'hero',
  34.                 class: 'embed-responsive-item',
  35.                 lowQualityPlaceholder: true,
  36.                 printTwiceLowQAndNoLowQPlaceholder: true,
  37.             }) }}
  38.         </figure>
  39.     
  40.         <div class="hero__content text-center">
  41.             
  42.             {% if not pimcore_input('hero-countdown-title').empty or not pimcore_input('hero-countdown-subtitle').empty and not pimcore_date('hero-countdown-dates').empty %}
  43.                 <div class="hero__title-block">
  44.                     <div class="hero__title">{{ pimcore_input('hero-countdown-title').data }}</div>
  45.                     <div class="hero__subtitle">{{ pimcore_input('hero-countdown-subtitle').data }}</div>
  46.                 </div>
  47.             {% endif %}
  48.     
  49.     
  50.             {% if not pimcore_date('hero-countdown-dates').empty %}
  51.                 <div class="countdown-height-wrapper">
  52.                     <div class="countdown js-countdown" data-countdown-enddate="{{ pimcore_date('hero-countdown-dates').data.format('Y-m-d') }} {{ getTimeOfDay(pimcore_numeric('hero-countdown-hour').data ?: 0, pimcore_numeric('hero-countdown-minute').data ?: 0, pimcore_numeric('hero-countdown-second').data ?: 0) }}" hidden>
  53.                         <div class="countdown-wrapper">
  54.                             <div class="countdown__item">
  55.                                 <span class="countdown__item-figure js-countdown__days"></span>
  56.                                 <div class="countdown__item-text">{{ 'hero.countdown.days'|trans }}</div>
  57.                             </div>
  58.                             <div class="countdown__item">
  59.                                 <span class="countdown__item-figure js-countdown__hours"></span>
  60.                                 <div class="countdown__item-text">{{ 'hero.countdown.hours'|trans }}</div>
  61.                             </div>
  62.                             <div class="countdown__item">
  63.                                 <span class="countdown__item-figure js-countdown__minutes"></span>
  64.                                 <div class="countdown__item-text">{{ 'hero.countdown.minutes'|trans }}</div>
  65.                             </div>
  66.                             <div class="countdown__item">
  67.                                 <span class="countdown__item-figure js-countdown__seconds"></span>
  68.                                 <div class="countdown__item-text">{{ 'hero.countdown.seconds'|trans }}</div>
  69.                             </div>
  70.                         </div>
  71.                         {% if not pimcore_input('hero-countdown-subtitle').empty %}
  72.                             <div class="countdown__finished-text js-countdown__finished hide">{{ pimcore_input('hero-countdown-finished').data }}</div>
  73.                         {% endif %}
  74.                     </div>
  75.                 </div>
  76.                
  77.             {% endif %}
  78.         </div>
  79.        
  80.     </div>
  82.     {% if decorativeBadge|default(false) and editmode %}
  83.         <div class="editmode-box editmode-box--info">
  84.             <div class="editmode-box__header">Hero Settings</div>
  85.             <label>Link Badge: </label>{{ pimcore_link('hero-badge-link') }}
  86.         </div>
  87.     {% endif %}
  88.      {% embed 'Includes/editmode-settings.html.twig' %}
  89.             {% block additionalInfo %}
  90.                 <div>
  91.                     Title: {{ pimcore_input('hero-countdown-title') }}
  92.                     Subtitle: {{ pimcore_input('hero-countdown-subtitle') }}
  93.                     Countdown-Enddate:
  94.                     {{ pimcore_date('hero-countdown-dates', {
  95.                         'format': 'd.m.Y',
  96.                         'outputFormat': 'd.m.Y'
  97.                     }) }}
  98.                     Hour: {{ pimcore_numeric('hero-countdown-hour', {minValue: 0, maxValue: 23}) }}
  99.                     Minute: {{ pimcore_numeric('hero-countdown-minute', {minValue: 0, maxValue: 59}) }}
  100.                     Second: {{ pimcore_numeric('hero-countdown-second', {minValue: 0, maxValue: 59}) }}
  101.                     Finished Text: {{ pimcore_input('hero-countdown-finished') }}
  102.                 </div>
  103.             {% endblock %}
  104.      {% endembed %}
  105. {% endif %}