bundles/Alea/AreabricksBundle/Resources/views/areas/herohome/view.html.twig line 1

Open in your IDE?
  1. {% set blockPositionMob = pimcore_select('blockPositionMob').getData() %}
  2. {% set blockPositionDesk = pimcore_select('blockPositionDesk').getData() %}
  3. {% set blockMaxWidth = pimcore_select('blockMaxWidth').getData() %}
  4. {% set pagDesk = pimcore_checkbox('pagDesk') %}
  5. {% set pagMob = pimcore_checkbox('pagMob') %}
  6. {% set pagColor = pimcore_select('pagColor').getData() %}
  7. {% set navDesk = pimcore_checkbox('navDesk') %}
  8. {% set navMob = pimcore_checkbox('navMob') %}
  9. {% set navColor = pimcore_select('navColor').getData() %}
  10. {% set titleColor = pimcore_select('titleColor').getData() %}
  11. {% set descColor = pimcore_select('descColor').getData() %}
  12. {% set linkColor = pimcore_select('linkColor').getData() %}
  16. {# mobile - padding #}
  17. {% set pm = pimcore_select('pm').getData() %}       {# all 4 sides #}
  18. {% set psm = pimcore_select('psm').getData() %}     {# left #}
  19. {% set ptm = pimcore_select('ptm').getData() %}     {# top #}
  20. {% set pem = pimcore_select('pem').getData() %}     {# right #}
  21. {% set pbm = pimcore_select('pbm').getData() %}     {# bottom #}
  22. {# desktop - padding #}
  23. {% set pd = pimcore_select('pd').getData() %}
  24. {% set psd = pimcore_select('psd').getData() %}
  25. {% set ptd = pimcore_select('ptd').getData() %}
  26. {% set ped = pimcore_select('ped').getData() %}
  27. {% set pbd = pimcore_select('pbd').getData() %}
  29. {% if editmode %}         
  30. {% for b in pimcore_block("slides").iterator %}
  31.     <p><strong>Foto</strong></p>
  32.     {{pimcore_image('image', {'height': 300})}}
  33.     <p><strong>Titolo</strong></p>
  34.     {{pimcore_textarea('title')}} 
  35.     <p><strong>Paragrafo</strong></p>
  36.     {{pimcore_wysiwyg('paragraph')}}
  37.     <p><strong>Link</strong></p>
  38.     {{ pimcore_link('link')}}
  39. {% endfor %}
  42. {% else %}
  45.     <section>
  46.         <div class="swiper slider-home">
  47.             <div class="swiper-wrapper">
  48.                 
  49.                     {% for b in pimcore_block("slides").iterator %}
  50.                         {% set title = pimcore_textarea('title',{'nl2br': true }) %}
  51.                         {% set paragraph = pimcore_wysiwyg('paragraph') %}
  52.                         {% set link = pimcore_link('link') %}
  53.                         {% set image = pimcore_image('image') %}
  54.                         <div class="swiper-slide">
  55.                             <div class="d-none position-absolute w-100 h-100 d-flex flex-column
  56.                                 {{ blockPositionDesk|default('justify-content-lg-end align-items-lg-start') }}    
  57.                                 {{ blockPositionMob|default('justify-content-end align-items-center') }}                   
  58.                                 {% if pm and pm != '' %} p-{{pm}} {% endif %}
  59.                                 {% if pd and pd != '' %} p-{{pd}} {% endif %}
  60.                                 {% if psm and psm != '' %} ps-{{psm}} {% endif %}
  61.                                 {% if psd and psd != '' %} ps-lg-{{psd}} {% endif %}
  62.                                 {% if ptm and ptm != '' %} pt-{{ptm}} {% endif %}
  63.                                 {% if ptd and ptd != '' %} pt-lg-{{ptd}} {% endif %}
  64.                                 {% if pem and pem != '' %} pe-{{pem}} {% endif %}
  65.                                 {% if ped and ped != '' %} pe-lg-{{ped}} {% endif %}
  66.                                 {% if pbm and pbm != '' %} pb-{{pbm}} {% endif %}
  67.                                 {% if pbd and pbd != '' %} pb-lg-{{pbd}} {% endif %}
  68.                             ">
  69.                                 <div class="content {% if blockMaxWidth %}mw-lg-{{blockMaxWidth}}{% endif %}">
  70.                                     <h1 class="{{titleColor|default('text-secondary')}}">{{ title|raw }}</h1>
  71.                                     {% if not paragraph.isEmpty() %}<div class="{{descColor|default('text-secondary')}}">{{ paragraph }}</div>{% endif %}
  72.                                     <a href="{{ link.getHref() }}" target="{{ link.getTarget() }}" class="link text-underline {{linkColor|default('text-secondary')}}">{{ link.getText() }}</a>
  73.                                 </div>
  74.                             </div>
  75.                             {#<div class="image">
  76.                                 <img src="{{ image }}" class="w-100" />
  77.                             </div>#}
  78.                             <div class="image overflow-hidden" />
  80.                             {{ image.thumbnail('slide_home').html({
  81.                                 'pictureAttributes': {
  82.                                     'class': 'w-100 h-100 d-block'
  83.                                 },
  84.                                 'imgAttributes': {
  85.                                     'class': 'w-100 h-100 object-fit-cover'
  86.                                 }
  87.                             }) | raw  }}
  88.                             
  89.                             </div>
  90.                         </div>
  91.                     {% endfor %}
  92.                 
  94.             </div>
  95.             <div class="swiper-pagination"></div>
  96.             <div class="swiper-button-prev text-{{navColor|default('black')}} ps-20"></div>
  97.             <div class="swiper-button-next text-{{navColor|default('black')}} pe-20"></div>
  98.         </div>
  99.     </section>
  100.     
  101.     {% do pimcore_head_script().appendFile(swiper_js) %}    
  102.   <script>
  103.     document.addEventListener("DOMContentLoaded", (event) => {
  104.       const swiper = new Swiper('.swiper.slider-home', {
  105.         // Default parameters
  106.         slidesPerView: 1,
  107.         loop: true,
  108.         autoplay: {
  109.           delay:2500,
  110.         },
  111.         speed: 1500,
  112.         pagination: {
  113.           el: '.swiper-pagination',
  114.           type: 'bullets',
  115.           enabled: {% if pagMob.isChecked() %}true{% else %}false{% endif %},
  116.         },
  117.         navigation: {
  118.           nextEl: '.swiper-button-next',
  119.           prevEl: '.swiper-button-prev',
  120.           enabled: {% if navMob.isChecked() %}true{% else %}false{% endif %},
  121.         },
  122.         effect: 'fade',
  123.         fadeEffect: {
  124.           crossFade: true
  125.         },
  126.         /*effect: "creative",
  127.         creativeEffect: {
  128.           prev: {
  129.             shadow: true,
  130.             translate: ["-20%", 0, 0],
  131.             opacity:1,
  132.           },
  133.           next: {
  134.             translate: ["100%", 0, 0],
  135.             opacity:0.8,
  136.           },
  137.         },*/
  138.         // Responsive breakpoints
  139.         breakpoints: {
  140.           768: {
  141.             slidesPerView: 1,
  142.             pagination: {
  143.               enabled: {% if pagDesk.isChecked() %}true{% else %}false{% endif %},
  144.             },
  145.             navigation: {
  146.               enabled: {% if navDesk.isChecked() %}true{% else %}false{% endif %},
  147.             }
  148.           }
  149.         }
  150.       });
  151.     });
  152.   </script>
  154. {% endif %}