templates/components/_image_gallery.html.twig line 1

Open in your IDE?
  1. <script type="text/x-template" id="image-gallery">
  2.     <div>
  3.         <modal title="{{ 'image_gallery.title'|trans({}, 'text') }}" identifier="image-gallery-modal"
  4.                :has-footer="false" :vertically-centered="true" size="xl">
  5.             <div class="row" v-if="isLoading">
  6.                 <div class="col-md-12">
  7.                     <div class="d-flex justify-content-center align-items-center py-3">
  8.                         <img class="w-25" src="{{ asset('build/images/preloader.svg') }}" alt="">
  9.                     </div>
  10.                 </div>
  11.             </div>
  13.             <div v-if="!isLoading" class="row">
  14.                 <div class="col-xl-3 col-lg-4 col-sm-6 mb-3">
  15.                     <div class="card h-100">
  16.                         <div class="h-100 w-100 d-flex justify-content-center align-items-center">
  17.                             <i v-show="isUploading" class="fa fa-spinner fa-pulse fa-5x"></i>
  19.                             <i v-show="!isUploading" class="fa fa-plus-circle fa-5x text-muted" style="cursor:pointer;" @click="selectFile"></i>
  21.                             <input type="file" hidden name="file" ref="fileInput" @change="uploadFile">
  22.                         </div>
  23.                     </div>
  24.                 </div>
  25.                 <div v-for="image in images" class="col-xl-3 col-lg-4 col-sm-6 mb-3">
  26.                     <div class="card h-100">
  27.                         <figure style="height: 170px; overflow: hidden; text-align: center;">
  28.                             <img class="img-fluid w-100"
  29.                                  :src="image.cachedPath">
  30.                         </figure>
  32.                         <div class="card-body">
  33.                             <p class="card-text text-muted" v-text="image.fullName"></p>
  35.                             <button class="btn btn-danger btn-block btn-sm" @click="selectImage(image.publicPath)">
  36.                                 <i class="fa fa-check-circle"></i>
  37.                                 {{ 'image.gallery.select_image'|trans({}, 'text') }}
  38.                             </button>
  39.                         </div>
  40.                     </div>
  41.                 </div>
  42.                 <div v-if="!isLoading && images.length == 0" class="h5 text-muted py-5 px-1">
  43.                     {{ 'no_images_found'|trans({}, 'text') }}
  44.                 </div>
  45.             </div>
  46.         </modal>
  47.     </div>
  48. </script>