templates/includes/cards/reference.html.twig line 1

Open in your IDE?
  1. {% set isMirrored = false %}
  3. {% if mirrored|default() %}
  4.     {% set isMirrored = true %}
  5. {% endif %}
  7. {% set standalone = false %}
  9. {% if project | default() %}
  11.     {% set title = project.getReferenceTitle() | default() %}
  12.     {% set description = project.getReferenceDescription() | default() %}
  13.     {% set subtitle = project.getImageSubtitle() | default() %}
  15.     {% set image = project.visuals.current() %}
  16.     {% set sector = project.sectors | first %}
  18.     {% if (sector) %}
  19.         {% set icon = sector.icon %}
  20.     {% else %}
  21.         {% set icon = null %}
  22.     {% endif %}
  24.     {% set usp_title = project.getUspTitle() | default() %}
  25.     {% set contact_link = project.getCtaLink() | default() %}
  26.     {% set contact_image = project.getCtaImage() | default() %}
  27.     {% set usp_items = project.getUspItems() | default() %}
  28. {% else %}
  29.     {% if pimcore_relation('relatedProject').isEmpty() %}
  30.         <p>no project linked</p>
  31.     {% else %}
  33.         {% set title = pimcore_relation('relatedProject').getData().getReferenceTitle() | default() %}
  34.         {% set description = pimcore_relation('relatedProject').getData().getReferenceDescription() | default() %}
  35.         {% set subtitle = pimcore_relation('relatedProject').getData().getImageSubtitle() | default() %}
  37.         {% if pimcore_relation('relatedProject').getData().sectors | default() %}
  38.             {% set sector = pimcore_relation('relatedProject').getData().sectors | first %}
  40.             {% if (sector) %}
  41.                 {% set icon = sector.icon %}
  42.             {% else %}
  43.                 {% set icon = null %}
  44.             {% endif %}
  45.         {% endif %}
  47.         {% if pimcore_relation('relatedProject').getData().visuals | default() %}
  48.             {% set image = pimcore_relation('relatedProject').getData().visuals.current() %}
  49.         {% endif %}
  51.         {% set usp_title = pimcore_relation('relatedProject').getData().getUspTitle() | default() %}
  52.         {% set contact_link = pimcore_relation('relatedProject').getData().getCtaLink() | default() %}
  53.         {% set contact_image = pimcore_relation('relatedProject').getData().getCtaImage() | default() %}
  54.         {% set usp_items = pimcore_relation('relatedProject').getData().getUspItems() | default() %}
  55.         {% set standalone = true %}
  56.     {% endif %}
  57. {% endif %}
  59. {% if standalone %}
  60.     <div class="container">
  61. {% endif %}
  62. <div
  63.     class="flex w-full block col-span-12 items-center relative {% if isMirrored %} md:flex-row-reverse {% else %} md:flex-row {% endif %} flex-col-reverse {{ class ?? '' }}">
  65.     <div class="w-full md:w-[57%] bg-white px-8 py-6 md:p-10 flex flex-col items-start md:rounded">
  66.         {% include 'includes/cards/partials/label.html.twig' with {
  67.             label: 'Projectreferentie' | trans
  68.         } %}
  70.         {% if title %}
  71.             <h2 class="mt-4">{{ title }}</h2>
  72.         {% endif %}
  73.         {% if description %}
  74.             <p>{{ description | raw }}</p>
  75.         {% endif %}
  76.         {% if usp_title %}
  77.             <h3 class="mt-4 mb-6">{{ usp_title }}</h3>
  78.         {% endif %}
  80.         {% if usp_items %}
  81.             <div class="flex flex-col gap-8">
  82.                 {% for item in usp_items %}
  83.                     <div class="flex flex-row gap-4">
  84.                         {% set itemIcon = item.uspItemIcon.getData() | default() %}
  85.                         {% set itemTitle = item.uspItemTitle.getData() | default() %}
  86.                         {% set itemDescription = item.uspItemDescription.getData() | default() %}
  88.                         {% if itemIcon %}
  89.                             <img class="w-[54px] h-[54px]" src="{{ itemIcon.getThumbnail('sector-card-usp') }}" alt="">
  90.                         {% endif %}
  92.                         <div>
  93.                             {% if itemTitle %}
  94.                                 <h4>{{ itemTitle }}</h4>
  95.                             {% endif %}
  96.                             {% if itemDescription %}
  97.                                 <p>{{ itemDescription }}</p>
  98.                             {% endif %}
  99.                         </div>
  100.                     </div>
  101.                 {% endfor %}
  102.             </div>
  103.         {% endif %}
  105.         {% if contact_link %}
  106.             <a href="{{ contact_link.href() }}" class="flex flex-row gap-4 w-full md:max-w-max mt-6 py-4 px-4 md:pl-8 md:pr-16 bg-blue-300 text-white rounded hover:bg-blue-500 transition-all duration-100">
  107.                 {% if contact_image %}
  108.                     {{ contact_image.getThumbnail('sector-card-cta').html({
  109.                         imgAttributes: {class: 'rounded-full overflow-hidden'},
  110.                     }) | raw }}
  111.                 {% endif %}
  112.                 <div>
  113.                     <h4 class="text-[20px]">{{ contact_link.getText() }}</h4>
  114.                     <div class="mt-4 md:mt-0 flex flex-row">
  115.                         <b>{{ 'project.reference_button' | trans }}</b>
  116.                         <span
  117.                             class="flex items-center justify-center shadow w-7 h-7 ml-3 transition-all bg-white rounded-full text-blue">
  118.                             <svg class="rotate-180 relative left-[1px]" width="0.85em" height="0.85em" fill="#0072BB"
  119.                                  viewBox="0 0 10 16" xmlns="http://www.w3.org/2000/svg">
  120.                                 <path fill-rule="evenodd"
  121.                                       d="M7.685.344.722 7.075C.474 7.315.333 7.65.333 8c0 .35.14.685.389.925l6.963 6.732a1.206 1.206 0 0 0 1.749-.068l.09-.113a1.297 1.297 0 0 0-.154-1.67L3.36 8 9.37 2.193A1.295 1.295 0 0 0 9.434.41 1.205 1.205 0 0 0 7.685.344Z"></path></svg>
  122.                     </span>
  123.                     </div>
  124.                 </div>
  125.             </a>
  126.         {% endif %}
  127.     </div>
  129.     <div class="w-full md:w-[43%] bg-blue-200">
  130.         {% if isMirrored %}
  131.             {% set pictureClass = 'block overflow-hidden rounded-l' %}
  132.         {% else %}
  133.             {% set pictureClass = 'block overflow-hidden rounded-r' %}
  134.         {% endif %}
  136.         <div class="relative">
  137.             {% if image | default() %}
  138.                 {{ image.getThumbnail('project-card-1-1').html({
  139.                     pictureAttributes: {class: pictureClass},
  140.                     imgAttributes: {class: 'w-full'},
  141.                 })|raw }}
  142.             {% endif %}
  144.             {% if sector | default() %}
  145.                 {% include 'includes/cards/partials/label.html.twig' with {
  146.                     label: sector.branchename,
  147.                     labelIcon: icon,
  148.                     position: 'absolute top-6 right-6'
  149.                 } %}
  150.             {% endif %}
  151.         </div>
  152.         <div class="flex {% if isMirrored %} justify-end {% endif %}">
  153.             <div
  154.                 class="bg-gray-100 px-6 py-4 w-full md:w-[90%] {% if isMirrored %} md:rounded-bl {% else %} md:rounded-br {% endif %}">
  155.                 {{ subtitle }}
  156.             </div>
  157.         </div>
  158.     </div>
  159. </div>
  160. {% if standalone %}
  161.     </div>
  162. {% endif %}