articles partials now render the thumb of their headline media in the list

2 files changed, 35 insertions, 1 deletions

diff --git a/app/views/custom/partials/_article.html.erb b/app/views/custom/partials/_article.html.erb
index b738ac78..8485698a 100644
--- a/app/views/custom/partials/_article.html.erb
+++ b/app/views/custom/partials/_article.html.erb
@@ -3,5 +3,12 @@
   <div class="author_and_date">
     <%= date_for_page page %>, <%= author_for_page page %>
   </div>
-  <p class="excerpt"><%= page.abstract %> <%= link_to_path t(:more), page.node.unique_name %></p>
+  <div class="article_partial_layout">
+      <% if (headline = page.headline_asset) && headline.has_variant?(:thumb) %>
+        <div class="article_thumbnail">
+          <%= link_to_path image_tag(headline.upload.url(:thumb), :alt => ""), page.node.unique_name %>
+        </div>
+      <% end %>
+      <p class="excerpt"><%= page.abstract %> <%= link_to_path t(:more), page.node.unique_name %></p>
+    </div>
 </div>
diff --git a/public/stylesheets/ccc.css b/public/stylesheets/ccc.css
index b421684a..50b20b22 100644
--- a/public/stylesheets/ccc.css
+++ b/public/stylesheets/ccc.css
@@ -715,6 +715,10 @@ div.teaser_ruler {
   align-items: flex-start;
 }
 
+.chapter_thumbnail {
+  flex-shrink: 0;
+}
+
 .chapter_thumbnail img {
   width: 64px;
   height: 64px;
@@ -727,6 +731,29 @@ div.teaser_ruler {
   min-width: 0;
 }
 
+.article_partial_layout {
+  display: flow-root;
+  gap: 12px;
+  align-items: flex-start;
+}
+
+.article_thumbnail {
+  float: right;
+  margin: 0.5rem 0 8px 12px;
+}
+
+.article_thumbnail img {
+  width: 116px;
+  height: 116px;
+  object-fit: cover;
+  border-radius: 4px;
+  display: block;
+}
+
+.article_partial_layout .excerpt {
+  margin-top: 0;
+}
+
 .inline-image--full {
   width: 100%;
   margin: 1rem 0;