feat: add srcset for post image

refactor: use picture element for responsive images
sparkbox · Oct 31, 2023 · 41163d6 · 41163d6
1 parent 6fb3bb0
commit 41163d6
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 6 deletions.
diff --git 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
@@ -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 %}