stuebersystems / mkdocs-img2fig-plugin

A MkDocs plugin that converts markdown encoded images into <figure> elements.

MkDocs Img2Fig Plugin

This MkDocs plugin converts markdown encoded images like

![An image caption](\assets\images\my-image.png)

into

<figure class="figure-image">
  <img src="\assets\images\my-image.png" alt="An image caption">
  <figcaption>An image caption</figcaption>
</figure>

Requirements

This package requires Python >=3.5 and MkDocs version 1.0 or higher.

Installation

Install the package with pip:

pip install mkdocs-img2fig-plugin

Enable the plugin in your mkdocs.yml:

plugins:
    - search
    - img2fig

Note: If you have no plugins entry in your config file yet, you'll likely also want to add the search plugin. MkDocs enables it by default if there is no plugins entry set, but now you have to enable it explicitly.

More information about plugins in the MkDocs documentation

mkdocs-img2fig-plugin's Issues

Allow markdown inside of figcaptions

Great plugin! I notice that markdown is not processed inside of the figure caption.

Example:

![**Figure 1** Markdown here is not processed by the plugin.](/images/figure1.jpg)

Produces the output:

<figure class="figure-image">
<img src="/images/figure1.jpg" alt="**Figure 1** Markdown here is not processed by the plugin."
<figcaption>**Figure 1** Markdown here is not processed by the plugin.</figcaption>
</figure>

Would be great to be able to format the text inside of the caption.

Add option to ignore converting certain figures

I have a feature request.

I would like the option to specify that some images in my page should not be converted to figures.

For example:

[![Actions Status](https://github.com/timvink/mkdocs-print-site-plugin/workflows/pytest/badge.svg)](https://github.com/timvink/mkdocs-print-site-plugin/actions)
![PyPI - Python Version](https://img.shields.io/pypi/pyversions/mkdocs-print-site-plugin)
![PyPI](https://img.shields.io/pypi/v/mkdocs-print-site-plugin)
![PyPI - Downloads](https://img.shields.io/pypi/dm/mkdocs-print-site-plugin)
[![codecov](https://codecov.io/gh/timvink/mkdocs-print-site-plugin/branch/master/graph/badge.svg)](https://codecov.io/gh/timvink/mkdocs-print-site-plugin)
![GitHub contributors](https://img.shields.io/github/contributors/timvink/mkdocs-print-site-plugin)
![PyPI - License](https://img.shields.io/pypi/l/mkdocs-print-site-plugin)

Should render as:

But renders as:

Proposal

I would suggest two updates:

• If an image does not contain a caption (f.e. ![](<path>)), do not convert
• If an image caption contains the words img2fig-ignore, remove the text from the caption and do not convert to figure

img2fig breaks relative links when use_directory_urls is set to True

With the following directory structure:

docs/
   - folder/page.md
   - sys.png
mkdocs.yml 

And use_directory_urls: true in mkdocs.yml, the images break when enabling this plugin.

The src path is not correct, f.e. changing:

<img alt="The github logo" src="../../github-octocat.png">

To

<figure class="figure-image">
  <img src="../github-octocat.png" alt="The github logo">
  <figcaption>The github logo</figcaption>
</figure>

For a reproducable example (try turning img2fig off and on):

git clone [email protected]:timvink/mkdocs-print-site-plugin.git
cd mkdocs-print-site-plugin
mkdocs serve -f tests/fixtures/projects/relative_images/mkdocs_img2fig.yml