From 08f6069124a7e0da6ca9d29757597ee8b5aca3d9 Mon Sep 17 00:00:00 2001
From: Mark Janiczak <markjaniczak@outlook.com>
Date: Wed, 17 Apr 2019 13:25:43 +1000
Subject: [PATCH] Added srcset tags to product thumbnails

There is a point just beneath the xs bootstrap 4 breakpoint (<576px) where the product thumbnail images are pixelated due to being too large. The srcset tag accomodates for this point and also retina devices where the ppi is much higher (2x).
---
 src/templates/thumbs/product/box.template.html  | 4 +++-
 src/templates/thumbs/product/list.template.html | 4 +++-
 src/templates/thumbs/product/template.html      | 4 +++-
 3 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/src/templates/thumbs/product/box.template.html b/src/templates/thumbs/product/box.template.html
index 3c69ffe7..e809e973 100644
--- a/src/templates/thumbs/product/box.template.html
+++ b/src/templates/thumbs/product/box.template.html
@@ -3,7 +3,9 @@
 	<div class="row">
 		<div class="col-12 col-lg-5">
 			<a href="[@URL@]" title="[@model@]">
-				<img src="[%asset_url type:'product' thumb:'thumb' id:'[@SKU@]'%][%param default%][%cdn_asset html:'0' library:'images'%]default_product.gif[%/cdn_asset%][%end param%][%/ asset_url%]" class="product-image img-fluid" width="100%" alt="[@model@]" rel="itmimg[@SKU@]">
+				[%set [@thumb@] %][%asset_url type:'product' thumb:'thumb' id:'[@SKU@]'%][%param default%][%cdn_asset html:'0' library:'images'%]default_product.gif[%/cdn_asset%][%end param%][%/asset_url%][%/set%]
+				[%set [@thumbL@] %][%asset_url type:'product' thumb:'thumbL' id:'[@SKU@]'%][%param default%][%cdn_asset html:'0' library:'images'%]default_product.gif[%/cdn_asset%][%end param%][%/asset_url%][%/set%]
+				<img srcset="[@thumb@] 200w, [@thumbL@] 350w, [@thumbL@] 2x" src="[@thumb@]" class="product-image img-fluid" width="100%" alt="[@model@]" rel="itmimg[@SKU@]">
 			</a>
 			[%if [@inpromo@]%]
 				<div class="savings-container"><span class="badge badge-danger">On Sale</span></div>
diff --git a/src/templates/thumbs/product/list.template.html b/src/templates/thumbs/product/list.template.html
index 52edcb8b..5d5d2765 100644
--- a/src/templates/thumbs/product/list.template.html
+++ b/src/templates/thumbs/product/list.template.html
@@ -7,7 +7,9 @@
 				<div class="row">
 					<div class="col-4 col-md-3">
 						<a href="[@URL@]" class="thumbnail-image">
-							<img src="[%asset_url type:'product' thumb:'thumb' id:'[@sku@]'%][%param default%][%cdn_asset html:'0' library:'images'%]default_product.gif[%/cdn_asset%][%/param%][%/asset_url%]" itemprop="image" class="product-image img-fluid" alt="[@model@]" rel="itmimg[@sku@]">
+								[%set [@thumb@] %][%asset_url type:'product' thumb:'thumb' id:'[@SKU@]'%][%param default%][%cdn_asset html:'0' library:'images'%]default_product.gif[%/cdn_asset%][%end param%][%/asset_url%][%/set%]
+								[%set [@thumbL@] %][%asset_url type:'product' thumb:'thumbL' id:'[@SKU@]'%][%param default%][%cdn_asset html:'0' library:'images'%]default_product.gif[%/cdn_asset%][%end param%][%/asset_url%][%/set%]
+							<img srcset="[@thumb@] 200w, [@thumbL@] 350w, [@thumbL@] 2x" src="[@thumb@]" itemprop="image" class="product-image img-fluid" alt="[@model@]" rel="itmimg[@sku@]">
 						</a>
 					</div>
 					<div class="col-8 col-md-6">
diff --git a/src/templates/thumbs/product/template.html b/src/templates/thumbs/product/template.html
index bc621f7a..0807eb97 100644
--- a/src/templates/thumbs/product/template.html
+++ b/src/templates/thumbs/product/template.html
@@ -4,7 +4,9 @@
 		<meta itemprop="brand" content="[@brand@]"/>
 		<meta itemprop="mpn" content="[@sku@]"/>
 		<a href="[@URL@]" class="thumbnail-image pb-2">
-			<img src="[%asset_url type:'product' thumb:'thumb' id:'[@SKU@]'%][%param default%][%cdn_asset html:'0' library:'images'%]default_product.gif[%/cdn_asset%][%end param%][%/asset_url%]" itemprop="image" class="product-image img-fluid" alt="[@model@]" rel="itmimg[@SKU@]">
+			[%set [@thumb@] %][%asset_url type:'product' thumb:'thumb' id:'[@SKU@]'%][%param default%][%cdn_asset html:'0' library:'images'%]default_product.gif[%/cdn_asset%][%end param%][%/asset_url%][%/set%]
+			[%set [@thumbL@] %][%asset_url type:'product' thumb:'thumbL' id:'[@SKU@]'%][%param default%][%cdn_asset html:'0' library:'images'%]default_product.gif[%/cdn_asset%][%end param%][%/asset_url%][%/set%]
+			<img srcset="[@thumb@] 200w, [@thumbL@] 350w, [@thumbL@] 2x" src="[@thumb@]" itemprop="image" class="product-image img-fluid" alt="[@model@]" rel="itmimg[@SKU@]">
 		</a>
 		<p class="card-title h4" itemprop="name"><a href="[@URL@]">[%format type:'text' truemaxlength:'50' rmhtml:'1'%][@model@][%/format%]</a></p>
 		<p class="price" itemprop="offers" itemscope itemtype="http://schema.org/Offer" aria-label="[@model@] price">