From caeb1b738ed0916e137442ee7221d2dd25445ee9 Mon Sep 17 00:00:00 2001
From: Rise Erpelding <rise@heysparkbox.com>
Date: Mon, 23 Oct 2023 06:27:47 -1000
Subject: [PATCH] feat: support featured image

- adds featured image to archive page
- adds featured image to top of post
---
 src/php/views/page.twig                    |  6 ++++++
 src/php/views/partials/content-single.twig | 21 ++++++++++++++++-----
 src/scss/base.scss                         |  1 +
 src/scss/components/_post-preview.scss     | 20 ++++++++++++++++++++
 4 files changed, 43 insertions(+), 5 deletions(-)
 create mode 100644 src/scss/components/_post-preview.scss

diff --git a/src/php/views/page.twig b/src/php/views/page.twig
index 9ab6467..4d3e81b 100644
--- a/src/php/views/page.twig
+++ b/src/php/views/page.twig
@@ -3,6 +3,12 @@
 {% block content %}
 
 	<div class="obj-width-limiter">
+		<img
+			src="{{ post.thumbnail.src|resize(960) }}"
+			{% if post.thumbnail.alt and post.thumbnail.alt|length > 0 %}
+				alt="{{ post.thumbnail.alt }}"
+			{% endif %}
+		/>
 		{{ post.content }}
 	</div>
 
diff --git a/src/php/views/partials/content-single.twig b/src/php/views/partials/content-single.twig
index f410556..63fb327 100644
--- a/src/php/views/partials/content-single.twig
+++ b/src/php/views/partials/content-single.twig
@@ -1,8 +1,19 @@
-<article id="post-{{ post.id }}">
-	<h2>
-		{{ post.title }}
-	</h2>
+<article id="post-{{ post.id }}" class="post-preview">
+	{% if post.thumbnail %}
+		<img
+			src="{{ post.thumbnail.src('thumbnail') }}"
+			class="post-preview__featured-image"
+			{% if post.thumbnail.alt and post.thumbnail.alt|length > 0 %}
+				alt="{{ post.thumbnail.alt }}"
+			{% endif %}
+		/>
+	{% endif %}
 	<div>
-		{{ post.preview }}
+		<h2 class="post-preview__title">
+			{{ post.title }}
+		</h2>
+		<div>
+			{{ post.preview }}
+		</div>
 	</div>
 </article>
diff --git a/src/scss/base.scss b/src/scss/base.scss
index 2e9cb2f..965eae4 100644
--- a/src/scss/base.scss
+++ b/src/scss/base.scss
@@ -64,6 +64,7 @@
 //    and our UI components are often composed of Objects and Components
 @import 'components/main-nav';
 @import 'components/pagination';
+@import 'components/post-preview';
 @import 'components/primary-sidebar';
 @import 'components/post-body';
 @import 'components/skip-to-content';
diff --git a/src/scss/components/_post-preview.scss b/src/scss/components/_post-preview.scss
new file mode 100644
index 0000000..74cbfb4
--- /dev/null
+++ b/src/scss/components/_post-preview.scss
@@ -0,0 +1,20 @@
+.post-preview {
+  margin-bottom: 1.5rem;
+  min-height: 9.375rem; // 150px
+
+  @media (min-width: 50rem) {
+    display: flex;
+    column-gap: 1.5rem;
+  }
+
+  &__title {
+    margin: 0 0 1rem;
+  }
+
+  &__featured-image {
+    max-height: 9.375rem; // 150px
+    max-width: 9.375rem; // 150px
+    width: auto;
+    height: auto;
+  }
+}