Render Images
flywire opened this issue · 1 comments
flywire commented
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:
Relevant link syntax
[link text](url)
produces<a href="url">link text</a>
Link text
is optional andurl
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 commented
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&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&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))