support {attr} and fix img path error when use_directory_url=True

.gitignore

@@ -1,3 +1,4 @@
+.vscode/
 dist/
 *.egg-info/
 __pycache__/

README.md

@@ -2,22 +2,30 @@
 
 This [MkDocs](https://www.mkdocs.org) plugin converts markdown encoded images like
 
-```
-![An image caption](\assets\images\my-image.png)
+```markdown
+![An image caption](../images/my-image.png){align="right" width="20%"}
 ```
 
 into 
 
 ```html
 <figure class="figure-image">
-  <img src="\assets\images\my-image.png" alt="An image caption">
+  <img src="../../images/my-image.png" alt="An image caption" align="left" width="20%" >
   <figcaption>An image caption</figcaption>
 </figure>
 ```
 
+- of course, you could leave out `{align="right" width="20%"}`
+- support attr : https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/img
+- unfortunately, `align:center` is not supported. if you want to center image, use
+
+```markdown
+![An image caption](../images/my-image.png){width="20%" style="display:block; margin:0 auto;"}
+```
+
 ## Requirements
 
-This package requires Python >=3.5 and MkDocs version 1.0 or higher.  
+This package requires Python >=3.6 and MkDocs version 1.0 or higher.  
 
 ## Installation
 

setup.py

@@ -18,7 +18,7 @@ def read_file(fname):
     author='Antonio Cambule',
     author_email='[email protected]',
 	license='MIT',
-	python_requires='>=3.5',
+	python_requires='>=3.6',
     install_requires=[
 		'mkdocs'
 	],

src/plugin.py

@@ -2,19 +2,30 @@
 
 import re
 
+from pathlib import Path
 from mkdocs.plugins import BasePlugin
 
-class Image2FigurePlugin(BasePlugin):
 
+def modify_match(match):
+    caption, image_link, attr_list = match.groups()
+    image_link = ('..' / Path(image_link)).as_posix()
+    if attr_list:
+        attr_list = attr_list.replace('{', '').replace('}', '')
+    else:
+        attr_list = ''
+
+    return (
+        r'<figure class="figure-image">'
+        rf'  <img src="{image_link}" alt="{caption}" {attr_list}>'
+        rf'  <figcaption>{caption}</figcaption>'
+        r'</figure>'
+    )
+
+
+class Image2FigurePlugin(BasePlugin):
     def on_page_markdown(self, markdown, **kwargs):
-
-        pattern = re.compile(r'!\[(.*?)\]\((.*?)\)', flags=re.IGNORECASE)
-
-        markdown = re.sub(pattern,
-            r'<figure class="figure-image">\n' + \
-            r'  <img src="\2" alt="\1">\n' + \
-            r'  <figcaption>\1</figcaption>\n' + \
-            r'</figure>',                        
-            markdown)            
-
-        return markdown
+
+        pattern = re.compile(r'!\[(.*?)\]\((.*?)\)(\{[^\}]*\})?', flags=re.IGNORECASE)
+        markdown = re.sub(pattern, modify_match, markdown)
+
+        return markdown

tests/fixtures/docs/index.md

@@ -2,4 +2,6 @@
 
 Our image:
 
-![our image caption](github-octocat.png)
+![attr caption](github-octocat.png){align="right" width="20%"}
+
+![our image caption](github-octocat.png)

tests/fixtures/mkdocs.yml

@@ -1,5 +1,8 @@
 site_name: test img2fig page
 
+markdown_extensions:
+    - attr_list
+
 plugins:
     - search
     - img2fig

tests/test_plugin.py

@@ -85,4 +85,8 @@ def test_img2fig_output(tmp_path):
     assert os.path.exists(index_file), "%s does not exist" % index_file
 
     contents = pathlib.Path(index_file).read_text()
+    print(contents)
     assert "<figcaption>our image caption</figcaption>" in contents
+    assert '<img src="../github-octocat.png" alt="attr caption" align="right" width="20%">' in contents
+
+