src/Aqarmap/Bundle/ListingBundle/Resources/views/Listing/listingSlider.html.twig line 1

Open in your IDE?
  1. {% set isEnabledCTAslide = isEnabledFeature('web.slider.lead.cta') and not isMobile %}
  2. {% set isEnabledListingVideo = listing.videoUrl is not empty %}
  3. {% set sliderCounterContainer = "<label class='count-text' id='sliderCounter'></label>" %}
  4. {% set listingOwner = listing.user %}
  5. {% set isListingOwnerLogoDefined = listingOwner is defined and listingOwner.logo %}
  6. {% set hasListingOwnerLogo = isEnabledFeature('web.listing.customer.logo.on.photo') and isListingOwnerLogoDefined %}
  7. {% set iconSize = 24 %}
  9. {% if isListingSliderDisabledTest %}
  10.     {% if hasListingOwnerLogo %}
  11.         {% set photoPath = generatePhotoWithLogo(listing.mainPhoto.file, listingOwner.logo)|thumbnail('slider-photo-watermarked-logo-large') %}
  12.         {% set photoPathWebp = generatePhotoWithLogo(listing.mainPhoto.file, listingOwner.logo)|thumbnail('slider-photo-watermarked-logo-large-webp') %}
  13.     {% else %}
  14.         {% set photoPath = custom_vich_uploader_asset(listing.mainPhoto.file, 'file')|thumbnail('slider-photo-watermarked-large') %}
  15.         {% set photoPathWebp = custom_vich_uploader_asset(listing.mainPhoto.file, 'file')|thumbnail('slider-photo-watermarked-large-webp') %}
  16.     {% endif %}
  18.     <div class="embed-responsive embed-responsive-4by3">
  19.         <div class="embed-responsive-item">
  20.             <picture>
  21.                 <source srcset="{{ photoPathWebp }}" type="image/webp">
  22.                 <source srcset="{{ photoPath }}" type="image/jpg">
  23.                 <img itemprop="photo"
  24.                     fetchpriority="high"
  25.                     class="img-responsive w-100 h-100"
  26.                     width="100" height="100"
  27.                 />
  28.             </picture>
  29.         </div>
  30.     </div>
  31. {% else %}
  32.     <div id="ListingImageSlider">
  33.         <div class="listing-photo-slider listing-photo-slider__cloning-container embed-responsive embed-responsive-4by3">
  34.             <div class="owl-buttons listing-photo-slider__owl-buttons">
  35.                 <button class="owl-prev owl-carousel-prev owl-buttons__circled">
  36.                     <i class="fa fa-chevron-left"></i>
  37.                 </button>
  38.                 <button class="owl-next owl-carousel-next owl-buttons__circled">
  39.                     <i class="fa fa-chevron-right"></i>
  40.                 </button>
  41.                 <div class="zoom-buttons-container">
  42.                     <button class="zoom-buttons-container__button" id="zoom-in" onclick="imageSlider.zoomin()">
  43.                         <img src="{{ asset('images/zoomin.svg') }}" width="{{ iconSize }}" height="{{ iconSize }}">
  44.                     </button>
  45.                     <button class="zoom-buttons-container__button" id="zoom-out" onclick="imageSlider.zoomout()">
  46.                         <img src="{{ asset('images/zoomout.svg') }}" width="{{ iconSize }}" height="{{ iconSize }}">
  47.                     </button>
  48.                 </div>
  49.             </div>
  50.             <div class="embed-responsive-item listing-photo-slider__container" id="sliderWrapper">
  51.                 <div class="owl-carousel owl-image-carousel owl-theme">
  52.                     {% for photo in listing.photosForSlider %}
  53.                         {% set isDisabledLazyLoadImgIndex = loop.index == 1 %}
  55.                         <div class="item" data-dot="{{ sliderCounterContainer }}">
  56.                             {% if hasListingOwnerLogo %}
  57.                                 {% set photoPath = generatePhotoWithLogo(photo.file, listingOwner.logo)|thumbnail('slider-photo-watermarked-logo-large') %}
  58.                                 {% set photoPathWebp = generatePhotoWithLogo(photo.file, listingOwner.logo)|thumbnail('slider-photo-watermarked-logo-large-webp') %}
  59.                             {% else %}
  60.                                 {% set photoPath = custom_vich_uploader_asset(photo.file, 'file')|thumbnail('slider-photo-watermarked-large') %}
  61.                                 {% set photoPathWebp = custom_vich_uploader_asset(photo.file, 'file')|thumbnail('slider-photo-watermarked-large-webp') %}
  62.                             {% endif %}
  64.                             {% if isDisabledLazyLoadImgIndex %}
  65.                                 <picture>
  66.                                     <source srcset="{{ photoPathWebp }}" type="image/webp">
  67.                                     <source srcset="{{ photoPath }}" type="image/jpg">
  68.                                     <img itemprop="photo"
  69.                                         fetchpriority="high"
  70.                                         class="img-responsive"
  71.                                         alt="{{ photo.caption }}"
  72.                                         onclick="imageSlider.openListingSlider()"
  73.                                         ng-click="setIsMobileSliderOpen('true')"
  74.                                     />
  75.                                 </picture>
  76.                             {% else %}
  77.                                 <picture>
  78.                                     <source data-srcset="{{ photoPathWebp }}" type="image/webp">
  79.                                     <source data-srcset="{{ photoPath }}" type="image/jpg">
  80.                                     <img itemprop="photo"
  81.                                         src="/images/placeholder.svg"
  82.                                         class="img-responsive lazyload"
  83.                                         alt="{{ photo.caption }}"
  84.                                         fetchpriority="low"
  85.                                         onclick="imageSlider.openListingSlider()"
  86.                                         ng-click="setIsMobileSliderOpen('true')"
  87.                                     />
  88.                                 </picture>
  89.                             {% endif %}
  90.                         </div>
  91.                         {% if loop.last %}
  92.                             {% if isEnabledListingVideo %}
  93.                                 <div class="item item-video" data-dot="{{ sliderCounterContainer }}">
  94.                                     {% set youtubeId = getYoutubeVideoCode(listing.videoUrl|raw) %}
  96.                                     <a class="owl-video" href="https://www.youtube.com/embed/{{youtubeId}}"></a>
  97.                                 </div>
  98.                             {% endif %}
  99.                             {% if isEnabledCTAslide %}
  100.                                 <div class="item" data-dot="{{ sliderCounterContainer }}">
  101.                                     <picture>
  102.                                         <source data-srcset="{{ photoPathWebp }}" type="image/webp">
  103.                                         <source data-srcset="{{ photoPath }}" type="image/jpg">
  104.                                         <img itemprop="photo"
  105.                                             src="/images/placeholder.svg"
  106.                                             class="img-responsive lazyload"
  107.                                             alt="{{ photo.caption }}"
  108.                                             fetchpriority="low"
  109.                                         />
  110.                                     </picture>
  111.                                 </div>
  112.                             {% endif %}
  113.                         {% endif %}
  114.                     {% endfor %}
  115.                 </div>
  116.                 {% if isEnabledCTAslide %}
  117.                     <div class="cta-buttons" id="sliderCTA">
  118.                         {% include '@AqarmapListingBundle/Listing/ctaSliderView.html.twig' %}
  119.                     </div>
  120.                 {% endif %}
  121.             </div>
  122.         </div>
  123.     </div>
  124.     <div class="mobileSlider">
  125.         <div id="listingSliderModal" class="modal listing-slider-modal" role="dialog">
  126.             <div class="modal-header modal-lg border-0 position-absolute w-100">
  127.                 <div>
  128.                     <button onclick="imageSlider.closeListingSlider()" type="button" class="close-modal" ng-click="setIsMobileSliderOpen('false')">
  129.                         <img src="{{ asset('images/close.svg') }}" width="{{ iconSize }}" height="{{ iconSize }}">
  130.                     </button>
  131.                 </div>
  132.             </div>
  133.             <div class="modal-body p-0">
  134.                 <div class="modal-slider-container d-flex align-items-center">
  135.                     <div id="fullScreenImageSlider" class="listing-photo-slider__full-screen-container">
  136.                     </div>
  137.                 </div>
  138.             </div>
  140.         </div>
  141.     </div>
  142. {% endif %}