srcsets

Author: cathysarisky

default.hbs

@@ -9,7 +9,12 @@
 
     {{#is "home"}}
         {{#if @site.cover_image}}
+        {{#match @custom.header_section_layout "Large background"}}
             <link rel="preload" as="image" href="{{@site.cover_image}}">
+        {{else match @custom.header_section_layout "Side by side"}}
+            <link rel="preload" as="image" href="{{img_url @site.cover_image size="m"}}">
+        {{/match}}
+
         {{/if}}
     {{/is}}
 
@@ -46,8 +51,8 @@
                     <a class="gh-head-logo" href="{{@site.url}}">
                         {{#if @site.logo}}
                             <img srcset="{{img_url @site.logo size="s"}} 300w,
-                                {{img_url @site.logo size="m"}} 600w"
-                                sizes="(max-width: 600px) 50vw, 40vw"
+                                {{img_url @site.logo size="m"}} 720w"
+                                sizes="90vw"
                             src="{{img_url @site.logo size="s"}}" alt="{{@site.title}}"
                             >
                         {{else}}

index.hbs

@@ -18,9 +18,8 @@
                 {{#if @site.cover_image}}
                     <img class="gh-about-image" 
                         srcset="{{img_url @site.cover_image size="s"}} 300w,
-                            {{img_url @site.cover_image size="m"}} 720w,
-                            {{img_url @site.cover_image size="l"}} 960w"
-                        sizes="(max-width: 840px) 100vw, 50vw"
+                            {{img_url @site.cover_image size="m"}} 720w"
+                        sizes="(max-width: 720px) 100vw, 50vw"
                         src="{{@site.cover_image}}" alt="{{@site.title}}">
                 {{/if}}                
             {{/match}}

partials/loop.hbs

@@ -8,10 +8,14 @@
                         {{#match @custom.post_feed_layout "Parallax"}}class="jarallax-img"{{/match}}
                         srcset="{{img_url feature_image size="s"}} 300w,
                                 {{img_url feature_image size="m"}} 720w,
-                                {{img_url feature_image size="l"}} 960w,
+                                {{img_url feature_image size="l"}} 960w
+                        {{#match @custom.post_feed_layout "=" "Parallax"}},
                                 {{img_url feature_image size="xl"}} 1200w,
                                 {{img_url feature_image size="xxl"}} 2000w"
-                        sizes="(max-width: 1200px) 100vw, 1200px"
+                        sizes="(max-width: 1440px) 100vw, 1440px"
+                        {{else}}
+                        sizes="(max-width: 991px) 100vw, 50vw"
+                        {{/match}}
                         src="{{img_url feature_image size="m"}}"
                         alt="{{#if feature_image_alt}}{{feature_image_alt}}{{else}}{{title}}{{/if}}"
                     >