use proper image rendering instead of preview (#377)

fsr-de · Aug 9, 2023 · cfed8ee · cfed8ee
1 parent eeb79b5
commit cfed8ee
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 1 deletion.
diff --git a/myhpi/core/markdown/extensions.py b/myhpi/core/markdown/extensions.py
@@ -7,6 +7,7 @@
 from markdown.inlinepatterns import LinkInlineProcessor
 from markdown.preprocessors import Preprocessor
 from wagtail.core.models import Page
+from wagtail.images.models import Image
 
 
 class MinutesBasePreprocessor(Preprocessor):
@@ -158,6 +159,22 @@ def url(self, id):
         return Page.objects.get(id=id).localized.get_url()
 
 
+class ImagePattern(LinkInlineProcessor):
+    def handleMatch(self, m, data=None):
+        el = markdown.util.etree.Element("img")
+        try:
+            el.set("src", self.url(m.group("id")))
+            el.set("alt", markdown.util.AtomicString(m.group("title")))
+            el.set("class", "rendered-image")
+        except ObjectDoesNotExist:
+            el = markdown.util.etree.Element("span")
+            el.text = markdown.util.AtomicString(_("[missing image]"))
+        return el, m.start(0), m.end(0)
+
+    def url(self, id):
+        return Image.objects.get(id=id).get_rendition("width-800").url
+
+
 class MinuteExtension(Extension):
     def extendMarkdown(self, md):
         md.registerExtension(self)
@@ -172,3 +189,8 @@ def extendMarkdown(self, md):
             "InternalLinkPattern",
             200,
         )
+        md.inlinePatterns.register(
+            ImagePattern(r"!\[(?P<title>[^\[]+)\]\(image:(?P<id>\d+)\)", md),
+            "ImagePattern",
+            200,
+        )
diff --git a/myhpi/static/js/admin/easymde_custom.js b/myhpi/static/js/admin/easymde_custom.js
@@ -69,7 +69,7 @@ window.wagtailMarkdown.options = {
                         onload: IMAGE_CHOOSER_MODAL_ONLOAD_HANDLERS,
                         responses: {
                             imageChosen: function (t) {
-                                editor.codemirror.replaceSelection("![" + t.title + "](" + t.preview.url + ")")
+                                editor.codemirror.replaceSelection("![" + t.title + "](image:" + t.id + ")");
                             }
                         },
 

diff --git a/myhpi/static/scss/myHPI.scss b/myhpi/static/scss/myHPI.scss
@@ -207,6 +207,10 @@ h1.toc-title::after {
     margin-top: -0.25rem;
 }
 
+.rendered-image {
+    max-width: 100%;
+}
+
 @import "./navbar.scss";
 @import "./footer.scss";