templates/project/partials/media-brick.html.twig line 1

Open in your IDE?
  1. {% set bgColor = backgroundColor|default('bg-blue-200') %}
  2. {% set title = '' %}
  3. {% set count = media | length %}
  4. <section class="{{ bgColor }} flex justify-center h-[400px] md:h-auto">
  5.     {# fake background as seen in design #}
  6.     <div class="absolute w-full h-[50%] bg-white"></div>
  7.     <div class="container relative -mx-5 md:mx-0 {{ count == 1 ? 'md:pb-8' : 'md:pb-28' }}">
  8.         <div class="swiper md:!mx-0 -mb-[165px] md:mb-0 rounded-md !z-20 {{ count > 1 ? 'media-swiper' : '' }}">
  9.             <div class="relative swiper-wrapper rounded-t-md md:rounded-md">
  10.                 {% if media is defined %}
  11.                 {% for m in media %}
  12.                     {% if (m is defined and m is not null) %}
  13.                         {% set title = m.image.getMetadata('title')|default %}
  14.                         <div class="swiper-slide" data-caption="{{ title }}">
  15.                             {{ m.getThumbnail('media-brick-image-thumbnail').html({
  16.                                 class:'w-full',
  17.                                 pictureAttributes: {class: 'w-full rounded-t-md aspect-square md:aspect-auto md:rounded-md block overflow-hidden'},
  18.                                 imgAttributes: {class: 'w-full h-full object-cover object-center'},
  19.                             }) | raw }}
  20.                         </div>
  21.                     {% endif %}
  22.                 {% endfor %}
  23.                 {% endif %}
  24.             </div>
  25.         </div>
  26.         <div
  27.             class="flex items-end z-10 h-[223px] md:h-[301px] w-full top-[203px] md:top-[unset] left-[0px] md:left-[unset] absolute bg-blue-200 px-6 md:bg-white md:px-10 md:py-8 md:w-[calc(80%)] placeholder-gray-200 md:rounded-md md:-bottom-0 md:right-16">
  28.             <div class="flex flex-col items-center justify-between w-full md:flex-row">
  29.                 {% if count > 1 %}
  30.                     <div class="mb-6 media-swiper-caption md:mb-0" data-caption-show>
  31.                         <!-- empty -->
  32.                     </div>
  33.                 {% elseif count === 1 %}
  34.                     {{ title }}
  35.                 {% endif %}
  37.                 {% if count > 1 %}
  38.                     <div class="flex flex-col items-center w-full md:flex-row md:w-auto">
  39.                         <div class="!w-auto -mb-8 md:mb-0 md:mr-10 media-swiper-pagination project-media-swiper-pagination"></div>
  40.                         <div class="flex justify-end md:justify-between flex-grow w-full md:w-auto">
  42.                             <div class="mr-2 media-swiper-button-prev media-swiper-button-project-media">
  43.                                 <svg class="rotate-180" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="23.5857104px" height="16.8675464px" viewBox="0 0 23.5857104 16.8675464" version="1.1">
  44.                                     <g id="case-study" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
  45.                                         <g id="coolworld-project-case-study-vd-1504-v02" transform="translate(-1580.000000, -1967.550069)" fill="#0072BB">
  46.                                             <g id="media" transform="translate(0.000000, 1270.000000)">
  47.                                                 <g id="Group-2" transform="translate(426.000000, 449.000000)">
  48.                                                     <g id="components/navigation/mobile/carousel" transform="translate(1014.000000, 245.000000)">
  49.                                                         <g id="icons/ui/arrow-line-right" transform="translate(140.000000, 3.000000)">
  50.                                                             <path d="M22.6587309,7.6425728 L5.09460875,7.6425728 L5.09460875,7.6425728 L9.92142843,2.81683065 C10.4400119,2.29836292 10.4401058,1.4576668 9.92163804,0.939083306 C9.92160311,0.939048366 9.92156818,0.939013428 9.92153324,0.938978492 C9.40298689,0.420432142 8.56225714,0.420432142 8.0437108,0.938978492 C8.04368837,0.939000914 8.04366595,0.939023337 8.04364353,0.939045761 L0.70705612,8.27668449 C0.316700705,8.6672985 0.316700705,9.30038534 0.70705612,9.69099936 L8.04364353,17.0286381 C8.56215273,17.5472216 9.40288247,17.5472818 9.92146597,17.0287726 C9.9214884,17.0287502 9.92151082,17.0287278 9.92153324,17.0287054 C10.4400589,16.5101797 10.4400589,15.6694836 9.92153324,15.150958 C9.9214983,15.1509231 9.92146337,15.1508881 9.92142843,15.1508532 L5.09460875,10.3251111 L5.09460875,10.3251111 L22.6587309,10.3251111 C23.3994934,10.3251111 24,9.72460441 24,8.98384192 C24,8.24307944 23.3994934,7.6425728 22.6587309,7.6425728 Z" id="arrow-line-right" transform="translate(12.000000, 8.983842) scale(-1, 1) translate(-12.000000, -8.983842) "/>
  51.                                                         </g>
  52.                                                     </g>
  53.                                                 </g>
  54.                                             </g>
  55.                                         </g>
  56.                                     </g>
  57.                                 </svg>
  58.                             </div>
  59.                             <div class="media-swiper-button-next media-swiper-button-project-media">
  60.                                 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="23.5857104px" height="16.8675464px" viewBox="0 0 23.5857104 16.8675464" version="1.1">
  61.                                     <g id="case-study" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
  62.                                         <g id="coolworld-project-case-study-vd-1504-v02" transform="translate(-1580.000000, -1967.550069)" fill="#0072BB">
  63.                                             <g id="media" transform="translate(0.000000, 1270.000000)">
  64.                                                 <g id="Group-2" transform="translate(426.000000, 449.000000)">
  65.                                                     <g id="components/navigation/mobile/carousel" transform="translate(1014.000000, 245.000000)">
  66.                                                         <g id="icons/ui/arrow-line-right" transform="translate(140.000000, 3.000000)">
  67.                                                             <path d="M22.6587309,7.6425728 L5.09460875,7.6425728 L5.09460875,7.6425728 L9.92142843,2.81683065 C10.4400119,2.29836292 10.4401058,1.4576668 9.92163804,0.939083306 C9.92160311,0.939048366 9.92156818,0.939013428 9.92153324,0.938978492 C9.40298689,0.420432142 8.56225714,0.420432142 8.0437108,0.938978492 C8.04368837,0.939000914 8.04366595,0.939023337 8.04364353,0.939045761 L0.70705612,8.27668449 C0.316700705,8.6672985 0.316700705,9.30038534 0.70705612,9.69099936 L8.04364353,17.0286381 C8.56215273,17.5472216 9.40288247,17.5472818 9.92146597,17.0287726 C9.9214884,17.0287502 9.92151082,17.0287278 9.92153324,17.0287054 C10.4400589,16.5101797 10.4400589,15.6694836 9.92153324,15.150958 C9.9214983,15.1509231 9.92146337,15.1508881 9.92142843,15.1508532 L5.09460875,10.3251111 L5.09460875,10.3251111 L22.6587309,10.3251111 C23.3994934,10.3251111 24,9.72460441 24,8.98384192 C24,8.24307944 23.3994934,7.6425728 22.6587309,7.6425728 Z" id="arrow-line-right" transform="translate(12.000000, 8.983842) scale(-1, 1) translate(-12.000000, -8.983842) "/>
  68.                                                         </g>
  69.                                                     </g>
  70.                                                 </g>
  71.                                             </g>
  72.                                         </g>
  73.                                     </g>
  74.                                 </svg>
  75.                             </div>
  76.                         </div>
  77.                     </div>
  78.                 {% endif %}
  79.             </div>
  80.         </div>
  81.     </div>
  82. </section>