wiki: Use <figure> for images

Signed-off-by: Michael Tremer <michael.tremer@ipfire.org>

diff --git a/src/backend/wiki.py b/src/backend/wiki.py
index 92d84c301ac4b4a10b69b509d32b7978046e20a8..7a3d7d8c5e3bb77e387a7941a6a084ea43324716 100644 (file)
--- 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 700971534dcd56d1e2dba83606923d1d6ca7c714..c35b2f252e3850e19df93fd1a4f8c416ee9ec09f 100644 (file)
--- 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;