templates/areas/sector-cards-brick/view.html.twig line 1

Open in your IDE?
  1. {# Defined as EditableDialog field #}
  2. {% set style = style ?? pimcore_select('style').getData ?? "images" %}
  3. {# Defined as EditableDialog field #}
  4. {% set sectors = sectors ?? pimcore_relations('sectors').getElements() %}
  5. {% set clients = clients ?? pimcore_relations('clients').getElements() %}
  6. {% include 'areas/sector-cards-brick/partials/editmode/_no-objects-found.html.twig' %}
  7. {% embed 'app/area-brick-layout.html.twig' %}
  8.     {% block content %}
  9.         {% if style == 'images' and sectors|length > 0 %}
  10.             <!-- Branches 4 columns -->
  11.             <section class="{{ containerClasses ?? 'relative py-10' }} {{ defaultBackgroundColor ?? "" }}">
  13.                 {% if disableBackground is not defined or not disableBackground %}
  14.                     <div class="absolute w-full h-40 z-10 bg-white md:bg-blue-300
  15.                         {{ defaultSecondBackgroundColor ?? "md:bg-blue-200" }}
  16.                         {{ defaultSecondBackgroundPosition ?? "top-0" }}
  17.                     ">
  18.                         <!-- empty -->
  19.                     </div>
  20.                 {% endif %}
  22.                 <div class="container relative z-20">
  23.                     <div class="grid grid-cols-12 gap-8">
  24.                         {% for sector in sectors %}
  25.                             {% set page = sector.page() %}
  26.                             <a href="{{ page ? (page.url | trimUrl) : '' }}" class="col-span-12 md:col-span-6 lg:col-span-3 group">
  27.                                 <div class="relative hidden overflow-hidden rounded-md md:block">
  29.                                     {% set image = sector.visuals.current() %}
  30.                                     {% if image %}
  31.                                         {{ image.getThumbnail('sector-card').html({
  32.                                             pictureAttributes: {class: ''},
  33.                                             imgAttributes: {class: 'w-full'},
  34.                                         })|raw }}
  35.                                     {% endif %}
  37.                                     {% set icon = sector.icon() %}
  38.                                     {% if icon %}
  39.                                         <span class="absolute left-6 bottom-6">
  40.                                             {{ icon.getThumbnail('text-and-link-icon').html({
  41.                                                 pictureAttributes: {class: 'rounded-full '},
  42.                                                 imgAttributes: {class: 'w-full h-full'},
  43.                                             })|raw }}
  44.                                         </span>
  45.                                     {% endif %}
  46.                                 </div>
  47.                                 <div class="flex items-center justify-between md:mt-4">
  48.                                     {% set icon = sector.icon() %}
  49.                                     {% if icon %}
  50.                                         <span class="mr-2.5 md:hidden">
  51.                                             {{ icon.getThumbnail('text-and-link-icon').html({
  52.                                                 pictureAttributes: {class: 'rounded-full '},
  53.                                                 imgAttributes: {class: 'w-full h-full'},
  54.                                             })|raw }}
  55.                                         </span>
  56.                                     {% endif %}
  58.                                     {% if disableBackground is defined and disableBackground %}
  59.                                         {% set classes = "text-blue" %}
  60.                                     {% else %}
  61.                                         {% set classes = (defaultSecondBackgroundColor ?? null) === 'bg-blue-300' ? "text-blue md:text-white" : "text-blue md:text-white" %}
  62.                                     {% endif %}
  64.                                     <h3 class="grow text-lg font-bold {{ classes }}">{{ sector.branchename }}</h3>
  65.                                     <span
  66.                                         class="flex items-center justify-center w-6 h-6 bg-white rounded-full shadow-md text-blue group-hover:bg-blue group-hover:text-white">
  67.                                         <svg class="h-3.5 w-3.5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
  68.                                             <path fill="currentColor" fill-rule="currentColor"
  69.                                                   d="m6.406 15.656 6.963-6.731c.249-.24.389-.575.389-.925 0-.35-.14-.685-.389-.925L6.406.343A1.206 1.206 0 0 0 4.657.41l-.09.113a1.297 1.297 0 0 0 .154 1.67L10.731 8l-6.008 5.806a1.295 1.295 0 0 0-.065 1.783c.463.52 1.248.55 1.748.066Z"></path>
  70.                                         </svg>
  71.                                     </span>
  72.                                 </div>
  73.                             </a>
  74.                         {% endfor %}
  75.                     </div>
  76.                 </div>
  77.             </section>
  78.         {% elseif style == 'icons' and sectors|length > 0 %}
  79.             <section class="py-8 bg-blue-200 md:py-20">
  81.                 <div class="container">
  82.                     {% if clients|default(null) %}
  83.                         <section>
  84.                             {% for client in clients %}
  85.                                 <div class="grid grid-cols-12 lg:gap-6 swiper-slide">
  87.                                     <div class="col-span-12 xl:col-start-2 xl:row-start-1 xl:col-span-6">
  88.                                         {% if client.media.items[0] is defined and client.media.items[0] is not null %}
  89.                                             {{ client.media.items[0].thumbnail('testimonial-large').html(
  90.                                                 {
  91.                                                     'pictureAttributes': {
  92.                                                     'class': 'inline-block overflow-hidden shadow-lg sm:rounded-md w-full',
  93.                                                 },
  94.                                                     'imgAttributes': {
  95.                                                     'class': 'object-cover object-center w-full h-full'
  96.                                                 },
  97.                                                 }
  98.                                             )|raw }}
  99.                                         {% endif %}
  100.                                     </div>
  102.                                     <div class="col-span-12 xl:col-span-6 xl:col-start-6 xl:row-start-1 flex items-center">
  103.                                         {% include 'areas/testimonial-brick/partials/editmode/_no-client-details-found.html.twig' %}
  104.                                         <div class="relative md:mx-6 -mt-12 lg:mt-10">
  106.                                             <div class="block p-8 text-white bg-blue-500 md:rounded shadow-lg ">
  107.                                                 <blockquote class="mb-8 text-xl font-bold leading-8 md:text-2xl">
  108.                                                     {% if client.story %}
  109.                                                         “{{ client.story }}”
  110.                                                     {% endif %}
  111.                                                 </blockquote>
  112.                                                 <span class="font-bold">
  113.                                         {% if client.job_title and client.contact %}
  114.                                             {{ client.contact }}, {{ client.job_title }}
  115.                                         {% elseif client.contact %}
  116.                                             {{ client.contact }}
  117.                                         {% endif %}
  118.                                     </span>
  119.                                             </div>
  121.                                             {% if client.logo %}
  122.                                                 <span class="flex justify-center py-6">
  123.                                         {{ client.logo.thumbnail('testimonial-small').html({
  124.                                             pictureAttributes: {class: 'p-6 rounded flex justify-center cursor-pointer bg-white !w-[188px] h-[60px] swiper-slide'},
  125.                                         }) | raw }}
  126.                                     </span>
  127.                                             {% endif %}
  129.                                             {% if document.getProperty('clientArchivePage') %}
  130.                                                 <a
  131.                                                     class="button button__secondary button__secondary--white button--no-l-padding group"
  132.                                                     href="{{ document.getProperty('clientArchivePage').url | trimUrl }}"
  133.                                                 >
  134.                                         <span
  135.                                             class="flex items-center justify-center w-6 h-6 ml-3 transition-all bg-white rounded-full shadow-md text-blue group-hover:bg-blue group-hover:text-white">
  136.                                             <svg class="h-3.5 w-3.5"
  137.                                                  xmlns="http://www.w3.org/2000/svg"
  138.                                                  viewBox="0 0 16 16">
  139.                                                 <path fill="currentColor" fill-rule="currentColor"
  140.                                                       d="m6.406 15.656 6.963-6.731c.249-.24.389-.575.389-.925 0-.35-.14-.685-.389-.925L6.406.343A1.206 1.206 0 0 0 4.657.41l-.09.113a1.297 1.297 0 0 0 .154 1.67L10.731 8l-6.008 5.806a1.295 1.295 0 0 0-.065 1.783c.463.52 1.248.55 1.748.066Z"/>
  141.                                             </svg>
  142.                                         </span>
  143.                                                     {{ "Bekijk alle verhalen"|trans }}
  144.                                                 </a>
  145.                                             {% endif %}
  147.                                         </div>
  148.                                     </div>
  149.                                 </div>
  150.                             {% endfor %}
  151.                         </section>
  152.                     {% endif %}
  154.                     {% if editmode %}
  155.                         {% if showArchiveLink is not defined %}
  156.                             <label>
  157.                                 {{ pimcore_checkbox('showArchiveLink', { reload: true }) }}
  158.                                 <span>Toon link naar overzichtspagina</span>
  159.                             </label>
  160.                         {% endif %}
  161.                     {% endif %}
  163.                     <div class="grid grid-cols-2 gap-6 font-bold text-center md:grid-cols-3 lg:grid-cols-4">
  164.                         {% for sector in sectors %}
  165.                             {% set page = sector.page() %}
  166.                             <a href="{{ page ? (page.url | trimUrl) : '' }}"
  167.                                class="flex flex-col items-center justify-between pt-8 pb-6 transition-transform bg-white rounded-md px-7 hover:scale-105 hover:drop-shadow-2xl hover:text-blue">
  168.                                 {% if sector.icon %}
  169.                                     {{ sector.icon.getThumbnail('sector-card-icon').html({
  170.                                         pictureAttributes: {class: 'inline mb-4 rounded-full '},
  171.                                         imgAttributes: {class: 'w-full h-full'},
  172.                                     })|raw }}
  173.                                 {% endif %}
  174.                                 <span>{{ sector.branchename }}</span>
  175.                             </a>
  176.                         {% endfor %}
  178.                         {% if showArchiveLink ?? pimcore_checkbox('showArchiveLink').isChecked() %}
  179.                             <a
  180.                                 href="{{ document.getProperty('sectorArchivePage').url | trimUrl }}"
  181.                                 class="flex flex-col items-center pt-8 pb-6 text-white transition-transform rounded-md px-7 justify-evenly bg-blue hover:scale-105 hover:drop-shadow-2xl"
  182.                             >
  183.                                 <svg class="inline w-8 h-8 mb-3" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
  184.                                     <path fill="currentColor" fill-rule="evenodd"
  185.                                           d="M3.5 9a3.5 3.5 0 0 1 .192 6.995L3.5 16a3.5 3.5 0 0 1-.192-6.995L3.5 9Zm9 0a3.5 3.5 0 0 1 .192 6.995L12.5 16a3.5 3.5 0 0 1-.192-6.995L12.5 9Zm-9 1.5a2 2 0 1 0 0 4 2 2 0 0 0 0-4Zm9 0a2 2 0 1 0 0 4 2 2 0 0 0 0-4ZM3.5 0a3.5 3.5 0 0 1 .192 6.995L3.5 7A3.5 3.5 0 0 1 3.308.005L3.5 0Zm9 0a3.5 3.5 0 0 1 .192 6.995L12.5 7a3.5 3.5 0 0 1-.192-6.995L12.5 0Zm-9 1.5a2 2 0 1 0 0 4 2 2 0 0 0 0-4Zm9 0a2 2 0 1 0 0 4 2 2 0 0 0 0-4Z"/>
  186.                                 </svg>
  187.                                 <span>{{ 'Bekijk alles' | trans }}</span>
  188.                             </a>
  189.                         {% endif %}
  190.                     </div>
  191.                 </div>
  192.             </section>
  193.         {% endif %}
  194.     {% endblock %}
  195. {% endembed %}