templates/areas/media-brick/view.html.twig line 1

Open in your IDE?
  1. {# You can pass `media` as an ImageGallery data object. #}
  2. {% set gallery = pimcore_block('gallery', { 'reload': true }) %}
  4. {% embed 'app/area-brick-layout.html.twig' %}
  5.     {% block content %}
  7.         {% if editmode %}
  8.             <section class="container">
  9.                 {% if (media ?? null) is empty and gallery.isEmpty() %}
  10.                     {% embed 'app/editmodenotice.html.twig' %}
  11.                         {% block title %} Er is nog geen media toegevoegd. {% endblock %}
  12.                         {% block information %}
  13.                             {# is defined will also return true if media value is `null`. #}
  14.                             {% if media is defined %}
  15.                                 Je kunt media toevoegen binnen het Data Object.
  16.                             {% else %}
  17.                                 Klik op de groene plus om een media slide toe te voegen.
  18.                             {% endif %}
  19.                         {% endblock %}
  20.                     {% endembed %}
  21.                 {% endif %}
  23.                 {% if media is not defined %}
  24.                     {% for image in gallery.iterator %}
  25.                         <div class="grid grid-cols-2">
  26.                             <div>
  27.                                 Kies een afbeelding,
  28.                                 {{ pimcore_image('image', {
  29.                                     'thumbnail': 'media-brick-image-thumbnail',
  30.                                     'reload': 'false',
  31.                                     'class':'w-full',
  32.                                     'pictureAttributes': {class: 'w-full'}
  33.                                 }) }}
  34.                             </div>
  35.                             <div>
  36.                                 óf kies een video.
  37.                                 {{ pimcore_video('video', {
  38.                                     thumbnail: 'media-brick-video-thumbnail',
  39.                                     width: 1280,
  40.                                     height: 720,
  41.                                     youtube: {
  42.                                         autoplay: false,
  43.                                         modestbranding: true
  44.                                     },
  45.                                     vimeo: {
  46.                                         autoplay: false,
  47.                                         loop: false,
  48.                                     }
  49.                                 }) }}
  50.                             </div>
  51.                         </div>
  52.                     {% endfor %}
  53.                 {% endif %}
  54.             </section>
  55.         {% endif %}
  57.         {# If `media` is passed, always render it (also in editmode). #}
  58.         {# If `media` is not passed, only render in frontend (not in editmode)
  59.            because above pimcore_block grid will suffice when in editmode. #}
  60.         {% if (media ?? null) is not empty or (not editmode and not gallery.isEmpty()) %}
  61.             {% set title = '' %}
  62.             {% set count = media is defined ? (media | length) : gallery.count %}
  63.             <section class="container">
  64.                 <div class="relative -mx-5 md:mx-0 {{ count == 1 ? 'md:pb-8' : 'md:pb-28' }}">
  65.                     <div class="swiper !mx-5 md:!mx-0 -mb-[165px] md:mb-0 rounded-md !z-20 {{ count > 1 ? 'media-swiper' : '' }}">
  66.                         <div class="relative swiper-wrapper rounded-t-md md:rounded-md">
  67.                             {% if media is defined %}
  68.                                 {% for m in media %}
  69.                                     {% if (m is defined and m is not null) %}
  70.                                         {% set title = m.image.getMetadata('title')|default %}
  71.                                         <div class="swiper-slide" data-caption="{{ title }}">
  72.                                             {{ m.getThumbnail('media-brick-image-thumbnail').html({
  73.                                                 class:'w-full',
  74.                                                 pictureAttributes: {class: 'w-full rounded-t-md aspect-square md:aspect-auto md:rounded-md block overflow-hidden'},
  75.                                                 imgAttributes: {class: 'w-full h-full object-cover object-center'},
  76.                                             }) | raw }}
  77.                                         </div>
  78.                                     {% endif %}
  79.                                 {% endfor %}
  80.                             {% else %}
  81.                                 {% for image in gallery.iterator %}
  82.                                     {% set image = pimcore_image('image', {
  83.                                         thumbnail: 'media-brick-image-thumbnail',
  84.                                         reload: true,
  85.                                         class:'w-full',
  86.                                         pictureAttributes: {class: 'w-full rounded-t-md aspect-square md:aspect-auto md:rounded-md block overflow-hidden'},
  87.                                         imgAttributes: {class: 'w-full h-full object-cover object-center'},
  88.                                     }) %}
  89.                                     {% if not image.isEmpty() %}
  90.                                         {% set title = image.getText() %}
  92.                                         <div class="swiper-slide" data-caption="{{ title }}">
  93.                                             {{ image|raw }}
  94.                                         </div>
  95.                                     {% else %}
  96.                                         {% set video = pimcore_video('video', {
  97.                                             thumbnail: 'media-brick-video-thumbnail',
  98.                                             youtube: {
  99.                                                 autoplay: true,
  100.                                                 modestbranding: true
  101.                                             },
  102.                                             vimeo: {
  103.                                                 autoplay: true,
  104.                                                 loop: true
  105.                                             },
  106.                                         }) %}
  108.                                         {% set title = video.getTitle() %}
  110.                                         <div class="swiper-slide" data-caption="{{ title }}">
  111.                                             {{ video|raw }}
  112.                                         </div>
  113.                                     {% endif %}
  114.                                 {% endfor %}
  115.                             {% endif %}
  116.                         </div>
  117.                     </div><!--./swiper-->
  118.                     <div
  119.                         class="flex items-end z-10 h-[320px] md:h-[320px] md:absolute md:-mr-10 bg-blue-200 px-5 py-6 md:px-10 md:py-8 w-full placeholder-gray-200 md:rounded-md md:-bottom-0 md:-right-0">
  120.                         <div class="flex flex-col items-center justify-between w-full md:flex-row">
  121.                             {% if count > 1 %}
  122.                                 <div class="mb-6 media-swiper-caption md:mb-0"  data-caption-show>
  123.                                     <!-- empty -->
  124.                                 </div>
  125.                             {% elseif count === 1 %}
  126.                                 {{ title }}
  127.                             {% endif %}
  129.                             {% if count > 1 %}
  130.                                 <div class="flex flex-col items-center w-full md:flex-row md:w-auto">
  131.                                     <div class="!w-auto -mb-8 md:mb-0 md:mr-10 media-swiper-pagination project-media-swiper-pagination"></div>
  132.                                     <div class="flex justify-end md:justify-between flex-grow w-full md:w-auto">
  134.                                         <div class="mr-2 media-swiper-button-prev media-swiper-button-project-media">
  135.                                             <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">
  136.                                                 <g id="case-study" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
  137.                                                     <g id="coolworld-project-case-study-vd-1504-v02" transform="translate(-1580.000000, -1967.550069)" fill="#0072BB">
  138.                                                         <g id="media" transform="translate(0.000000, 1270.000000)">
  139.                                                             <g id="Group-2" transform="translate(426.000000, 449.000000)">
  140.                                                                 <g id="components/navigation/mobile/carousel" transform="translate(1014.000000, 245.000000)">
  141.                                                                     <g id="icons/ui/arrow-line-right" transform="translate(140.000000, 3.000000)">
  142.                                                                         <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) "/>
  143.                                                                     </g>
  144.                                                                 </g>
  145.                                                             </g>
  146.                                                         </g>
  147.                                                     </g>
  148.                                                 </g>
  149.                                             </svg>
  150.                                         </div>
  151.                                         <div class="media-swiper-button-next media-swiper-button-project-media">
  152.                                             <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">
  153.                                                 <g id="case-study" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
  154.                                                     <g id="coolworld-project-case-study-vd-1504-v02" transform="translate(-1580.000000, -1967.550069)" fill="#0072BB">
  155.                                                         <g id="media" transform="translate(0.000000, 1270.000000)">
  156.                                                             <g id="Group-2" transform="translate(426.000000, 449.000000)">
  157.                                                                 <g id="components/navigation/mobile/carousel" transform="translate(1014.000000, 245.000000)">
  158.                                                                     <g id="icons/ui/arrow-line-right" transform="translate(140.000000, 3.000000)">
  159.                                                                         <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) "/>
  160.                                                                     </g>
  161.                                                                 </g>
  162.                                                             </g>
  163.                                                         </g>
  164.                                                     </g>
  165.                                                 </g>
  166.                                             </svg>
  167.                                         </div>
  168.                                     </div>
  169.                                 </div>
  170.                             {% endif %}
  171.                         </div>
  172.                     </div>
  173.                 </div><!--/.relative-->
  174.             </section>
  175.         {% endif %}
  177.     {% endblock %}
  178. {% endembed %}