templates/areas/portal-banner/view.html.twig line 1

Open in your IDE?
  1. <!-- Hero Section -->
  2. {% set device = pimcore_device('desktop') %}
  3. <div id="hero" class="has-image extra-background-topHome">
  4.     <div id="hero-styles">
  5.         <div id="hero-caption" class="content-max-width">
  6.             <div class="inner">
  7.                 <!-- <div class="hero-arrow"><i class="arrow-icon"></i></div> -->
  8.                 <!-- <div class="hero-subtitle">
  9.                                             <span>Digital</span><span>Creative Agency</span>
  10.                                           </div> -->
  11.                 <div class="hero-title-wrapper">
  12.                     <div class="hero-title">
  13.                         {% if editmode %}
  14.                         {{pimcore_textarea('HeroTitle',{
  15.                         "placeholder":"Hero Title"
  16.                         })}}
  17.                         {% else %}
  18.                         <h1>
  19.                             {{pimcore_textarea('HeroTitle').getText() | raw}}</h1>
  21.                         {% endif %}
  24.                     </div>
  25.                 </div>
  26.             </div>
  27.         </div>
  28.         <div id="hero-footer">
  29.             <div class="hero-footer-right">
  30.                 <div class="button-wrap right scroll-down">
  31.                     <div class="icon-wrap parallax-wrap">
  32.                         <div class="button-icon parallax-element">
  33.                             <i class="fa fa-angle-down"></i>
  34.                         </div>
  35.                     </div>
  36.                     <div class="button-text sticky right">
  37.                         <span data-hover="Scroll Down">Scroll Down</span>
  38.                     </div>
  39.                 </div>
  40.             </div>
  41.         </div>
  42.         <div id="hero-description" class="content-max-width">
  43.             <div class="inner">
  44.                 <div class="one_half"></div>
  45.                 <div class="one_half last">
  46.                     <div class="hero-text">
  47.                         <p>
  48.                             <span>{{pimcore_textarea('HeroDescription',{
  49.                                 "placeholder":"Hero Description"
  50.                                 })|nl2br}}
  51.                             </span>
  52.                         </p>
  53.                     </div>
  54.                     <br />
  56.                     {% if editmode %}
  58.                     {{pimcore_link('ReadMoreLink')}}
  59.                     {% else %}
  60.                     {% set link = pimcore_link('ReadMoreLink') %}
  61.                     {% if link.getText() != "" %}
  62.                     <div class="button-wrap right button-link large-btn has-animation">
  63.                         <div class="icon-wrap parallax-wrap">
  64.                             <div class="button-icon parallax-element">
  65.                                 <i class="fa-solid fa-arrow-right"></i>
  66.                             </div>
  67.                         </div>
  72.                         <a class="ajax-link" href="{{link.getHref()}}" data-type="page-transition">
  73.                             <div class="button-text sticky right">
  74.                                 <span data-hover="Read More">{{link.getText()}}</span>
  75.                             </div>
  76.                         </a>
  78.                     </div>
  79.                     {% endif %}
  80.                     {% endif %}
  81.                 </div>
  82.             </div>
  83.         </div>
  84.     </div>
  85. </div>
  87. {% set select_option = pimcore_select("valid_for", {
  88. width: 110,
  89. reload: true,
  90. store: [
  91. ["Image", "Image"],
  92. ["Video", "Video"]
  94. ],
  95. class: 'align-middle'
  96. })
  97. %}
  98. {% set option = select_option.getData() %}
  100. {% if option is empty or option == '' %}
  101. {% set option = 'Image' %}
  102. {% endif %}
  104. {% if editmode %}
  105. <div class="mb-3 videoImageselect">
  106.     <span class="editmode-label align-middle ">Options:</span>
  107.     {{ select_option|raw }}
  108. </div>
  109. {% endif %}
  112. {% if editmode %}
  113. {% if option == "Video" %}
  115. {{" Desktop Video "}}
  116. {{ pimcore_video('spotlightVideo' ,{
  117. width:500,
  118. height:250,
  119. })
  120. }}
  122. </br></br></br>
  124. {{" Mobile Video "}}
  126. {{ pimcore_video('spotlightVideoMobile' ,{
  127. width:300,
  128. height:500,
  129. })
  130. }}
  131. {% else %}
  132. {{ pimcore_image("myImage",
  133. {
  134. thumbnail: '',
  135. "title": "Drag spotlight banner image here",
  137. }
  138. ) }}
  139. {% endif %}
  141. {% endif %}
  142. <div id="hero-image-wrapper">
  143.     <div id="hero-background-layer" class="parallax-scroll-image">
  145.         {% if not editmode %}
  146.         {% if option == 'Image' %}
  148.         <div id="hero-bg-image" style="background-image: url({{ pimcore_image('myImage').getSrc() }})"></div>
  149.         {% else %}
  150.         <div id="hero-bg-image">
  151.             {% if device.isPhone() %}
  152.             <video autoplay muted loop playsinline id="centricSpotlight"
  153.                 poster="{{ pimcore_video('spotlightVideoMobile').getData().poster }}">
  154.                 <source src="{{ pimcore_video('spotlightVideoMobile').getData().path }}" type="video/mp4" />
  155.             </video>
  157.             {% else %}
  159.             {# {{ pimcore_video('spotlightVideo', {
  160.             thumbnail: 'content',
  161.             attributes: {
  162.             'controls': '',
  163.             'autoplay':'true',
  164.             'loop':'true',
  165.             'muted':'',
  166.             'preload': 'auto',
  167.             'playsinline':'true',
  168.             'class': '',
  169.             'id':'centricSpotlight',
  170.             }
  171.             })
  172.             }} #}
  174.             <video autoplay muted loop playsinline id="centricSpotlight"
  175.                 poster="{{ pimcore_video('spotlightVideo').getData().poster }}">
  176.                 <source src="{{ pimcore_video('spotlightVideo').getData().path }}" type="video/mp4" />
  177.             </video>
  179.             {% endif %}
  180.         </div>
  181.         {% endif %}
  182.         {% endif %}
  186.     </div>
  187. </div>
  188. <!--/Hero Section -->