From fa8c5edd58f0827e28066c59c7077f138b00d172 Mon Sep 17 00:00:00 2001
From: Michael Tremer <michael.tremer@ipfire.org>
Date: Thu, 30 May 2019 15:30:10 +0100
Subject: [PATCH] wiki: Use <figure> for images

Signed-off-by: Michael Tremer <michael.tremer@ipfire.org>
---
 src/backend/wiki.py | 13 ++++++++-----
 src/scss/style.scss | 10 ++++------
 2 files changed, 12 insertions(+), 11 deletions(-)

diff --git a/src/backend/wiki.py b/src/backend/wiki.py
index 92d84c30..7a3d7d8c 100644
--- a/src/backend/wiki.py
+++ b/src/backend/wiki.py
@@ -569,11 +569,13 @@ class WikiRenderer(misc.Object):
 			% (address, alias or address)
 
 	def _render_image(self, m):
-		url, text = m.groups()
+		url, caption = m.groups()
 
 		# Skip any absolute and external URLs
 		if url.startswith("/") or url.startswith("https://") or url.startswith("http://"):
-			return """<img src="%s" alt="%s">""" % (url, text or "")
+			return """<figure class="figure"><img src="%s" class="figure-img img-fluid rounded" alt="%s">
+				<figcaption class="figure-caption">%s</figcaption></figure>
+			""" % (url, url, caption or "")
 
 		# Try to split query string
 		url, delimiter, qs = url.partition("?")
@@ -591,10 +593,11 @@ class WikiRenderer(misc.Object):
 
 		# Scale down the image if not already done
 		if not "s" in args:
-			args["s"] = "768"
+			args["s"] = "940"
 
-		return """<a href="%s?action=detail"><img src="%s?%s" alt="%s"></a>""" \
-			% (url, url, urllib.parse.urlencode(args), text or "")
+		return """<figure class="figure"><img src="%s?%s" class="figure-img img-fluid rounded" alt="%s">
+		<figcaption class="figure-caption">%s</figcaption></figure>
+		""" % (url, urllib.parse.urlencode(args), caption, caption or "")
 
 	def render(self, text):
 		logging.debug("Rendering %s" % self.path)
diff --git a/src/scss/style.scss b/src/scss/style.scss
index 70097153..c35b2f25 100644
--- a/src/scss/style.scss
+++ b/src/scss/style.scss
@@ -293,13 +293,11 @@ section {
 		font-size: $h6-font-size;
 	}
 
-	img {
-		@include img-fluid;
-
-		// Center all images
-		display: block;
-		margin-left: auto;
+	figure {
+		// Center images
+		display: table;
 		margin-right: auto;
+		margin-left: auto;
 
 		// Add some extra margin to the top & bottom
 		padding: ($spacer * 2) 0 ($spacer * 2) 0;
-- 
2.39.2