Render Images

[flywire]

I'd like to render images in wikilinks. This extends to using images as links and image thumbnails as links to images (as in caption).

Background:

Markdown reference:

Relevant link syntax

• [link text](url) produces <a href="url">link text</a>
Link text is optional and url can be a relative path

As a wikilink: [[url|link text]]

Relevant image syntax

• ![alt text](url) produces <img src="url" alt="alt text">
Alt text is optional

As a wikilink: [[url|alt=text]] (requires valid image url as described below)
Note: Title variants are not shown in above examples.

---

The WikiLink definition varies. I'm interested in the GitHub variant (which does not support image title) but the MediaWiki variant is relevant despite the full implementation being far too extensive.

In common:

• imagesuffixes = ('png', 'jpg', jpeg', 'gif') preceded by a .
• imageprefixes = ('', 'File:', 'Image:')
• imagepipes = ('Alt') followed by =

---

Key code to change:

            a = etree.Element('img')
            a.set('alt', label)
            a.set('src', url)

[flywire]

Making progress:

<p><img alt="Wikilink" class="wikilink-image" src="wikilink.png.html" /></p>
<p><img alt="File Name" class="wikilink-image" src="/path/to/file-name.jpg.html" /></p>
<p><img alt="File Name" class="wikilink-image" src="/path/to/file_name.jpeg.html" /></p>
<p><img alt="File Name" class="wikilink-image" src="/path/to/file-name.gif.html" /></p>
<p><img alt="File Name" class="wikilink-image" src="/path/to/file-name.png.html?a=b&amp;b=c" /></p>
<p><img alt="www.example.png" class="wikilink-image" src="https://www.example.png/" /></p>
<p><img alt="www.example.jpg" class="wikilink-image" src="https://www.example.jpg/?a=b&amp;b=c" /></p>
<p><img alt="Example Tutorial" class="wikilink-image" src="https://www.example.com/example-tutorial.jpeg" /></p>
<p><img alt="Example Tutorial" class="wikilink-image" src="https://www.example.com/example-tutorial.gif" /></p>
<p><img alt="Example Tutorial|alt=Alternate example" class="wikilink-image" src="https://www.example.com/example-tutorial.gif" /></p>

md_configs = {
                'mdx_wikilink_plus': {
                    'base_url': '',
                    'end_url': '.html',
                    'url_whitespace': '-',
                    'url_case': 'lowercase',
                    'label_case': 'titlecase',
                    'html_class': 'wikilink-image',
                    #'build_url': build_url, # A callable
                    # all of the above config params are optional
                },
             }


text = """
[[wikilink.png]]

[[/path/to/file name.jpg]]

[[/path/to/file_name.jpeg]]

[[/path/to/file-name.gif]]

[[/path/to/file name.png/?a=b&b=c]]

[[https://www.example.png/?]]

[[https://www.example.jpg/?a=b&b=c]]

[[https://www.example.com/example-tutorial.jpeg]]

[[https://www.example.com/example-tutorial.gif | Example Tutorial]]

[[https://www.example.com/example-tutorial.gif | Example Tutorial|alt=Alternate example]]
"""

import markdown
print(markdown.Markdown(extensions=['mdx_wikilink_plus'], extension_configs=md_configs).convert(text))