Merge pull request #4716 from devansh-webkul/slider-issue

Image Slider And Gallery Constraints Fixed

packages/Webkul/Velocity/publishable/assets/mix-manifest.json

@@ -1,5 +1,5 @@
 {
-    "/js/velocity.js": "/js/velocity.js?id=7f7a5e0de640a40550e1",
+    "/js/velocity.js": "/js/velocity.js?id=f4dcc51b765ad0cf788d",
     "/css/velocity-admin.css": "/css/velocity-admin.css?id=4322502d80a0e4a0affd",
     "/css/velocity.css": "/css/velocity.css?id=0625cac8a65cc7c4a9e2"
 }

packages/Webkul/Velocity/src/Resources/assets/js/UI/components/image-magnifier.vue

@@ -1,50 +1,60 @@
 <template>
-    <div class="video-container" v-if="currentType == 'video'">
-        <video :key="activeImageVideoURL" width="100%" controls>
-            <source :src="activeImageVideoURL" type="video/mp4">
-        </video>
-    </div>
-    <div class="image-container" v-else>
-        <div class="magnifier">
-            <img :src="activeImageVideoURL" :data-zoom-image="activeImageVideoURL"
-                :class="[!isMobile() ? 'main-product-image' : 'vc-small-product-image']">
+    <div class="outer-assets-container">
+        <div class="video-container" v-if="currentType == 'video'">
+            <video :key="activeImageVideoURL" width="100%" controls>
+                <source :src="activeImageVideoURL" type="video/mp4">
+            </video>
+        </div>
+        <div class="image-container" v-else>
+            <div class="magnifier">
+                <img :src="activeImageVideoURL" :data-zoom-image="activeImageVideoURL"
+                    :class="[!isMobile() ? 'main-product-image' : 'vc-small-product-image']">
+            </div>
         </div>
     </div>
 </template>
 
 <style lang="scss">
-    .image-container {
-        .magnifier {
-            > img {
-                max-width: 100%;
-                min-height: 530px;
-                max-height: 530px;
+    .outer-assets-container {
+        height: 420px;
+
+        .image-container {
+            .magnifier {
+                > img {
+                    max-width: 100%;
+                    max-height: 420px;
+                }
+            }
+        }
+
+        @media only screen and (max-width: 992px) {
+            .image-container {
+                margin: 0 auto;
+
+                .magnifier {
+                    > img {
+                        width: 100%;
+                        max-height: 300px;
+                    }
+                }
+            }
+        }
+
+        .video-container {
+            top: 50%;
+            position: relative;
+            min-height: 420px;
+            max-height: 420px;
+
+            video {
+                transform: translateY(-50%);
             }
         }
     }
 
     @media only screen and (max-width: 992px) {
-        .image-container {
-            margin: 0 auto;
-
-            .magnifier {
-                > img {
-                    height: 100%;
-                    min-height: unset;
-                    max-height: unset;
-                }
-            }
-        }
-    }
-
-    .video-container {
-        min-height: 530px;
-        max-height: 530px;
-
-        video {
-            top: 50%;
-            position: relative;
-            transform: translateY(-50%);
+        .outer-assets-container {
+            height: 300px;
         }
     }
 </style>

packages/Webkul/Velocity/src/Resources/views/shop/home/slider.blade.php

@@ -28,8 +28,7 @@
                             <a @if($slider['slider_path']) href="{{ $slider['slider_path'] }}" @endif>
                                 <img
                                     class="col-12 no-padding banner-icon"
-                                    src="{{ url()->to('/') . '/storage/' . $slider['path'] }}"
-                                    alt="" width="1298" height="450" />
+                                    src="{{ url()->to('/') . '/storage/' . $slider['path'] }}" />
 
                                 <div class="show-content" v-html="'{{ $textContent }}'">
                                 </div>