Width/height attributes on images

rapidez · Sep 10, 2021 · 5f46d7a · 5f46d7a
1 parent cc3d9ac
commit 5f46d7a
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 12 deletions.
diff --git a/resources/views/cart/overview.blade.php b/resources/views/cart/overview.blade.php
@@ -11,10 +11,10 @@
                 <div class="w-1/6 sm:w-1/12 pr-3">
                     <a :href="item.url" class="block">
                         <picture>
-                            <source :srcset="'/storage/resizes/100x100/catalog/product' + item.image + '.webp'" type="image/webp">
+                            <source :srcset="'/storage/resizes/80x80/catalog/product' + item.image + '.webp'" type="image/webp">
                             <img
                                 :alt="item.name"
-                                :src="'/storage/resizes/100x100/catalog/product' + item.image"
+                                :src="'/storage/resizes/80x80/catalog/product' + item.image"
                                 height="100"
                                 class="mx-auto"
                             />

diff --git a/resources/views/layouts/partials/header/autocomplete.blade.php b/resources/views/layouts/partials/header/autocomplete.blade.php
@@ -28,8 +28,8 @@ class="flex w-1/2 sm:w-1/2 md:w-1/3 px-4 my-4"
                 >
                     <a :href="suggestion.source.url" class="flex flex-wrap w-full h-full" key="suggestion._id">
                         <picture class="contents">
-                            <source :srcset="'/storage/resizes/100x100/catalog/product' + suggestion.source.thumbnail + '.webp'" type="image/webp">
-                            <img :src="'/storage/resizes/100x100/catalog/product' + suggestion.source.thumbnail" class="object-contain lg:w-3/12 self-center" />
+                            <source :srcset="'/storage/resizes/80x80/catalog/product' + suggestion.source.thumbnail + '.webp'" type="image/webp">
+                            <img :src="'/storage/resizes/80x80/catalog/product' + suggestion.source.thumbnail" class="object-contain lg:w-3/12 self-center" />
                         </picture>
                         <div class="px-2 flex flex-wrap flex-grow lg:w-1/2">
                             <strong class="block hyphens w-full">@{{ suggestion.source.name }}</strong>

diff --git a/resources/views/listing/partials/item.blade.php b/resources/views/listing/partials/item.blade.php
@@ -3,7 +3,7 @@
         <a :href="item.url" class="block">
             <picture v-if="item.thumbnail">
                 <source :srcset="'/storage/resizes/200/catalog/product' + item.thumbnail + '.webp'" type="image/webp">
-                <img :src="'/storage/resizes/200/catalog/product' + item.thumbnail" class="object-contain rounded-t h-48 w-full mb-3" :alt="item.name" loading="lazy" />
+                <img :src="'/storage/resizes/200/catalog/product' + item.thumbnail" class="object-contain rounded-t h-48 w-full mb-3" :alt="item.name" loading="lazy" width="200" height="200" />
             </picture>
             <x-rapidez::no-image v-else class="rounded-t h-48 mb-3"/>
             <div class="px-2">

diff --git a/resources/views/product/partials/images.blade.php b/resources/views/product/partials/images.blade.php
@@ -4,16 +4,18 @@
             <a
                 :href="config.media_url + '/catalog/product' + images[active]"
                 class="flex items-center justify-center"
-                :class="zoomed ? 'fixed inset-0 bg-white !h-full z-10 cursor-[zoom-out]' : 'border rounded p-5 h-[450px]'"
+                :class="zoomed ? 'fixed inset-0 bg-white !h-full z-10 cursor-[zoom-out]' : 'border rounded p-5 h-[440px]'"
                 v-on:click.prevent="toggleZoom"
             >
                 <picture v-if="!zoomed" class="contents">
-                    <source :srcset="'/storage/resizes/450/catalog/product' + images[active] + '.webp'" type="image/webp">
+                    <source :srcset="'/storage/resizes/400/catalog/product' + images[active] + '.webp'" type="image/webp">
                     <img
-                        :src="'/storage/resizes/450/catalog/product' + images[active]"
+                        :src="'/storage/resizes/400/catalog/product' + images[active]"
                         alt="{{ $product->name }}"
-                        class="max-h-full max-w-full"
+                        class="object-contain w-full m-auto max-h-[400px]"
                         loading="lazy"
+                        width="400"
+                        height="400"
                     />
                 </picture>
                 <img
@@ -44,12 +46,14 @@ class="flex items-center justify-center bg-white border rounded p-2 mr-3 mb-3 h-
                 @click.prevent="change(imageId)"
             >
                 <picture class="contents">
-                    <source :srcset="'/storage/resizes/100x100/catalog/product' + image + '.webp'" type="image/webp">
+                    <source :srcset="'/storage/resizes/80x80/catalog/product' + image + '.webp'" type="image/webp">
                     <img
-                        :src="'/storage/resizes/100x100/catalog/product' + image"
+                        :src="'/storage/resizes/80x80/catalog/product' + image"
                         alt="{{ $product->name }}"
-                        class="max-h-full max-w-full"
+                        class="object-contain w-full m-auto max-h-[80px]"
                         loading="lazy"
+                        width="80"
+                        height="80"
                     />
                 </picture>
             </a>