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

Open in your IDE?
  1. {% if editmode %}
  2.     <div style="height: 120px"></div> {# navbar overlapping #}
  3.     <div class="editmode-box editmode-box--info mb-5 text-left">
  4.         <div class="editmode-box__header">Settings</div>
  5.         <div>
  6.             <label>
  7.                 Background Image
  8.             </label>
  9.             {{ pimcore_relation('backgroundImage', {'reload': true}) }}
  10.         </div>
  11.         <div class="mt-2">
  12.             <label>
  13.                 Mobile Background Image (optional)
  14.             </label>
  15.             {{ pimcore_relation('backgroundImageMobile') }}
  16.         </div>
  17.     </div>
  18. {% endif %}
  19. {% set bgImageSrc = '' %}
  20. {% set bgImageSrcMobile = '' %}
  21. {% set description = '' %}
  22. {% if not pimcore_relation('backgroundImage').empty %}
  23.     {% set description = getImageDescription(pimcore_relation('backgroundImage').element) %}
  24. {% endif %}
  25. {% if not pimcore_relation('backgroundImage').empty %}
  26.     {% set bgImageSrc = pimcore_relation('backgroundImage').element.thumbnail('hero--full-height') %}
  27.     {% do pimcore_placeholder('backgroundImage').set(bgImageSrc) %}
  28.     {% set bgImageSrcMobile = pimcore_relation('backgroundImage').element.thumbnail('hero--full-height--xs') %}
  29.     {% do pimcore_placeholder('backgroundImageMobile').set(bgImageSrcMobile) %}
  30. {% endif %}
  31. {% if not pimcore_relation('backgroundImageMobile').empty %}
  32.     {% set bgImageSrcMobile = pimcore_relation('backgroundImageMobile').element.thumbnail('hero--full-height--xs') %}
  33.     {% do pimcore_placeholder('backgroundImageMobile').set(bgImageSrcMobile) %}
  34. {% endif %}
  35. {% do elements_opengraph().addImage(bgImageSrc) %}
  36. <div class="hero-full-height {{ styleModifier|default('') }}" title="{{ description }}">
  37.     <div class="hero-full-height__bg"
  38.          style='background-image: url("{{ bgImageSrc|raw }}"); --image-src: url({{ bgImageSrc|raw }}); --image-src-xs: url({{ bgImageSrcMobile|raw }});'>
  40.         <div class="hero-full-height__content {{ contentStyleModifier | default(null) }}">
  41.             {% if logo|default(null) %}
  42.                 <div class="container container-sm">
  43.                     {#  logo is needed for mudaba  #}
  44.                     <div class="text-left">
  45.                         {{ pimcore_image('mudaba-logo', {
  46.                             thumbnail: 'hero-full-height-logo',
  47.                             class: 'hero-full-height__brand img-fluid'
  48.                         }) }}
  49.                     </div>
  50.                 </div>
  51.             {% endif %}
  53.             <div class="container">
  54.                 {% if editmode or not pimcore_input('subtitle').empty %}
  55.                     <div class="hero-full-height__sub-title">
  56.                         {{ pimcore_input('subtitle') }}
  57.                     </div>
  58.                 {% endif %}
  60.                 {% if isNotPortal|default(null) %}
  61.                     <h2 class="hero-full-height__custom-title">
  62.                         {{ pimcore_input('headline', {'required': true}) }}
  63.                     </h2>
  64.                 {% else %}
  65.                     <h1 class="hero-full-height__title  {{ pimcore_input('headline').data | length > 14 ? 'hero-full-height__title--long' : '' }}">
  66.                         {{ pimcore_input('headline', {'required': true}) }}
  67.                     </h1>
  68.                 {% endif %}
  70. {#                <h1>#}
  71. {#                    <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 1457 168">#}
  72. {#                        <defs>#}
  73. {#                            <linearGradient id="hero-headline-a" x1="50%" x2="50%" y1="26.74%" y2="80.165%">#}
  74. {#                                <stop offset="0%" stop-color="#EEE"/>#}
  75. {#                                <stop offset="100%" stop-color="#FFF" stop-opacity="0"/>#}
  76. {#                            </linearGradient>#}
  77. {#                        </defs>#}
  78. {#                        <text fill="url(#hero-headline-a)" dominant-baseline="middle" text-anchor="middle" textLength='1457' class="hero-full-height__title"  font-size="140" font-weight="bold" letter-spacing="17.5">#}
  79. {#                            <tspan x="50%" y="133">{{ pimcore_input('headline', {'required': true}) }}</tspan>#}
  80. {#                        </text>#}
  81. {#                    </svg>#}
  82. {#                </h1>#}
  84.                 {% if editmode %}
  85.                     <span class="alert alert-danger">required</span><br>
  86.                 {% endif %}
  88.                 {% if editmode or not pimcore_link('headerimagelink').empty %}
  89.                     <div class="text-center mt-md-5 mt-3">
  90.                         {{ pimcore_link('headerimagelink', { class: 'btn btn-primary-light' }) }}
  91. {#                        <a href="{{ pimcore_link('headerimagelink').href }}" target="{{ pimcore_link('headerimagelink').target|default('_self') }}" class="">{{ pimcore_link('headerimagelink').text }}</a>#}
  92.                     </div>
  93.                 {% endif %}
  95.             </div>
  96.         </div>
  98.     </div>
  99. </div>