templates/includes/heros/content-hero.html.twig line 1

Open in your IDE?
  1. {% set heroType = heroType|default('') ?: pimcore_select('heroType').data %}
  2. {% set siteConfig = getSiteConfig() %}
  3. {% embed 'includes/editmode-box.html.twig' %}
  4.     {% block editmodeSettings %}
  5.         <div class="row">
  6.             <div class="col" style="z-index: 1000">
  7.                 <b>Hero Image:</b> {{ pimcore_image('image', {
  8.                     'width': 100,
  9.                     'required': true
  10.                 }) }}
  11.             </div>
  12.             <div class="col">
  13.                 <b>Hero Type:</b><br>
  14.                 {{ pimcore_select('heroType', {
  15.                     'store': [
  16.                         [ 'standard', 'Simple Hero' ],
  17.                         [ 'fullWidth', 'Full Width' ],
  18.                         [ 'fullWidthAndBigClouds', 'Full Width + More Clouds (default)' ],
  19.                     ],
  20.                     'width': 300,
  21.                     'defaultValue': 'fullWidthAndBigClouds',
  22.                     'reload': true
  23.                 }) }}<br>
  24.             </div>
  25.             {% if heroType == 'fullWidth' or heroType == 'fullWidthAndBigClouds' %}
  26.                 <div class="col">
  27.                     {{ pimcore_checkbox('countdown', {
  28.                         'label': 'Show Countdown?',
  29.                         'reload': true
  30.                     }) }}<br>
  31.                     {% if pimcore_checkbox('countdown').checked %}
  32.                         <b>End Time <small>Format: "2023-03-21T00:00:00+0100"</small></b>
  33.                         {{ pimcore_input('countdownEndTime', {
  34.                             'label': '',
  35.                             'placeholder': '2023-03-21T00:00:00+0100'
  36.                         }) }}
  37.                     {% endif %}
  38.                 </div>
  39.             {% endif %}
  40.         </div>
  41.         {% if useUsps|default(false) %}
  42.             {{ pimcore_relations('usps', {
  43.                 'types' : [ 'object' ],
  44.                 'subtypes' : { 'object' : [ 'object' ] },
  45.                 'class': 'Usp',
  46.                 'title': 'USP Objects',
  47.                 'limit': 4
  48.             }) }}
  49.         {% endif %}
  50.     {% endblock %}
  51. {% endembed %}
  53. {% set image = image|default(false) ?: pimcore_image('image').empty ? null : pimcore_image('image') %}
  54. {% set thumbnail = getContentHeroThumb(type|default('big')) %}
  55. {% if image %}
  56.     {% do elements_opengraph().addImage(image.thumbnail(thumbnail)) %}
  57. {% else %}
  58.     {% do elements_opengraph().addImage(getSiteConfig().fallbackImage) %}
  59. {% endif %}
  60. <section class="{{ className|default('') }} content-hero {{ hasGradient|default(false) and not editmode ? 'content-hero--gradient' : '' }}" style="{{ pimcore_image('image') and pimcore_image('image').empty ? 'margin-top:200px;' : '' }}">
  61.     {% if image and (heroType == 'fullWidth' or heroType == 'fullWidthAndBigClouds') %}
  62.         <div class="content-hero__image">
  63.             <figure class="ratio {{ getContentHeroRatio(type|default('big')) }}">
  65.                 <link rel="preload" href="{{ preload(image.thumbnail(thumbnail).getAsFormat("webp"), { as: 'image', media: '(min-width:768px)' }) }}" as="image" media="(min-width:768px)">
  66.                 <link rel="preload" href="{{ preload(image.thumbnail(thumbnail).getMedia("(max-width: 767px)", 2).getAsFormat("webp"), { as: 'image', media: '(max-width:767px)' }) }}" as="image" media="(max-width:767px)">
  68.                 {{ image.thumbnail(thumbnail).getHtml({
  69.                     'imgAttributes': { 'class': 'ratio-item', 'loading': 'eager', 'data-cookieconsent': 'ignore' },
  70.                     'lowQualityPlaceholder': true
  71.                 })|raw }}
  73.                 {{ image.thumbnail(thumbnail).getHtml({
  74.                     'imgAttributes': { 'class': 'ratio-item', 'loading': 'eager', 'data-cookieconsent': 'ignore' }
  75.                 })|raw }}
  76.             </figure>
  77.             <div class="d-none d-md-block content-hero__clouds {{ heroType == 'fullWidthAndBigClouds' ? '' : 'content-hero__clouds--transparent' }} ratio ratio-hero-clouds ratio-xs-3x2">
  78.                 {% if siteConfig.clouds %}
  79.                     {{ siteConfig.clouds.thumbnail('content-hero-clouds').getHtml({
  80.                         'imgAttributes': {
  81.                             'class': 'ratio-item content-hero__clouds__img',
  82.                             'loading': 'eager'
  83.                         }
  84.                     })|raw }}
  85.                 {% endif %}
  86.             </div>
  87.             <div class="d-md-none content-hero__clouds {{ heroType == 'fullWidthAndBigClouds' ? '' : 'content-hero__clouds--transparent' }} ratio ratio-hero-clouds ratio-xs-3x2">
  88.                 {% set cloudsMobile = siteConfig.cloudsMobile ?: siteConfig.clouds %}
  89.                 {% if cloudsMobile %}
  90.                     {{ cloudsMobile.thumbnail('content-hero-clouds').getHtml({
  91.                         'imgAttributes': {
  92.                             'class': 'ratio-item content-hero__clouds__img',
  93.                             'loading': 'eager'
  94.                         }
  95.                     })|raw }}
  96.                 {% endif %}
  97.             </div>
  98.         </div>
  99.     {% elseif image %}
  100.         <div class="container--move-right pe-0">
  101.             <div class="content-hero__image--spacing">
  102.                 <figure class="ratio ratio-3x1 ratio-xs-1x1">
  103.                     {{ image.thumbnail('content-hero-small').getHtml({
  104.                         'imgAttributes': {
  105.                             'class': 'ratio-item',
  106.                             'loading': 'eager'
  107.                         },
  108.                         'lowQualityPlaceholder': true
  109.                     })|raw }}
  111.                     {{ image.thumbnail('content-hero-small').getHtml({
  112.                         'thumbnail': 'content-hero-small',
  113.                         'imgAttributes': {
  114.                             'class': 'ratio-item',
  115.                             'loading': 'eager'
  116.                         }
  117.                     })|raw }}
  118.                 </figure>
  119.             </div>
  120.         </div>
  121.     {% endif %}
  123.     <div class="container
  124.         {{ (heroType == 'fullWidth' or heroType == 'fullWidthAndBigClouds') and not editmode ? 'content-hero__body--fullwidth' : 'content-hero__body' }}
  125.         {{ (heroType == 'fullWidthAndBigClouds') and not editmode ? 'content-hero__body--fullwidth-clouds': ''  }}
  126.         {{ (heroType == 'fullWidth' or heroType == 'fullWidthAndBigClouds') and not editmode and (useUsps|default(false) or intro|default(false))  ? 'content-hero__body--fullwidth--only-desktop' : '' }}"
  127.     >
  128.         <div class="row gy-3 gy-md-0 pb-3">
  129.             <div class="col-md-6">
  131.                 {{ include('includes/title-blocks/main-title-block.html.twig', {
  132.                     'title': title|default(''),
  133.                     'topTitle': toptitle|default(''),
  134.                     'toptitleStyle': toptitleStyle|default(''),
  135.                     'toptitleLink': toptitleLink|default(''),
  136.                     'toptitleTag': toptitleTag|default('')
  137.                 }, with_context = false) }}
  139.                 {% if not hideBreadcrumbs|default(false) %}
  140.                     {{ breadcrumbHelper() }}
  141.                 {% endif %}
  143.                 {% if intro|default(false) %}
  144.                     <div class="mt-3 mt-md-80 wysiwyg">
  145.                         {{ pimcore_wysiwyg('heroIntro', { 'placeholder': 'Intro Text' }) }}
  146.                     </div>
  147.                 {% endif %}
  148.             </div>
  149.             {% if pimcore_checkbox('countdown') and pimcore_checkbox('countdown').checked() %}
  150.                 <div class="col-md-6">
  151.                     <h3 class="title-block__top-title">
  152.                         {{ pimcore_input('countdownHeadline', { 'placeholder': 'Überschrift' })}}
  153.                     </h3>
  154.                     {{ include('includes/content/countdown.html.twig', { 'endTime': pimcore_input('countdownEndTime') }) }}
  155.                 </div>
  156.             {% endif %}
  157.             {% if useUsps|default(false) and not pimcore_relations('usps').empty %}
  158.                 <div class="col-12">
  159.                     <div class="row g-3 mt-5 mt-md-80">
  160.                         {% for usp in pimcore_relations('usps').elements %}
  161.                             <div class="col-6 col-md-3">
  162.                                 {{ include('includes/content/usp-item.html.twig', {
  163.                                     'usp': usp
  164.                                 }, with_context = false) }}
  165.                             </div>
  166.                         {% endfor %}
  167.                     </div>
  168.                 </div>
  169.             {% endif %}
  170.         </div>
  171.     </div>
  172. </section>