From 9ad2ac42159119098a7bd929cd521ebd3b2dbc8a Mon Sep 17 00:00:00 2001
From: Gordon Pedersen <death.au@death.id.au>
Date: Fri, 24 May 2024 10:22:17 +1000
Subject: [PATCH] Added image attachments to replies that have them

---
 weblog/B0. Template/js/fediverse.js.md | 17 ++++++++++++++++-
 weblog/B0. Template/styles.css.md      |  4 +++-
 2 files changed, 19 insertions(+), 2 deletions(-)

diff --git a/weblog/B0. Template/js/fediverse.js.md b/weblog/B0. Template/js/fediverse.js.md
index 7a460f1..bce48e3 100644
--- a/weblog/B0. Template/js/fediverse.js.md	
+++ b/weblog/B0. Template/js/fediverse.js.md	
@@ -132,7 +132,22 @@ function renderReplies(status, replies, replyContainer, template) {
     article.querySelector('time.dt-published').datetime = reply.created_at
     article.querySelector('time.dt-published').innerText = luxon.DateTime.fromISO(reply.created_at).toRelative()
     
-    article.querySelector('.reply-content').innerHTML = reply.content
+    const contentEl = article.querySelector('.reply-content')
+    contentEl.innerHTML = reply.content
+    // TODO: images
+    if(reply.media_attachments && reply.media_attachments.length > 0)
+    for(let att in reply.media_attachments.filter(a => a.type == "image")) {
+      const attachment = reply.media_attachments[att];
+      const imgLink = document.createElement('a')
+      imgLink.href = attachment.remote_url
+      imgLink.target = "_blank"
+      const img = document.createElement('img')
+      img.src = attachment.preview_url
+      if(attachment.description) img.alt = img.title = attachment.description
+      imgLink.appendChild(img)
+      contentEl.appendChild(imgLink)
+    }
+
     
     article.querySelector('a.source').href = reply.url
     article.querySelector('.application').innerText = reply.application.name
diff --git a/weblog/B0. Template/styles.css.md b/weblog/B0. Template/styles.css.md
index cf70c6e..56dc4b8 100644
--- a/weblog/B0. Template/styles.css.md	
+++ b/weblog/B0. Template/styles.css.md	
@@ -121,7 +121,9 @@ article p {
   width: 100%;
 }
 
-article p:has(img) {
+article p:not(.reply-content):has(img),
+a:has(img) {
+  display: block;
   text-align: center;
   width: 100%;
 }