templates/areas/contact-business-card-brick/view.html.twig line 1

Open in your IDE?
  1. {% embed 'app/area-brick-layout.html.twig' %}
  3.     {% block content %}
  4.         <!-- Locations primary -->
  5.         <section class="{{ sectionClass ?? '' }}">
  6.             <div class="{{ containerClass ?? 'container py-10' }}">
  7.                 <div class="relative {{ widthClass ?? (pimcore_image('image').isEmpty() ? 'lg:w-1/2' : '') }}">
  8.                     <div class="relative {{ gridClass ?? '' }} z-10 w-full grid grid-cols-2 gap-6 p-10 overflow-hidden bg-gray-200 rounded-md {{ pimcore_image('image').isEmpty() ? '' : 'md:mb-10' }}">
  9.                         <div class="col-span-2 {{ pimcore_image('image').isEmpty() ? '' : 'md:col-span-1' }}">
  10.                             <span class="block mb-3 text-lg font-bold">
  11.                                 {{ pimcore_input('subtitle', { placeholder: 'Subtitel' }) }}
  12.                             </span>
  13.                             <h2 class="text-3xl font-bold mb-7">
  14.                                 {{ pimcore_input('title', { placeholder: 'Titel' }) }}
  15.                             </h2>
  16.                             <div class="flex flex-col gap-4">
  17.                                 {% if editmode %}
  18.                                     {{ pimcore_input('phone', { placeholder: 'Telefoonnummer' }) }}
  19.                                 {% elseif not pimcore_input('phone').isEmpty() %}
  20.                                     <a
  21.                                         href="tel:{{ pimcore_input('phone') | phone }}"
  22.                                         class="flex font-bold text-blue hover:underline"
  23.                                     >
  24.                                         <span class="flex items-center justify-center w-6 h-6 mr-2 bg-white rounded-full shadow-md">
  25.                                             <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14"><path fill="currentColor" fill-rule="evenodd" d="m13.47 9.12-2.8-.7a.703.703 0 0 0-.752.292L8.126 11.4A11.959 11.959 0 0 1 2.6 5.874l2.688-1.792a.7.7 0 0 0 .291-.752l-.7-2.8A.7.7 0 0 0 4.2 0H.7a.7.7 0 0 0-.7.7C.01 8.042 5.958 13.99 13.3 14a.7.7 0 0 0 .7-.7V9.8a.7.7 0 0 0-.53-.68Z"/></svg>
  26.                                         </span>
  27.                                         {{ pimcore_input('phone') }}
  28.                                     </a>
  29.                                 {% endif %}
  30.                                 {% if editmode %}
  31.                                     {{ pimcore_input('contact-text', { placeholder: 'Contact pagina tekst' }) }}
  32.                                     {% if not document.getProperty('contactPage') %}
  33.                                         {% embed 'app/editmodenotice.html.twig' %}
  34.                                             {% block title %} Er is nog geen contactpagina ingesteld. {% endblock %}
  35.                                             {% block information %}
  36.                                                 Stel op de hoofdpagina van de huidige taal de 'contactPage' property in.
  37.                                             {% endblock %}
  38.                                         {% endembed %}
  39.                                     {% endif %}
  40.                                 {% elseif document.getProperty('contactPage') and not pimcore_input('contact-text').isEmpty() %}
  41.                                     <a
  42.                                         href="mailto:{{ pimcore_input('contact-text') }}?subject={{ 'Contactaanvraag via website'|trans|url_encode }}"
  43.                                         target="_blank"
  44.                                         class="flex font-bold text-blue hover:underline"
  45.                                     >
  46.                                         <span class="flex items-center justify-center w-6 h-6 mr-2 bg-white rounded-full shadow-md">
  47.                                             <svg xmlns="http://www.w3.org/2000/svg" width="14" height="12"><path fill="currentColor" fill-rule="evenodd" d="M1.4 9.8V3.877l5.316 2.362a.7.7 0 0 0 .568 0L12.6 3.877V9.8H1.4Zm11.2-8.4v.945L7 4.834 1.4 2.345V1.4h11.2ZM14 2.786V.7a.7.7 0 0 0-.7-.7H.7a.7.7 0 0 0-.7.7v9.8a.7.7 0 0 0 .7.7h12.6a.7.7 0 0 0 .7-.7V2.786Z"/></svg>
  48.                                         </span>
  49.                                         {{ pimcore_input('contact-text') }}
  50.                                     </a>
  51.                                 {% endif %}
  52.                                 {% if editmode %}
  53.                                     {{ pimcore_textarea('address', { placeholder: 'Adres' }) }}
  54.                                 {% elseif not pimcore_textarea('address').isEmpty() %}
  55.                                     <a
  56.                                         href="https://maps.google.com/?q={{ pimcore_textarea('address') | replace({ "\n": '%20', ' ': '%20' }) }}"
  57.                                         target="_blank"
  58.                                         class="flex text-blue hover:underline"
  59.                                     >
  60.                                         <span class="mr-3.5">
  61.                                             <svg xmlns="http://www.w3.org/2000/svg" width="18" height="24"><path fill="currentColor" fill-rule="evenodd" d="M9.73.039a8.441 8.441 0 0 1 6.836 4.757 8.986 8.986 0 0 1-.465 8.856l-6.232 9.792a1.2 1.2 0 0 1-2.025 0l-6.231-9.792a8.988 8.988 0 0 1-.465-8.856A8.442 8.442 0 0 1 7.984.039a9.86 9.86 0 0 1 1.746 0Zm-.873 5.96a2.4 2.4 0 1 0 0 4.8 2.4 2.4 0 0 0 0-4.8Z"/></svg>
  62.                                         </span>
  63.                                         {{ pimcore_textarea('address') | nl2br }}
  64.                                     </a>
  65.                                 {% endif %}
  66.                             </div>
  67.                         </div>
  68.                         {% if (imageEnabled ?? true) and editmode or not pimcore_image('image').isEmpty() %}
  69.                             <div class="col-span-2 md:col-span-1">
  70.                                 {{ pimcore_image('image', {
  71.                                     thumbnail: 'contact-business-card',
  72.                                     pictureAttributes: {class: 'block rounded-md overflow-hidden'},
  73.                                     imgAttributes: {class: 'w-full h-full'},
  74.                                     reload: true,
  75.                                 }) }}
  76.                             </div>
  77.                         {% endif %}
  78.                     </div>
  80.                     {% if not pimcore_image('image').isEmpty() %}
  81.                         <div class="hidden md:block flex items-end md:h-[186px] md:absolute -mb-10 md:-mr-10 bg-blue-200 px-8 py-11 w-full placeholder-gray-200 rounded-b-md md:rounded-md md:-bottom-0 md:-right-0"></div>
  82.                     {% endif %}
  83.                 </div>
  84.             </div>
  85.         </section>
  86.     {% endblock %}
  88. {% endembed %}