From: Vincent Vanwaelscappel <vincent@cubedesigners.com>
Date: Fri, 20 Mar 2020 13:01:31 +0000 (+0100)
Subject: wip #3511 @1
X-Git-Url: http://git.cubedesigners.com/?a=commitdiff_plain;h=a87d03886be98d80967447e03745defff8e67410;p=pmi.git

wip #3511 @1
---

diff --git a/app/Models/Product.php b/app/Models/Product.php
index 87d9587..3f31f3b 100644
--- 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 d85c341..a8cc346 100644
--- 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 469eb10..6c1eb43 100644
--- 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 f79d407..a77ad3c 100644
--- 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 88e08f3..f1d8679 100644
--- 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 d89269d..3f6bead 100644
--- 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 a6d6bca..b410481 100644
--- a/webpack.mix.js
+++ b/webpack.mix.js
@@ -19,6 +19,7 @@ mix.webpackConfig({
                 'css/cssgrid',
                 'css/flexbox',
                 'css/flexboxtweener',
+                'css/objectfit',
             ]
         }),
     ],