image parsing

README.md

@@ -66,6 +66,17 @@ You'll have to come up with your own shortcodes for those.
 See wp.html in the layouts directory. You could customize interwiki links from dokuwiki: `[[custom>somelink]]` would refer to some custom wiki.
 Simply add custom.html and link to the website of your choice. Use Hugo's `{{ index .Params 0 }}` to get the link content.
 
+### Images
+
+Images are supported using the double `{{` syntax:
+
+1. simple image: ``{{someimg.jpg}}``
+2. positioning; left-right using space: ``{{ somerightaligned.jpg}}``
+3. dimensions: width only ``{{someimg.jpg?400}}``
+4. dimensions: width and height ``{{someimg.jpg?400x300}}``
+
+Of course combinations are also possible.
+
 ### TODO's
 
 There's a dokuwiki plugin which enables things like:
@@ -97,7 +108,6 @@ That way it's auto-loaded and wired in the main conversion.
 
 ### styling
 
-* Figure out image links ala http://php.net|{{wiki:dokuwiki-128.png}}
 * Tables, should complex ones be supported or can I do a manual convert?
 * no formatting (nowiki, %%) - should this just be a pre?
 

src/markdown/images.py

@@ -0,0 +1,45 @@
+from src.markdown_converter import MarkdownConverter
+from re import compile
+
+@MarkdownConverter.Register
+class MarkdownImages:
+    pattern = compile('{{(\s?)(.*?)(\s?)}}')
+
+    def parse_style(self, match):
+        style = []
+        left = match[0]
+        src = match[1]
+        right = match[2]
+
+        def parse_dimensions():
+            if not '?' in src:
+                return
+            dimensions = src.split("?")[1]
+            if 'x' in dimensions:
+                (width, height) = dimensions.split("x")
+                style.append("width: " + width + "px;")
+                style.append("height: " + height + "px;")
+            else:
+                style.append("width: " + dimensions + "px;")
+        def parse_position():
+            if len(left) > 0 and len(right) > 0:
+                style.append("margin-left: auto; margin-right: auto;")
+            elif len(left) > 0:
+                style.append("float: left;")
+            elif len(right) > 0:
+                style.append("float: right;")
+
+        parse_position()
+        parse_dimensions()
+        return ' '.join(style)
+
+    def parse_source(self, src):
+        source = src if not '?' in src else src.split('?')[0]
+        return source.replace(':', '/')
+
+    def convert(self, text):
+        result = text
+        for match in MarkdownImages.pattern.findall(text):
+            replaced = "<img style='%s' src='/img/%s'>" % (self.parse_style(match), self.parse_source(match[1]))
+            result = result.replace('{{' + ''.join(match) + '}}', replaced)
+        return result

test/markdown/test_images.py

@@ -0,0 +1,47 @@
+from unittest import TestCase
+
+from src.markdown.images import MarkdownImages
+
+class TestMarkdownImages(TestCase):
+    def setUp(self):
+        self.converter = MarkdownImages()
+
+    def test_simple_image_embed(self):
+        src = "{{img.png}}"
+        expected = "<img style='' src='/img/img.png'>"
+        self.assertEqual(expected, self.converter.convert(src))
+
+    def test_image_in_subdir(self):
+        src = "{{:dir:subdir:img.png}}"
+        expected = "<img style='' src='/img//dir/subdir/img.png'>"  # I really don't care about the double slash
+        self.assertEqual(expected, self.converter.convert(src))
+
+    def test_image_left_aligned(self):
+        src = "{{ img.png}}"
+        expected = "<img style='float: left;' src='/img/img.png'>"
+        self.assertEqual(expected, self.converter.convert(src))
+
+    def test_image_right_aligned(self):
+        src = "{{img.png }}"
+        expected = "<img style='float: right;' src='/img/img.png'>"
+        self.assertEqual(expected, self.converter.convert(src))
+
+    def test_image_right_aligned_with_specific_dimensions(self):
+        src = "{{ img.png?500x400}}"
+        expected = "<img style='float: left; width: 500px; height: 400px;' src='/img/img.png'>"
+        self.assertEqual(expected, self.converter.convert(src))
+
+    def test_image_center_aligned(self):
+        src = "{{ img.png }}"
+        expected = "<img style='margin-left: auto; margin-right: auto;' src='/img/img.png'>"
+        self.assertEqual(expected, self.converter.convert(src))
+
+    def test_image_with_specific_dimensions(self):
+        src = "{{img.png?500x400}}"
+        expected = "<img style='width: 500px; height: 400px;' src='/img/img.png'>"
+        self.assertEqual(expected, self.converter.convert(src))
+
+    def test_image_with_specific_width(self):
+        src = "{{img.png?500}}"
+        expected = "<img style='width: 500px;' src='/img/img.png'>"
+        self.assertEqual(expected, self.converter.convert(src))