templates/ProfilePreview/components/media.partial.twig line 1

Open in your IDE?
  2. {% import 'ProfilePreview/utils/macros.partial.twig' as macros %}
  4. {% set isPhoto = profile.photos is defined and profile.photos|length > 0%}
  5. {% set isSelfie = profile.selfies is defined and profile.selfies|length > 0%}
  6. {% set isVideo = profile.confirmedVideos is defined and profile.confirmedVideos|length > 0%}
  8. {%- set activeElement = isPhoto ? 'photo' : (isSelfie ? 'selfie' : (isVideo ? 'video' : '')) -%}
  9. <div class="profile-media d-flex">
  10.     <div class="tab-list btn-list">
  11.         {%- set currentTab = '' -%}
  12.         {%- if isPhoto -%}
  13.             {%- set currentTab = 'photo' -%}
  14.             {{- macros._tab_btn('photo', activeElement) -}}
  15.          {%- endif -%}
  16.         {%- if isSelfie -%}
  17.             {%- set currentTab = currentTab == '' ? 'selfie' : currentTab -%}
  18.             {{- macros._tab_btn('selfie', activeElement) -}}
  19.         {%- endif -%}
  20.         {%- if isVideo -%}
  21.             {%- set currentTab = currentTab == '' ? 'video' : currentTab -%}
  22.             {{- macros._tab_btn('video', activeElement) -}}
  23.         {%- endif -%}
  24.     </div>
  26.     {# <div class="tab-content loading">
  27.         {% set skeletonCount = currentTab == 'photo' ? profile.photos|length : (currentTab == 'selfie' ? profile.selfies|length : profile.confirmedVideos|length) %}
  28.         {% set skeletonCount = skeletonCount > 5 ? 5 : skeletonCount %}
  29.         <div class="tab-content-item active">
  30.             <div class="photo-block">
  31.                 <div class="photo-list d-flex-c" id="photo-list">
  32.                     {% for i in 0..skeletonCount %}
  33.                         <div class="profile-media-link skeleton">
  35.                         </div>
  36.                     {% endfor %}
  37.                 </div>
  38.             </div>
  39.         </div>
  40.     </div> #}
  42.     <div class="tab-content">
  43.         {%- if profile.photos is defined and profile.photos|length > 0 -%}
  44.             <div class="tab-content-item{{ currentTab == 'photo' ? ' active' : '' }}" data-toggle-content="photo">
  45.                 <div class="photo-block swiper" id="photo-swiper">
  46.                     <div class="photo-list d-flex-c swiper-wrapper" id="photo-list">
  47.                         {%- for photo in profile.photos -%}
  48.                             {%- if photo.path -%}
  49.                                 {%- set alt = macros._get_alt(profile, servicesList, loop.index) -%}
  50.                                 <a class="profile-media-link image-fade skeleton swiper-slide" href="{{ responsive_asset(photo.path, "profile_media", "fullsize", "jpg") }}"
  51.                                     data-gallery="girl-gallery"
  52.                                     {# class="photoswipe" #}
  53.                                     data-index="{{loop.index}}">
  54.                                     <img
  55.                                         class="profile-media-image"
  56.                                         loading="lazy"
  57.                                         src="{{ responsive_asset(photo.path, "profile_media", "h150", "jpg") }}"
  58.                                         alt="{{ alt }}">
  59.                                 </a>
  60.                             {%- endif -%}
  61.                         {%- endfor -%}
  62.                     </div>
  63.                     <div class="swiper-scrollbar swiper-loading"></div>
  64.                     <div class="swiper-button-list swiper-loading">
  65.                         <div class="swiper-button swiper-button-prev"><span class="swiper-button-wrap swiper-button-prev-wrap"></span></div>
  66.                         <div class="swiper-button swiper-button-next"><span class="swiper-button-wrap swiper-button-next-wrap"></span></div>
  67.                     </div>
  68.                 </div>
  69.             </div>
  70.         {%- endif -%}
  71.         {% if profile.selfies is defined %}
  72.             <div class="tab-content-item{{ currentTab == 'selfie' ? ' active' : '' }}" data-toggle-content="selfie">
  73.                 <div class="photo-block swiper" id="selfie-swiper">
  74.                     <div class="photo-list d-flex-c swiper-wrapper" id="selfie-list">
  75.                         {% for photo in profile.selfies %}
  76.                             {%- if photo.path -%}
  77.                                 {% set uniqId = loop.index + profile.photos|length %}
  78.                                 {% set alt = macros._get_alt(profile, servicesList, uniqId) %}
  79.                                 <a class="profile-media-link image-fade skeleton swiper-slide" href="{{ responsive_asset(photo.path, "profile_media_selfie", "fullsize", "jpg") }}"
  80.                                     data-gallery="girl-selfie"
  81.                                     {# class="photoswipe" #}
  82.                                     data-index="{{uniqId}}">
  83.                                     <img
  84.                                         class="profile-media-image"
  85.                                         loading="lazy"
  86.                                         src="{{ responsive_asset(photo.path, "profile_media_selfie", "h150", "jpg") }}"
  87.                                         alt="{{ alt }}">
  88.                                 </a>
  89.                             {%- endif -%}
  90.                         {%- endfor -%}
  91.                     </div>
  92.                     <div class="swiper-scrollbar swiper-loading"></div>
  93.                     <div class="swiper-button-list swiper-loading">
  94.                         <div class="swiper-button swiper-button-prev"><span class="swiper-button-wrap swiper-button-prev-wrap"></span></div>
  95.                         <div class="swiper-button swiper-button-next"><span class="swiper-button-wrap swiper-button-next-wrap"></span></div>
  96.                     </div>
  97.                 </div>
  98.             </div>
  99.         {%- endif -%}
  100.         {% if profile.confirmedVideos is defined and profile.confirmedVideos|length > 0 %}
  101.             <div class="tab-content-item{{ currentTab == 'video' ? ' active' : '' }}" data-toggle-content="video">
  102.                 <div class="photo-block video-block swiper" id="video-swiper">
  103.                     <div class="photo-list video-list d-flex-c swiper-wrapper" id="video-list">
  104.                         {% for video in profile.confirmedVideos %}
  105.                             <div class="swiper-slide video-item profile-media-link">
  106.                                 <video class="" preload="metadata" width="341" height="227" loop>
  107.                                     <source src="{{ asset(video.path, template == 'profile' ? 'profile_media' : 'saloon_media_video') }}" type='video/mp4'/>
  108.                                 </video>
  109.                                 <svg class="video-play" width="80" height="81" viewBox="0 0 80 81"><path fill="#fff" fill-rule="evenodd" d="M40 7.28a33.35 33.35 0 0 0 0 66.67 33.35 33.35 0 0 0 0-66.67Zm0 60a26.7 26.7 0 0 1-26.67-26.66A26.7 26.7 0 0 1 40 13.95a26.7 26.7 0 0 1 26.67 26.67A26.7 26.7 0 0 1 40 67.28Zm13.33-26.66-20 15v-30l20 15Z" clip-rule="evenodd" opacity=".6"/></svg>
  110.                             </div>
  111.                         {%- endfor -%}
  112.                     </div>
  113.                     <div class="swiper-scrollbar swiper-loading"></div>
  114.                     <div class="swiper-button-list swiper-loading">
  115.                         <div class="swiper-button swiper-button-prev"><span class="swiper-button-wrap swiper-button-prev-wrap"></span></div>
  116.                         <div class="swiper-button swiper-button-next"><span class="swiper-button-wrap swiper-button-next-wrap"></span></div>
  117.                     </div>
  118.                 </div>
  119.             </div>
  120.         {%- endif -%}
  122.     </div>
  123. </div>
  125. <script>
  127. </script>