Link to posts from teaser image and include image on post page

BrianMitchL · Dec 31, 2023 · 0db7b55 · 0db7b55
1 parent 7011ec0
commit 0db7b55
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 5 deletions.
diff --git a/src/_includes/layouts/post.njk b/src/_includes/layouts/post.njk
@@ -9,9 +9,14 @@ type: post
 </header>
 <main id="maincontent">
   <article itemscope itemtype="https://schema.org/BlogPosting">
+    {%- if image -%}
+      <div class="article-teaser">
+        <img itemprop="image" src="{{ image }}" alt="{{ imageAlt }}" />
+      </div>
+    {%- endif -%}
     <hgroup>
       <h1 itemprop="headline">{{ title }}</h1>
-      <p itemprop="subheading">{{ description }}</p>
+      <p>{{ description }}</p>
     </hgroup>
     <p class="flex-wrap-space-between">
       <span>

diff --git a/src/assets/css/partials/components.pcss b/src/assets/css/partials/components.pcss
@@ -133,6 +133,7 @@ a.tag {
 ol.tags-list,
 ul.tags-list {
   display: inline-flex;
+  align-items: center;
   padding-inline-start: 0.25em;
   flex-wrap: wrap;
   gap: 0.25rem;

diff --git a/src/posts.njk b/src/posts.njk
@@ -17,14 +17,16 @@ eleventyNavigation:
 ---
 
 {%- for post in posts -%}
-  <article>
+  <article itemscope itemtype="https://schema.org/BlogPosting">
     {%- if post.data.image -%}
     <div class="article-teaser">
-      <img src="{{ post.data.image }}" alt="{{ post.data.imageAlt }}" />
+      <a href="{{ post.url }}" aria-label="{{ post.data.title }}">
+        <img itemprop="image" src="{{ post.data.image }}" alt="{{ post.data.imageAlt }}" />
+      </a>
     </div>
     {%- endif -%}
-    <h2>
-      <a href="{{ post.url }}" class="link-heading">{{ post.data.title }}</a>
+    <h2 itemprop="headline">
+      <a href="{{ post.url }}" itemprop="url">{{ post.data.title }}</a>
     </h2>
     <div class="article-meta">
       <time