templates/document/areabricks/slider-brick/view.html.twig line 1

Open in your IDE?
  1. {% set config = {
  2.   autoplay: editmode ? false : { delay: 5000 },
  3. } %}
  4. <div class="grid w-full grid-cols-3 lg:grid-cols-4"
  5.     data-controller="slider"
  6.     data-slider-config-value="{{ config|json_encode }}"
  7.     data-slider-loader-finished-class="hidden">
  8.   <div class="relative hidden grid-rows-3 lg:grid">
  9.     <div class="p-8 cursor-pointer bg-primary-500" data-action="click->slider#navigateTo" data-slider-i-param="0" data-slider-target="navigationCard">
  10.       <h2 class="text-xl font-medium uppercase font-headline">
  11.         {{ pimcore_input('title-1') }}
  12.       </h2>
  13.       <p>
  14.         {{ pimcore_input('subtitle-1') }}
  15.       </p>
  16.     </div>
  17.     <div class="p-8 cursor-pointer bg-primary-500" data-action="click->slider#navigateTo" data-slider-i-param="1" data-slider-target="navigationCard">
  18.       <h2 class="text-xl font-medium uppercase font-headline">
  19.         {{ pimcore_input('title-2') }}
  20.       </h2>
  21.       <p>
  22.         {{ pimcore_input('subtitle-2') }}
  23.       </p>
  24.     </div>
  25.     <div class="p-8 cursor-pointer bg-primary-500" data-action="click->slider#navigateTo" data-slider-i-param="2" data-slider-target="navigationCard">
  26.       <h2 class="text-xl font-medium uppercase font-headline">
  27.         {{ pimcore_input('title-3') }}
  28.       </h2>
  29.       <p>
  30.         {{ pimcore_input('subtitle-3') }}
  31.       </p>
  32.     </div>
  33.     <div class="swiper-pagination" data-slider-target="navigation"></div>
  34.   </div>
  35.   <div class="relative self-stretch col-span-3 overflow-hidden slider">
  36.     <div data-slider-target="swiper" class="relative w-full h-full swiper">
  37.       <div class="swiper-wrapper">
  38.         {% for i in 1..3 %}
  39.           <div class="{% if not editmode %} overflow-hidden swiper-slide h-full {% endif %} {% if editmode %}bg-black{% endif %}">
  40.             {% set image =
  41.               pimcore_image(
  42.                 'slide-' ~ i,
  43.                 {
  44.                   pictureAttributes: {
  45.                     class: 'absolute inset-0 object-cover w-full h-full brightness-50'
  46.                   },
  47.                   imgAttributes: {
  48.                     class: 'absolute inset-0 object-cover w-full h-full brightness-50'
  49.                   },
  50.                   thumbnail: 'hero-background',
  51.                   width: '100%',
  52.                   height: 'auto',
  53.                   class: 'w-full absolute inset-0',
  54.                   deferred: true,
  55.                   cacheBuster: true
  56.                 }
  57.               )
  58.             %}
  59.             {{ image|raw }}
  60.             <div class="relative z-10 {% if not editmode%}h-full grid grid-cols-[10%,1fr,1fr,10%] grid-rows-[5rem,1fr,5rem] lg:grid-rows-[10rem,1fr,10rem] items-end{% endif %}">
  61.               <div class="col-span-2 col-start-2 row-start-2 text-white lg:col-end-2">
  62.                 <h3 class="text-4xl font-medium uppercase font-headline">
  63.                   {{ pimcore_input('headline-' ~ i) }}
  64.                 </h3>
  65.                 <p class="text-xl">
  66.                   {{ pimcore_input('description-' ~ i) }}
  67.                 </p>
  68.                 {% set button = pimcore_link('cta-' ~ i, { class: 'btn btn-primary btn-lg' }) %}
  69.                 {% if editmode or button.text %}
  70.                   <p class="mt-4">
  71.                     {{ button|raw }}
  72.                   </p>
  73.                 {% endif %}
  74.               </div>
  75.             </div>
  76.           </div>
  77.         {% endfor %}
  78.       </div>
  79.       {% if not editmode %}
  80.         <div class="absolute inset-0 z-10" data-slider-target="loader">
  81.           {% block loader %}
  82.             <div class="w-full h-full bg-neutral-800">
  83.               <div class="w-full h-full bg-neutral-800"></div>
  84.             </div>
  85.           {% endblock %}
  86.         </div>
  87.       {% endif %}
  88.     </div>
  89.     <div class="absolute left-0 right-0 z-30 flex items-end justify-end w-full mx-auto transition-opacity transform translate-y-1/2 lg:hidden bottom-1/2"
  90.       data-slider-target="navigation">
  91.       <div class="flex gap-4 -mb-32 md:mb-8">
  92.         <div class="relative z-10 shadow-xl swiper-button-prev">
  93.           {% include 'icons/drop-left.svg.twig' with { class: 'w-8 h-8' } %}
  94.         </div>
  95.         <div class="relative z-10 shadow-xl swiper-button-next">
  96.           {% include 'icons/drop-right.svg.twig' with { class: 'w-8 h-8' } %}
  97.         </div>
  98.       </div>
  99.     </div>
  100.   </div>
  101. </div>
  103. {#
  104. {% set config = { autoplay: editmode ? false : { delay: 7000 } } %}
  105. {% set classes = { container: '', slider: '', wrapper: '', slide: '' }|merge(classes|default({})) %}
  107. <div class="slider"
  108.   {% if not editmode %}data-controller="slider"{% endif %}
  109.   data-slider-config-value="{{ config|json_encode }}"
  110.   data-slider-loader-finished-class="hidden">
  111.   <div class="relative grid items-center w-full bg-secondary-500">
  112.     <div class="bg-primary-500">
  113.       <div class="relative grid h-full bg-neutral-800">
  114.         <div data-slider-target="swiper" class="w-full swiper {{ classes.slider }}">
  115.           <div class="swiper-wrapper overflow-hidden {{ classes.wrapper }}">
  116.             {% for i in 1..3 %}
  117.               <div class="swiper-slide relative bg-neutral-800 {{ classes.slide }}">
  118.                 {% set image =
  119.                   pimcore_image(
  120.                     'slide-' ~ i,
  121.                     {
  122.                       pictureAttributes: { class: 'object-cover w-full absolute inset-0' },
  123.                       imgAttributes: { class: 'object-cover w-full absolute inset-0' },
  124.                       thumbnail: 'hero-background',
  125.                       width: '100%',
  126.                       height: 'auto',
  127.                       class: 'w-full h-full absolute inset-0',
  128.                       deferred: true,
  129.                       cacheBuster: true
  130.                     }
  131.                   )
  132.                 %}
  133.                 {{ image|raw }}
  134.                 <div class="relative inset-0 z-10 col-start-1 row-start-1 p-4 py-8 pointer-events-auto text-shadow"
  135.                   data-slider-target="text">
  136.                   <span class="block mb-2 text-xl font-bold uppercase text-shadow-subline text-neutral-100">
  137.                     {{ pimcore_input('subline-' ~ i) }}
  138.                   </span>
  139.                   <div class="prose prose-2xl text-white prose-p:my-4 prose-h1:my-2 prose-h2:my-2 prose-h2:mb-4 prose-p:text-xl md:prose-p:text-3xl prose-h2:text-6xl max-w-none prose-h1:text-6xl lg:prose-h1:text-8xl prose-headings:font-primary prose-headings:text-white prose-headings:font-normal">
  140.                     {{
  141.                       pimcore_wysiwyg(
  142.                         'title-' ~ i,
  143.                         {
  144.                           toolbar: [
  145.                             {
  146.                               name: 'basicstyles',
  147.                               items: ['Bold', 'Italic', 'Underline', '-', 'RemoveFormat']
  148.                             },
  149.                             { name: 'styles', items: ['Format', 'Font'] }
  150.                           ],
  151.                           format_tags: 'p;h1;h2',
  152.                           font_names: 'acumin-pro, sans-serif;Nunito Sans, sans-serif;freescpt, serif'
  153.                         }
  154.                       )
  155.                     }}
  156.                   </div>
  157.                   {% set button = pimcore_link('button-' ~ i, { class: 'btn btn-primary btn-lg' }) %}
  158.                   {% if editmode or button.text %}
  159.                     <div class="mt-6 md:mt-16">
  160.                       {{ button|raw }}
  161.                     </div>
  162.                   {% endif %}
  163.                 </div>
  164.               </div>
  165.             {% endfor %}
  166.           </div>
  167.         </div>
  168.         {% if not editmode %}
  169.           <div class="absolute inset-0 z-10" data-slider-target="loader">
  170.             {% block loader %}
  171.               <div class="w-full h-full bg-neutral-800">
  172.                 <div class="w-full h-full bg-neutral-800"></div>
  173.               </div>
  174.             {% endblock %}
  175.           </div>
  176.         {% endif %}
  177.         <div class="swiper-pagination" data-slider-target="navigation"></div>
  178.       </div>
  179.     </div>
  181.     {% if
  182.       editmode
  183.         or not pimcore_wysiwyg('title-2').isEmpty
  184.         or not pimcore_wysiwyg('title-3').isEmpty %}
  185.       <div class="container absolute bottom-0 left-0 right-0 flex items-end justify-end w-full mx-auto transition-opacity opacity-0"
  186.         data-slider-target="navigation">
  187.         <div class="flex gap-4 -mb-32 md:mb-8">
  188.           <div class="relative z-10 shadow-xl swiper-button-prev">
  189.             {% include 'icons/drop-left.svg.twig' with { class: 'w-4 h-4' } %}
  190.           </div>
  191.           <div class="relative z-10 shadow-xl swiper-button-next">
  192.             {% include 'icons/drop-right.svg.twig' with { class: 'w-4 h-4' } %}
  193.           </div>
  194.         </div>
  195.       </div>
  196.     {% endif %}
  197.   </div>
  198. </div>
  199. #}