Abstract
The HTML <picture>
element is a container used to specify multiple <source>
s for a specific <img>
. The browser will choose the most suitable source according to the current layout of the page and the screen it will be displayed on:
<picture>
<source srcset="pear-tablet.jpeg" media="(min-width: 1280px)">
<source srcset="pear-mobile.jpeg" media="(min-width: 720px)">
<img src="pear-tablet.jpeg" alt="The pear is juicy.">
</picture>
The <picture>
was introduced in the HTML 5.1 draft and implemented only in most current browsers Firefox > 38, Chrome > 43. The lack of support of the tag by IE and Safari makes it imposible to use the plain <picture>
element. Fortunately there is a plenty of polyfills which enables <picture>
element in browsers without its support.
Objective
Implement a markdown extension with a markup for <picture>
tag. Attention! The mdx_picture
doesn't implement any polyfills, so it supports only browsers with native <picture>
tag support. You should add a polyfill implementation by yourself.
Use
The markdown block
[picture]
[720px]: pear-mobile.jpeg
[1280px]: pear-tablet.jpeg
![This picture loads on non-supporting browsers.](image.jpg "The image title")
[/picture]
gets converted to
<picture>
<source srcset="pear-tablet.jpeg" media="(max-width: 1280px)">
<source srcset="pear-mobile.jpeg" media="(max-width: 720px)">
<img alt="This picture loads on non-supporting browsers." src="image.jpg" title="The image title" />
</picture>
Install
- From PyPi
pip install mdx_picture
- From Github
pip install git+git://github.com/speechkey/mdx_picture
Develop
- Create new virtual environment e.g.
mkvirtualenv mdx_picture
- Install dependencies by
pip install -r requirements.pip
Test
Test pip packet by python setup.py test
or run test manually by python -m mdx_picture.tests
.