UPdate.

src/snek/system/template.py

@@ -123,7 +123,7 @@ def embed_image(text):
                 ".heic",
             ]
         ):
-            embed_template = f'<img src="{element.attrs["href"]}" title="{element.attrs["href"]}" alt="{element.attrs["href"]}" />'
+            embed_template = f'<img src="{element.attrs["href"]}" title="{element.attrs["href"]}?width=420" alt="{element.attrs["href"]}" />'
             element.replace_with(BeautifulSoup(embed_template, "html.parser"))
     return str(soup)
 

src/snek/templates/web.html

@@ -314,6 +314,36 @@
         }
     });
 
+    messagesContainer.addEventListener('click', (e) => {
+       if(e.target.tagName != 'IMG')
+           return
+      const img = e.target
+      const overlay = document.createElement('div');
+      overlay.style.position = 'fixed';
+      overlay.style.top = 0;
+      overlay.style.left = 0;
+      overlay.style.width = '100%';
+      overlay.style.height = '100%';
+      overlay.style.backgroundColor = 'rgba(0,0,0,0.9)';
+      overlay.style.display = 'flex';
+      overlay.style.justifyContent = 'center';
+      overlay.style.alignItems = 'center';
+      overlay.style.zIndex = 9999;
+
+      const fullImg = document.createElement('img');
+      fullImg.src = img.src;
+      fullImg.alt = img.alt;
+      fullImg.style.maxWidth = '90%';
+      fullImg.style.maxHeight = '90%';
+
+      overlay.appendChild(fullImg);
+
+      document.body.appendChild(overlay);
+
+      overlay.addEventListener('click', () => {
+        document.body.removeChild(overlay);
+      });
+    });
     initInputField(getInputField());
     updateLayout(true);
 </script>