From 41163d6abacce5d8c128d48b29957abe0030b54c Mon Sep 17 00:00:00 2001
From: Rise Erpelding <rise@heysparkbox.com>
Date: Thu, 26 Oct 2023 15:44:36 -1000
Subject: [PATCH] feat: add srcset for post image

refactor: use picture element for responsive images
---
 src/php/views/page.twig                    | 21 +++++++++++++++------
 src/php/views/partials/content-single.twig |  2 ++
 2 files changed, 17 insertions(+), 6 deletions(-)

diff --git a/src/php/views/page.twig b/src/php/views/page.twig
index b84b6d7e..e7736220 100644
--- a/src/php/views/page.twig
+++ b/src/php/views/page.twig
@@ -3,12 +3,21 @@
 {% block content %}
 	<div>
 		{% if post.thumbnail %}
-			<img
-				src="{{ post.thumbnail.src|resize(960) }}"
-				{% if post.thumbnail.alt and post.thumbnail.alt|length > 0 %}
-					alt="{{ post.thumbnail.alt }}"
-				{% endif %}
-			/>
+			{% set largest_image = post.thumbnail.src('large') %}
+			<picture>
+				{% for image_size in post.thumbnail.sizes|sort((a, b) => a.width <=> b.width)|keys %}
+					{% set largest_image = post.thumbnail.src(image_size) %}
+					<source srcset="{{ post.thumbnail.src(image_size) }}" media="(max-width: {{ post.thumbnail.sizes[image_size]['width'] }}px)" >
+				{% endfor %}
+				<img
+					src="{{ largest_image }}"
+					{% if post.thumbnail.alt and post.thumbnail.alt|length > 0 %}
+						alt="{{ post.thumbnail.alt }}"
+					{% else %}
+						alt=""
+					{% endif %}
+				>
+			</picture>
 		{% endif %}
 		{{ post.content }}
 		{# Loads comments.php by default #}
diff --git a/src/php/views/partials/content-single.twig b/src/php/views/partials/content-single.twig
index 63fb327e..48dab996 100644
--- a/src/php/views/partials/content-single.twig
+++ b/src/php/views/partials/content-single.twig
@@ -5,6 +5,8 @@
 			class="post-preview__featured-image"
 			{% if post.thumbnail.alt and post.thumbnail.alt|length > 0 %}
 				alt="{{ post.thumbnail.alt }}"
+			{% else %}
+				alt=""
 			{% endif %}
 		/>
 	{% endif %}