wip #3511 @1

diff --git a/app/Models/Product.php b/app/Models/Product.php
index 87d95878b0114c21f38000376696a64ee40637dd..3f31f3b817e6f2bb5373df202be0ad9fb2d1e3b5 100644 (file)
--- a/app/Models/Product.php
+++ b/app/Models/Product.php
@@ -391,6 +391,20 @@ class Product extends CubistMagicPageModel
         return $this->image_fallback;
     }
 
+    public function getImageAltAttribute()
+    {
+        if ($this->images) {
+
+            $image = $this->getFirstMediaAlt($this->images, '');
+
+            if ($image) {
+                return $image;
+            }
+        }
+
+        return $this->reference . ' - ' . $this->name;
+    }
+
 
     public function getSearchShortTitle()
     {

diff --git a/resources/styles/common/global.styl b/resources/styles/common/global.styl
index d85c3410ad8bbdc73f06114738463a76716221a4..a8cc346ad789ba01a65bafd328caf53c5c09b259 100644 (file)
--- a/resources/styles/common/global.styl
+++ b/resources/styles/common/global.styl
@@ -15,6 +15,18 @@ p:not(:last-child)
   horizontal-spacing($horizontal-gutter)
   width: 100%
 
+.bgimg
+  width 100%
+  height 100%
+  display inline
+  object-fit contain
+  object-position 50% 50%
+
+  .no-objectfit & {
+    height auto
+  }
+
+
 // Overlapping content
 $overlap-amount = 10vw
 

diff --git a/resources/styles/components/products.styl b/resources/styles/components/products.styl
index 469eb10ab98a0f13214725573e0eb767198c2a85..6c1eb4347e0e81dcb4f4bc1b10bf84487e3c3415 100644 (file)
--- a/resources/styles/components/products.styl
+++ b/resources/styles/components/products.styl
@@ -1,6 +1,7 @@
 .products
 
   // Grid view of products
+
   &-grid
     // When in auto grid mode, make the minimum width a bit
     // larger so we end up with 3 cols at the largest size.
@@ -25,6 +26,7 @@
     .links
       white-space nowrap;
       font-size 14px
+
       .link
         width 50%
         white-space nowrap
@@ -38,7 +40,9 @@
       overflow: hidden
 
       li
-        margin-bottom: 0 // avoids last line being partially cropped
+        margin-bottom: 0
+
+    // avoids last line being partially cropped
 
     h3
       height: 21px
@@ -49,8 +53,20 @@
   @apply bg-white relative pb-100p
 
   .product-img
-    @apply absolute bg-contain bg-center bg-no-repeat
+    @apply absolute
+
     width: 70%
     height: 70%
     top: 15%
     left: 15%
+
+    img
+      width 100%
+      height 100%
+      display inline
+      object-fit contain
+      object-position 50% 50%
+
+      .no-objectfit & {
+        height auto
+      }

diff --git a/resources/views/pages/home.blade.php b/resources/views/pages/home.blade.php
index f79d4078aa65019fe19ad7773cca2fe8db739c3b..a77ad3c42058e99af7a2ee6d71db95616b123381 100644 (file)
--- a/resources/views/pages/home.blade.php
+++ b/resources/views/pages/home.blade.php
@@ -105,8 +105,11 @@
                 @foreach ($page->get('solutions', []) as $solution)
                     <a class="solutions-link" href="{{ $nav->getHrefByID($solution['page']) }}">
                         <div class="solutions-link-sizer"></div>
-                        <span class="solutions-link-bg"
-                              style="background-image:url({{ $page->getImageURLbyCollection($solution['image']) }})"></span>
+                        <span class="solutions-link-bg">
+                            <img src="{{ $page->getImageURLbyCollection($solution['image']) }}"
+                                 alt="{{ $page->getImageAltbyCollection($solution['image'],$solution['title']) }}"
+                                 class="bgimg"/>
+                        </span>
                         <span class="solutions-link-text">{{ $solution['title'] }}</span>
                     </a>
                 @endforeach

diff --git a/resources/views/partials/home-products.blade.php b/resources/views/partials/home-products.blade.php
index 88e08f35342b7596aea6f2a56932369fb42b216a..f1d867955a8a8f07e298a771f6414e4f394a5a48 100644 (file)
--- a/resources/views/partials/home-products.blade.php
+++ b/resources/views/partials/home-products.blade.php
@@ -3,8 +3,10 @@
        href="{{ $nav->getHrefById('product_type/'.$highlight['link']) }}">
         <div class="flex items-center justify-center flex-grow">
             {{-- Proportional image holder --}}
-            <div class="mb-4 bg-contain bg-no-repeat bg-center w-full"
-                 style="padding-bottom: 62%; background-image: url({{ $page->getImageUrlByCollection($highlight['image']) }})"></div>
+            <div class="mb-4 bg-contain bg-no-repeat bg-center w-full">
+                <img src="{{ $page->getImageUrlByCollection($highlight['image']) }}"
+                     alt="{{$page->getImageAltByCollection($highlight['image'],$highlight['title'])}}" class="bgimg"/>
+            </div>
         </div>
         <p class="text-lg text-navy font-display font-medium">{{ $highlight['title'] }}</p>
     </a>

diff --git a/resources/views/partials/product-link.blade.php b/resources/views/partials/product-link.blade.php
index d89269d4add4167613ff6be00134980636408d5e..3f6bead2a05f6983da21b72f4356732dba92783e 100644 (file)
--- a/resources/views/partials/product-link.blade.php
+++ b/resources/views/partials/product-link.blade.php
@@ -5,8 +5,10 @@
     {{-- Image holder --}}
     <a href="{{ $product->getEntity()->URL }}">
         <div class="product-img-holder">
-            <div class="product-img"
-                 style="background-image: url({{ $product->getEntity()->image }})"></div>
+            <div class="product-img">
+                <img src="{{$product->getEntity()->image}}"
+                     alt="{{$product->getEntity()->image_alt}}"/>
+            </div>
         </div>
     </a>
 

diff --git a/webpack.mix.js b/webpack.mix.js
index a6d6bcab67d0cd764b08e5502fa9bdbb399ae005..b410481204662bd6f77a2d59d4dea30b53651690 100644 (file)
--- a/webpack.mix.js
+++ b/webpack.mix.js
@@ -19,6 +19,7 @@ mix.webpackConfig({
                 'css/cssgrid',
                 'css/flexbox',
                 'css/flexboxtweener',
+                'css/objectfit',
             ]
         }),
     ],