Use srcset for store logo so it looks good in more conditions (#2136)

bigcommerce · Nov 4, 2021 · 10fd59d · 10fd59d
1 parent b4ad913
commit 10fd59d
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 5 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -10,6 +10,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Fixed Quick View modal "X" button focus bubble being slightly off center [#2130](https://github.com/bigcommerce/cornerstone/pull/2130)
 - Apply dependency updates (jest & lighthouse). [#2132](https://github.com/bigcommerce/cornerstone/pull/2132)
 - Update lang file for FR locale. [#2139](https://github.com/bigcommerce/cornerstone/pull/2139)
+- Update store logo to use `srcset`. [#2136](https://github.com/bigcommerce/cornerstone/pull/2136)
 
 ## 6.1.1 (10-01-2021)
 - Fix product images on PDP has clipped outline. [#2124](https://github.com/bigcommerce/cornerstone/pull/2124)

diff --git a/templates/components/common/store-logo.html b/templates/components/common/store-logo.html
@@ -1,13 +1,20 @@
 <a href="{{urls.home}}" class="header-logo__link" data-header-logo-link>
     {{#if settings.store_logo.image}}
         {{#if theme_settings.logo_size '===' 'original'}}
-            <img class="header-logo-image-unknown-size" src="{{getImage settings.store_logo.image 'logo_size'}}" alt="{{settings.store_logo.title}}" title="{{settings.store_logo.title}}">
+        <img class="header-logo-image-unknown-size"
+             src="{{getImage settings.store_logo.image 'logo_size'}}"
+             alt="{{settings.store_logo.title}}"
+             title="{{settings.store_logo.title}}">
         {{else}}
-            <div class="header-logo-image-container">
-                <img class="header-logo-image" src="{{getImage settings.store_logo.image 'logo_size'}}" alt="{{settings.store_logo.title}}" title="{{settings.store_logo.title}}">
-            </div>
+        <div class="header-logo-image-container">
+            <img class="header-logo-image"
+                 src="{{getImage settings.store_logo.image 'logo_size'}}"
+                 srcset="{{getImageSrcset1x2x settings.store_logo.image theme_settings.logo_size}}"
+                 alt="{{settings.store_logo.title}}"
+                 title="{{settings.store_logo.title}}">
+        </div>
         {{/if}}
     {{else}}
-        <span class="header-logo-text">{{settings.store_logo.title}}</span>
+    <span class="header-logo-text">{{settings.store_logo.title}}</span>
     {{/if}}
 </a>