templates/document/home_page/default.html.twig line 25

Open in your IDE?
  1. {% extends 'layout/default.html.twig' %}
  3. {% block contentBlock %}
  5.     <main class="mainHomepage h-100 d-flex flex-column justify-content-center">
  6.         <video autoplay muted loop class="mainHomepageBackgroundVideo">
  7.             <source src="{{ asset('static/images/video/portal_loop.mp4') }}" type="video/mp4">
  8.         </video>
  9.         <div class="container mainHomepage-container-content">
  10.             <div class="row">
  11.                 <div class="col-lg-12 text-center">
  12.                     <h1 class="text-white">
  13.                         {{  pimcore_wysiwyg("homepageHeading", {
  14.                                 "height": 100
  15.                             })
  16.                         }}
  17.                     </h1>
  18.                 </div>
  19.             </div>
  21.             <div class="row mt-5 mt-lg-5 mt-md-5">
  22.                <div class="col-lg-3 col-md-6 col-sm-12 mb-md-5 mb-lg-0">
  23.                    {% if not editmode %}
  24.                         <div class="flip-card d-none d-md-block">
  25.                             <a href="{{ pimcore_link('linkFrontCard-1').getHref() }}">
  26.                                 <div class="flip-card-inner">
  27.                                     <div class="flip-card-front">
  28.                                         <img src="{{ pimcore_image('imageFrontCard-1').getThumbnail('Stoelting_homepage_circle') }}" alt="{{ pimcore_image('imageFrontCard-1').getAlt() }}">
  29.                                     </div>
  32.                                     <div class="flip-card-back">
  33.                                         <img src="{{ pimcore_image('imageBackCard-1').getThumbnail('Stoelting_homepage_circle') }}" alt="{{ pimcore_image('imageBackCard-1').getAlt() }}">
  34.                                     </div>
  35.                                 </div>
  36.                             </a>
  37.                             <h4 class="text-white text-center mt-4 mt-lg-4 mt-md-4">{{ pimcore_input("cartText-1") }}</h4>
  38.                         </div>
  40.                         <div class="flip-card-mobile d-flex justify-content-center flex-column align-items-center d-md-none mt-n3 mt-lg-0 mt-md-0">
  41.                             <a href="{{ pimcore_link('linkFrontCard-1').getHref() }}">
  43.                             <div class="flip-card-back-mobile">
  44.                                 <img src="{{ pimcore_image('imageBackCard-1').getThumbnail('Stoelting_homepage_circle') }}" alt="{{ pimcore_image('imageBackCard-1').getAlt() }}">
  45.                             </div>
  47.                             </a>
  48.                             <h4 class="text-white text-center mt-4 mt-lg-4 mt-md-4">{{ pimcore_input("cartText-1") }}</h4>
  49.                         </div>
  51.                     {% else %}
  52.                         <div class="edit-flip-card">
  53.                             <div class="text-white">
  54.                                 {{ pimcore_link('linkFrontCard-1') }}
  55.                             </div>
  57.                             <div class="edit-flip-card-front">
  58.                                 <div class="set-center">
  59.                                     {{ pimcore_image('imageFrontCard-1') }}
  60.                                 </div>
  62.                                 <img src="{{  pimcore_image('imageFrontCard-1').isEmpty() ? asset('static/images/admin/empty_image2x.png') : pimcore_image('imageFrontCard-1').getThumbnail('Stoelting_homepage_circle') }}" alt="{{ pimcore_image('imageFrontCard-1').getAlt() }}">
  63.                             </div>
  64.                             <div class="edit-flip-card-back">
  65.                                 <div class="set-center">
  66.                                     {{ pimcore_image('imageBackCard-1') }}
  67.                                 </div>
  69.                                 <img src="{{ pimcore_image('imageBackCard-1').isEmpty() ? asset('static/images/admin/empty_image2x.png') : pimcore_image('imageBackCard-1').getThumbnail('Stoelting_homepage_circle') }}" alt="{{ pimcore_image('imageBackCard-1').getAlt() }}">
  70.                             </div>
  71.                         </div>
  72.                         <h4 class="text-white text-center mt-4 mt-lg-4 mt-md-4">{{ pimcore_input("cartText-1") }}</h4>
  73.                     {% endif %}
  74.                </div>
  76.                <div class="col-lg-3 col-md-6 col-sm-12">
  77.                     {% if not editmode %}
  78.                          <div class="flip-card mt-6 mt-lg-0 mt-md-0 d-none d-md-block">
  79.                              <a href="{{ pimcore_link('linkFrontCard-2').getHref() }}">
  80.                                  <div class="flip-card-inner">
  81.                                      <div class="flip-card-front">
  82.                                          <img src="{{ pimcore_image('imageFrontCard-2').getThumbnail('Stoelting_homepage_circle') }}" alt="{{ pimcore_image('imageFrontCard-2').getAlt() }}">
  83.                                      </div>
  86.                                      <div class="flip-card-back">
  87.                                          <img src="{{ pimcore_image('imageBackCard-2').getThumbnail('Stoelting_homepage_circle') }}" alt="{{ pimcore_image('imageBackCard-2').getAlt() }}">
  88.                                      </div>
  89.                                  </div>
  90.                              </a>
  91.                              <h4 class="text-white text-center mt-4 mt-lg-4 mt-md-4">{{ pimcore_input("cartText-2") }}</h4>
  92.                          </div>
  94.                          <div class="flip-card-mobile d-flex justify-content-center flex-column align-items-center d-md-none">
  95.                             <a href="{{ pimcore_link('linkFrontCard-2').getHref() }}">
  97.                             <div class="flip-card-back-mobile">
  98.                                 <img src="{{ pimcore_image('imageBackCard-2').getThumbnail('Stoelting_homepage_circle') }}" alt="{{ pimcore_image('imageBackCard-2').getAlt() }}">
  99.                             </div>
  101.                             </a>
  102.                             <h4 class="text-white text-center mt-4 mt-lg-4 mt-md-4">{{ pimcore_input("cartText-2") }}</h4>
  103.                         </div>
  104.                      {% else %}
  105.                          <div class="edit-flip-card">
  106.                              <div class="text-white">
  107.                                  {{ pimcore_link('linkFrontCard-2') }}
  108.                              </div>
  110.                              <div class="edit-flip-card-front">
  111.                                  <div class="set-center">
  112.                                      {{ pimcore_image('imageFrontCard-2') }}
  113.                                  </div>
  115.                                  <img src="{{ pimcore_image('imageFrontCard-2').isEmpty() ? asset('static/images/admin/empty_image2x.png') : pimcore_image('imageFrontCard-2').getThumbnail('Stoelting_homepage_circle') }}" alt="{{ pimcore_image('imageFrontCard-2').getAlt() }}">
  116.                              </div>
  117.                              <div class="edit-flip-card-back">
  118.                                  <div class="set-center">
  119.                                      {{ pimcore_image('imageBackCard-2') }}
  120.                                  </div>
  121.                                  <img src="{{ pimcore_image('imageBackCard-2').isEmpty() ? asset('static/images/admin/empty_image2x.png') : pimcore_image('imageBackCard-2').getThumbnail('Stoelting_homepage_circle') }}" alt="{{ pimcore_image('imageBackCard-2').getAlt() }}">
  122.                              </div>
  123.                          </div>
  124.                          <h4 class="text-white text-center mt-4 mt-lg-4 mt-md-4">{{ pimcore_input("cartText-2") }}</h4>
  125.                      {% endif %}
  126.                 </div>
  128.                 <div class="col-lg-3 col-md-6 col-sm-12">
  129.                     {% if not editmode %}
  130.                             <div class="flip-card mt-6 mt-lg-0 mt-md-6 d-none d-md-block">
  131.                                 <a href="{{ pimcore_link('linkFrontCard-3').getHref() }}">
  132.                                     <div class="flip-card-inner">
  133.                                         <div class="flip-card-front">
  134.                                             <img src="{{ pimcore_image('imageFrontCard-3').getThumbnail('Stoelting_homepage_circle') }}" alt="{{ pimcore_image('imageFrontCard-3').getAlt() }}">
  135.                                         </div>
  138.                                         <div class="flip-card-back">
  139.                                             <img src="{{ pimcore_image('imageBackCard-3').getThumbnail('Stoelting_homepage_circle') }}" alt="{{ pimcore_image('imageBackCard-3').getAlt() }}">
  140.                                         </div>
  141.                                     </div>
  142.                                 </a>
  143.                                 <h4 class="text-white text-center mt-4 mt-lg-4 mt-md-4">{{ pimcore_input("cartText-3") }}</h4>
  144.                             </div>
  146.                             <div class="flip-card-mobile d-flex justify-content-center flex-column align-items-center d-md-none">
  147.                             <a href="{{ pimcore_link('linkFrontCard-3').getHref() }}">
  149.                             <div class="flip-card-back-mobile">
  150.                                 <img src="{{ pimcore_image('imageBackCard-3').getThumbnail('Stoelting_homepage_circle') }}" alt="{{ pimcore_image('imageBackCard-3').getAlt() }}">
  151.                             </div>
  153.                             </a>
  154.                             <h4 class="text-white text-center mt-4 mt-lg-4 mt-md-4">{{ pimcore_input("cartText-3") }}</h4>
  155.                         </div>
  156.                         {% else %}
  157.                             <div class="edit-flip-card">
  158.                                 <div class="text-white">
  159.                                     {{ pimcore_link('linkFrontCard-3') }}
  160.                                 </div>
  162.                                 <div class="edit-flip-card-front">
  163.                                     <div class="set-center">
  164.                                         {{ pimcore_image('imageFrontCard-3') }}
  165.                                     </div>
  166.                                     {% if pimcore_image('imageFrontCard-3').isEmpty() %}
  168.                                     {% endif %}
  169.                                     <img src="{{ pimcore_image('imageFrontCard-3').isEmpty() ? asset('static/images/admin/empty_image2x.png') : pimcore_image('imageFrontCard-3').getThumbnail('Stoelting_homepage_circle') }}" alt="{{ pimcore_image('imageFrontCard-3').getAlt() }}">
  170.                                 </div>
  171.                                 <div class="edit-flip-card-back">
  172.                                     <div class="set-center">
  173.                                         {{ pimcore_image('imageBackCard-3') }}
  174.                                     </div>
  175.                                     <img src="{{ pimcore_image('imageBackCard-3').isEmpty() ? asset('static/images/admin/empty_image2x.png') : pimcore_image('imageBackCard-3').getThumbnail('Stoelting_homepage_circle') }}" alt="{{ pimcore_image('imageBackCard-3').getAlt() }}">
  176.                                 </div>
  177.                             </div>
  178.                             <h4 class="text-white text-center mt-4 mt-lg-4 mt-md-4">{{ pimcore_input("cartText-3") }}</h4>
  179.                         {% endif %}
  180.                 </div>
  182.                 <div class="col-lg-3 col-md-6 col-sm-12">
  183.                     {% if not editmode %}
  184.                         <div class="flip-card mt-6 mt-lg-0 mt-md-6 d-none d-md-block">
  185.                             <a href="{{ pimcore_link('linkFrontCard-4').getHref() }}">
  186.                                 <div class="flip-card-inner">
  187.                                     <div class="flip-card-front">
  188.                                         <img src="{{ pimcore_image('imageFrontCard-4').getThumbnail('Stoelting_homepage_circle') }}" alt="{{ pimcore_image('imageFrontCard-4').getAlt() }}">
  189.                                     </div>
  192.                                     <div class="flip-card-back">
  193.                                         <img src="{{ pimcore_image('imageBackCard-4').getThumbnail('Stoelting_homepage_circle') }}" alt="{{ pimcore_image('imageBackCard-4').getAlt() }}">
  194.                                     </div>
  195.                                 </div>
  196.                             </a>
  197.                             <h4 class="text-white text-center mt-4 mt-lg-4 mt-md-4">{{ pimcore_input("cartText-4") }}</h4>
  198.                         </div>
  200.                         <div class="flip-card-mobile d-flex justify-content-center flex-column align-items-center d-md-none">
  201.                             <a href="{{ pimcore_link('linkFrontCard-4').getHref() }}">
  203.                             <div class="flip-card-back-mobile">
  204.                                 <img src="{{ pimcore_image('imageBackCard-4').getThumbnail('Stoelting_homepage_circle') }}" alt="{{ pimcore_image('imageBackCard-4').getAlt() }}">
  205.                             </div>
  207.                             </a>
  208.                             <h4 class="text-white text-center mt-4 mt-lg-4 mt-md-4">{{ pimcore_input("cartText-4") }}</h4>
  209.                         </div>
  210.                         {% else %}
  211.                         <div class="edit-flip-card">
  212.                             <div class="text-white">
  213.                                 {{ pimcore_link('linkFrontCard-4') }}
  214.                             </div>
  216.                             <div class="edit-flip-card-front">
  217.                                 <div class="set-center">
  218.                                     {{ pimcore_image('imageFrontCard-4') }}
  219.                                 </div>
  220.                                 {% if pimcore_image('imageFrontCard-4').isEmpty() %}
  222.                                 {% endif %}
  223.                                 <img src="{{ pimcore_image('imageFrontCard-4').isEmpty() ? asset('static/images/admin/empty_image2x.png') : pimcore_image('imageFrontCard-4').getThumbnail('Stoelting_homepage_circle') }}" alt="{{ pimcore_image('imageFrontCard-4').getAlt() }}">
  224.                             </div>
  225.                             <div class="edit-flip-card-back">
  226.                                 <div class="set-center">
  227.                                     {{ pimcore_image('imageBackCard-4') }}
  228.                                 </div>
  229.                                 <img src="{{ pimcore_image('imageBackCard-4').isEmpty() ? asset('static/images/admin/empty_image2x.png') : pimcore_image('imageBackCard-4').getThumbnail('Stoelting_homepage_circle') }}" alt="{{ pimcore_image('imageBackCard-4').getAlt() }}">
  230.                             </div>
  231.                         </div>
  232.                         <h4 class="text-white text-center mt-4 mt-lg-4 mt-md-4">{{ pimcore_input("cartText-4") }}</h4>
  233.                     {% endif %}
  234.                 </div>
  235.             </div>
  236.         </div>
  237.     </main>
  238. {% endblock %}