templates/includes/layout/header/page-header.html.twig line 1

Open in your IDE?
  1. <header class="page-header page-header--{{ document.getProperty('header') }}">
  3.     {% if editmode %}
  5.         <div class="page-header--image-relation">
  6.             <label>
  7.                 {{ pimcore_relations('headerSlider',{
  8.                     "types": ["asset"],
  9.                     "subtypes": {
  10.                         "asset": ["video", "image"]
  11.                     },
  12.                     "width": 600,
  13.                     "reload": "true"
  14.                 }) }}
  15.             </label>
  16.         </div>
  18.     {% endif %}
  20.     <div class="page-header--image">
  21.         {% if not pimcore_relations('headerSlider').isEmpty() %}
  22.             {% if pimcore_relations('headerSlider') | length == 1 or editmode %}
  23.                 {% set headerobject = pimcore_relations('headerSlider').getElements()[0] %}
  24.                 {% if headerobject is instanceof('\\Pimcore\\Model\\Asset\\Image') %}
  25.                     {% if document.getProperty('portal') %}
  26.                         {{ headerobject.getThumbnail('headerImagePortal').getHTML()|raw }}
  27.                     {% else %}
  28.                         {{ headerobject.getThumbnail('headerImage').getHTML()|raw }}
  29.                     {% endif %}
  30.                 {% else %}
  31.                     <video src="{{ headerobject }}" {% if not editmode %}autoplay loop muted playsinline{% endif %}></video>
  32.                 {% endif %}
  33.             {% else %}
  34.                 <section class="slider-container" aria-label="Gallery">
  35.                     <ol class="conecto-slider" data-sliderduration="{{ document.getProperty('slider-duration') is empty ? 5 : document.getProperty('slider-duration') }}">
  36.                         {% for asset in pimcore_relations('headerSlider') %}
  37.                             <li class="slide">
  38.                                 {% if document.getProperty('portal') %}
  39.                                     {{ asset.getThumbnail('headerImagePortal').getHTML({'imgAttributes': { 'loading': 'eager' }})|raw }}
  40.                                 {% else %}
  41.                                     {{ asset.getThumbnail('headerImage').getHTML({'imgAttributes': { 'loading': 'eager' }})|raw }}
  42.                                 {% endif %}
  43.                             </li>
  44.                         {% endfor %}
  45.                     </ol>
  46.                 </section>
  47.             {% endif %}
  48.         {% endif %}
  49.     </div>
  51.     {% if not editmode %}<div class="page-header--boxed">{% endif %}
  53.         {% if not editmode %}
  54.             <div class="page-header--logo">
  55.                 {% if not document.getProperty('logo') %}
  56.                     <a href="/" class="logo">{{ pimcore_website_config('page-title') }}</a>
  57.                 {% else %}
  58.                     <a href="/{{ 'mainnavStartNode'|trans }}">
  59.                         <img src="{{ document.getProperty('logo') }}" alt="logo">
  60.                     </a>
  61.                 {% endif %}
  62.             </div>
  63.             <div class="page-header--nav">
  64.                 {{ include('includes/layout/header/mainnav/mainnav.html.twig') }}
  65.             </div>
  66.         {% endif %}
  68.         {% if document.getProperty('portal') %}
  69.             <div class="page-header--cta">
  70.                 <h1>
  71.                     {{ pimcore_wysiwyg("wysiwyg", {
  72.                         uiColor: '#3fa69b',
  73.                         toolbar: [
  74.                             { name: 'basicstyles', items: [ 'Bold', 'Italic', 'Underline', ] },
  75.                             { name: 'paragraph', items: [ 'JustifyLeft', 'JustifyCenter', 'JustifyRight' ] },
  76.                             '/',
  77.                             { name: 'styles', items: [ 'FontSize' ] },
  78.                             { name: 'colors', items: [ 'TextColor', 'BGColor' ] },
  79.                             { name: 'links', items: [  'Anchor' ] },
  80.                         ]
  81.                     }) }}
  82.                 </h1>
  83.                 {{ pimcore_link('link', {
  84.                     "class": "btn"
  85.                 }) }}
  86.             </div>
  87.             <div class="page-header--widgets">
  88.                 {{ include('includes/layout/header/widgets/page-header--widgets.html.twig') }}
  89.             </div>
  90.         {% endif %}
  92.         {% if not editmode %}</div>{% endif %}
  94.     {% if not editmode %}
  95.         <div class="page-header--meta">
  96.             {{ include('includes/layout/header/metanav/page-header--metanav.html.twig') }}
  97.         </div>
  98.     {% endif %}
  100. </header>