Add option for providing height/width of markdown images (#35)

equinor · Jun 5, 2019 · 277ea54 · 277ea54
1 parent 48120f8
commit 277ea54
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 5 deletions.
diff --git a/examples/example-markdown.md b/examples/example-markdown.md
@@ -23,7 +23,7 @@ Hi from a Markdown container containing Norwegian letters (æ ø å), some
 
 #### An image with a caption
 
-![Alt text](./example_banner.png "Some caption")
+![width=40%,height=300px](./example_banner.png "Some caption")
 
 #### Quote
 

diff --git a/webviz_config/containers/_markdown.py b/webviz_config/containers/_markdown.py
@@ -45,10 +45,21 @@ def handleMatch(self, match, data):
 
         url = webviz_assets.add(image_path)
 
+        image_style = ''
+        for style_prop in image.get('alt').split(','):
+            prop, value = style_prop.split('=')
+            if prop == 'width':
+                image_style += f'width: {value};'
+            elif prop == 'height':
+                image_style += f'height: {value};'
+
+        if image_style:
+            image.set('style', image_style)
+
         image.set('src', url)
         image.set('class', '_markdown_image')
 
-        container = etree.Element('span', attrib={'style': 'display: block'})
+        container = etree.Element('span')
         container.append(image)
 
         etree.SubElement(container,
@@ -62,6 +73,13 @@ def handleMatch(self, match, data):
 class Markdown(WebvizContainer):
     '''### Include Markdown
 
+_Note:_ The markdown syntax for images has been extended to support
+(optionally) providing width and/or height for individual images.
+To specify the dimensions write e.g.
+```markdown
+![width=40%,height=300px](./example_banner.png "Some caption")
+```
+
 This container renders and includes the content from a Markdown file. Images
 are supported, and should in the markdown file be given as either relative
 paths to the markdown file itself, or absolute paths.
@@ -80,10 +98,12 @@ class Markdown(WebvizContainer):
 
     ALLOWED_ATTRIBUTES = {
         '*': ['id', 'class', 'style'],
-        'img': ['src', 'alt', 'title'],
+        'img': ['src', 'alt', 'title', 'style'],
         'a': ['href', 'alt', 'title']
     }
 
+    ALLOWED_STYLES = ['width', 'height']
+
     def __init__(self, markdown_file: Path):
         self.html = bleach.clean(
                         markdown.markdown(
@@ -93,8 +113,9 @@ def __init__(self, markdown_file: Path):
                                         _WebvizMarkdownExtension(
                                             base_path=markdown_file.parent
                                                                  )]),
-                        Markdown.ALLOWED_TAGS,
-                        Markdown.ALLOWED_ATTRIBUTES
+                        tags=Markdown.ALLOWED_TAGS,
+                        attributes=Markdown.ALLOWED_ATTRIBUTES,
+                        styles=Markdown.ALLOWED_STYLES
                                 )
 
     @property