Creole IMG sizes

Adding sizes to images

The standard creole markup for an image is in the form of:

{{image.png}}

When converted to HTML, it generates:

>>> from creole import creole2html
>>> creole2html("{{image.png}}")
'<p><img src="image.png" title="image.png" alt="image.png" /></p>'
>>> 

Optionally, a descriptive text can be added to the image by using a vertical bar separator:

>>> creole2html("{{image.png | A description of the image }}")
'<p><img src="image.png" title="A description of the image" alt="A description of the image" /></p>'

Unfortunately, the <img> lacks any size metric. This prevents the html page from properly rendering until the image has been downloaded enough to provide dimensions. This is why a large web page with many pictures will "jump around" as the rendering engine continually redraws the page while it loads.

So, python-creole has added an additional non-standard expansion, where the final dimensions of the image can be passed with an additional vertical bar separator:

{{image.png | A description of the image | 200x150 }}

which would now generate the following html:

>>> creole2html("{{image.png | A description of the image | 200x150 }}")
'<p><img src="image.png" title="A description of the image " alt="A description of the image " width="200" height="150" /></p>'
>>> 

This addition can be turned off by passing strict=True as a parameter:

>>> creole2html("{{image.png | A description of the image | 200x150 }}", strict=True)
'<p><img src="image.png" title="A description of the image | 200x150" alt="A description of the image | 200x150" /></p>'
>>>