templates/areas/hero-projects-with-text-and-button-brick/view.html.twig line 1

Open in your IDE?
  1. {% include 'includes/partials/hero_usp_bar.html.twig' %}
  4. {% embed 'app/area-brick-layout.html.twig' %}
  5.     {% block content %}
  6.         <!-- Text + Cards 2 columns -->
  7.         <section class="relative text-white bg-blue-300">
  8.             {# Defined as Dialog field. #}
  9.             {% if not pimcore_image('background-image').isEmpty() %}
  10.                 {# Doing getThumbnail() instead of direct echo so image also gets rendered in editmode. #}
  11.                 {{ pimcore_image('background-image').getThumbnail('projects-hero-background-image').html({
  12.                     pictureAttributes: {class: 'z-0 absolute top-1/2 -translate-y-1/2'}
  13.                 }) | raw }}
  14.             {% endif %}
  15.             <div
  16.                 class="container relative z-10 flex flex-wrap items-center gap-6 py-10 pr-0 mx-auto overflow-hidden md:py-20 lg:pr-20 lg:flex-nowrap">
  17.                 <div class="w-full pr-5 lg:w-5/12">
  18.                     <span class="inline-block mb-3 text-base font-bold md:text-lg">
  19.                         {{ pimcore_input('subtitle', { placeholder: 'Subtitel' }) }}
  20.                     </span>
  22.                     <h2 class="mb-4 text-3xl lg:text-5xl">
  23.                         {{ pimcore_input('title', { placeholder: 'Titel' }) }}
  24.                     </h2>
  26.                     <p class="mb-8 text-lg">
  27.                         {{ pimcore_textarea('text', { placeholder: 'Tekst' }) }}
  28.                     </p>
  30.                     {{ pimcore_link('link', {
  31.                         placeholder: 'Link',
  32.                         class: 'button button__primary',
  33.                     }) }}
  34.                 </div>
  35.                 <div class="mt-6 lg:w-7/12 lg:mt-0">
  37.                     <div class="swiper project-swiper">
  38.                         <div class="swiper-wrapper lg:flex">
  39.                             {# Defined in Brick as editableContent fields #}
  40.                             {% for project in pimcore_relations('projects') %}
  41.                                 {# Also see areas/projects-card-slider-brick/card.html.twig #}
  42.                                 {% set page = project.page() %}
  43.                                 <a href="{{ page ? (page.url | trimUrl) : '' }}" class="!w-11/12 lg:!w-6/12 swiper-slide pr-6">
  44.                                     {% set image = project.visuals.current() %}
  45.                                     {% if image %}
  46.                                         <div class="relative">
  47.                                             {{ image.getThumbnail('projects-hero-1').html({
  48.                                                 pictureAttributes: {class: 'inline-block mb-5 overflow-hidden rounded-md'}
  49.                                             })|raw }}
  50.                                         </div>
  51.                                     {% endif %}
  52.                                     <span
  53.                                         class="block mb-3 text-lg">{{ (project.meta_description ?: (project.webdesq_content|striptags|slice(0, 38) ~ '...'))|raw }}</span>
  54.                                     <h3 class="text-2xl leading-7">{{ project.title }}</h3>
  55.                                 </a>
  56.                             {% endfor %}
  57.                         </div>
  58.                         <div class="flex items-center justify-between gap-6 mt-6 mr-5 lg:hidden">
  59.                             <div class="flex items-center custom-swiper-pagination"></div>
  60.                             <div class="flex gap-2.5 items-center text-white">
  61.                                 <div class="arrow-swiper-button-prev">
  62.                                     <svg width="24px" height="18px" xmlns="http://www.w3.org/2000/svg"><g id="&gt;-Klimaatbeheersing-v2" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" ><g id="coolworld-product-category-vd-375-v02.3" transform="translate(-296 -3452)" fill="currentColor"><g id="Group-4" transform="translate(0 3333)"><g id="components/navigation/mobile/carousel" transform="translate(21 116)"><g id="icons/ui/arrow-line-right-copy" transform="translate(275 3)"><path d="M22.659 7.643H5.095L9.92 2.817A1.328 1.328 0 1 0 8.044.939L.707 8.277a1 1 0 0 0 0 1.414l7.337 7.338a1.328 1.328 0 0 0 1.878-1.878l-4.827-4.826h17.564a1.341 1.341 0 0 0 0-2.682Z" id="arrow-line-left" transform="matrix(1 0 0 -1 0 17.968)"/></g></g></g></g></g></svg>
  63.                                 </div>
  64.                                 <div class="arrow-swiper-button-next">
  65.                                     <svg width="24px" height="18px" xmlns="http://www.w3.org/2000/svg"><g id="&gt;-Klimaatbeheersing-v2" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g id="coolworld-product-category-vd-375-v02.3" transform="translate(-332 -3452)" fill="currentColor"><g id="Group-4" transform="translate(0 3333)"><g id="components/navigation/mobile/carousel" transform="translate(21 116)"><g id="icons/ui/arrow-line-right" transform="translate(311 3)"><path d="M22.659 7.643H5.095L9.92 2.817A1.328 1.328 0 1 0 8.044.939L.707 8.277a1 1 0 0 0 0 1.414l7.337 7.338a1.328 1.328 0 0 0 1.878-1.878l-4.827-4.826h17.564a1.341 1.341 0 0 0 0-2.682Z" id="arrow-line-right" transform="matrix(-1 0 0 1 24 0)"/></g></g></g></g></g></svg>
  66.                                 </div>
  67.                             </div>
  68.                         </div>
  69.                     </div>
  71.                 </div>
  72.             </div>
  73.         </section>
  75.     {% endblock %}
  76. {% endembed %}