feat: support featured image

- adds featured image to archive page
- adds featured image to top of post

Author: rise-erpelding

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>
 

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>

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';

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;
+  }
+}