Choice between left an right align figure

[hug-sch]

At the current implementation, the figure and figcaption element is centered in the page (using the material template). You can add a class to the markdown code e.g. ![testcaption](test.png){ .myClass}. This class however is assigned to the img element; not the parent figure element. This makes it hard to style the figure.

I would like to have a choice between left, center or right aligned figure + figcaption. This could be done in CSS if there was a custom class assigned to the figure element.

There exists an extension called markdown-captions that does assign a custom class to the figure element. It uses the same syntax as the mkdocs-caption plugin.

[hug-sch]

Found a solution/work-around. Haven't noticed that you can also add a custom id to the figure e.g. ![testcaption](test.png){ #align-right}. Seems that you can style the figure with that. Something like:

#align-right {
    float: right;
    margin-top: 0;
    margin-left: 10px;
 }

 #align-right figcaption {
    text-align: left;
 }

[tobiasah]

Hey

Thanks for the issue.

You are right that I have not considered this use case. The attributes assigned to the image do not affect the figure.

Your solution with the custom ID is pretty neat and should work reasonably well. However, an id should be unique and a class can be reused. That's why I think a proper fix is needed.

I will prepare a change that enables the following:

Figure: Test Caption {class="TestClass" style="margin-left: 0px;"}

![](test.png){}

which should result in

<figure class="TestClass" style="margin-left: 0px;" id="_figure-1" >
    <img alt="" src="test.png"></a>
    <figcaption>Figure 1: Test Caption </figcaption>
</figure>

[hug-sch]

hi, your solution with a custom class is indeed the better solution. Three questions:

• will the existing markdown [testcaption](test.png){.myClass} continu to work?
• is it necessary to write out the word class. Another notation could be: Figure: Test Caption {.testclass #testID margin-left: 0px; float: right;} Everything without . or # is a literal attribute.
• I understand why you choose for example "Figure: two cars { }" as label (cfr Table). But, for an innocent reader, it's a little confusing that the "two cars" is actually the figcaption and not the name of the figure. Maybe you can consider Figcaption as label, e.g. "Figcaption: two cars { }"

Thanks for the amazing plugin.

[tobiasah]

1. Yes the change is fully backwards compatible. It's optional to use the Figure: notation
2. I had the same kind of thought... However, I was not able to find the code in the Python markdown parser that does this magic ... For now, I added a hacky little function that does this. So with the new version this kind of syntax will be possible (also for tables and custom identifiers).
3. Mhm that's a tricky one ... I choose Figure: because this is what is also put in front of the caption text (minus the index 😉 ). But I agree that it might be confusing. I added a config parameter markdown_identifier that can be used to change the default, e.g. Figure: for figures.