From 8bf1119b0b1989bd2dfd3f34798236e92e4bdada Mon Sep 17 00:00:00 2001
From: Damillora <damillora@damillora.com>
Date: Tue, 20 Apr 2021 16:04:39 +0700
Subject: [PATCH] feat: responsive post thumbnail images

---
 partials/post-background.hbs | 27 ++++++++++++++++-----------
 1 file changed, 16 insertions(+), 11 deletions(-)

diff --git a/partials/post-background.hbs b/partials/post-background.hbs
index c133da7..4ef1961 100644
--- a/partials/post-background.hbs
+++ b/partials/post-background.hbs
@@ -8,14 +8,19 @@ be a background image using CSS, we end up with a handful of inline styles.
 
 If the template in question has a background image, then we render responsive image styles
 for it, and apply those styles to the <header> tag. Else, we just output a <header> tag
-with a `no-image` class so we can style it accordingly.
---}}
-<div>
-    <div class="post-card__image">
-        {{#if feature_image}}
-        <img src="{{img_url feature_image size='m'}}" alt="{{title}}">
-        {{else}}
-        <img src="{{img_url @site.cover_image size='m'}}" alt="{{title}}">
-        {{/if}}
-    </div>
-</div>
+        with a `no-image` class so we can style it accordingly.
+        --}}
+        <div>
+            <div class="post-card__image">
+                {{#if feature_image}}
+                <img srcset="{{img_url feature_image size=" s"}} 300w, {{img_url feature_image size="m" }} 600w,
+                    {{img_url feature_image size="l" }} 1000w, {{img_url feature_image size="xl" }} 2000w"
+                    sizes="(max-width: 1000px) 400px, 700px" src="{{img_url feature_image size=" m"}}" alt="{{title}}">
+                {{else}}
+                <img srcset="{{img_url @site.cover_image size=" s"}} 300w, {{img_url @site.cover_image size="m" }} 600w,
+                    {{img_url @site.cover_image size="l" }} 1000w, {{img_url @site.cover_image size="xl" }} 2000w"
+                    sizes="(max-width: 1000px) 400px, 700px" src="{{img_url @site.cover_image size=" m"}}"
+                    alt="{{title}}">
+                {{/if}}
+            </div>
+        </div>
\ No newline at end of file