Align specific img to the right

[Johan1974NL]

Hello,

How can i align a specific img (so not all) to the right?

Thanks!

[ariehen]

By default, Markdown doesn’t support aligning images. You can, however, use CSS snippets to style them. Something like this should work. Add this as a CSS snippet and enable it. Tested with the default theme.

img[alt*="right"] {
    float:right;
    clear:right;
    margin-left: 1rem;
    margin-bottom: 2px;
    margin-top: 2px;
}

In your note, you would add |right to the image link like this:

![[Myaku-Myaku.png|right]]

[Johan1974NL]

Hello,

Thanks for that, it works in obsidian. But when i try to use the Pandoc Plugin and export as PDF (via Latex) the image is back to the left again. Also the standard function Export to PDF in obsidian does not keep the image to the right.

Any idea how i can make sure the image stays where i put him after an export to PDF?

Thanks!

[ariehen]

I can’t help with Pandoc image issues, but an Obsidian PDF export respects the above custom CSS and is fine for me. A slight update…

img[alt*="right"] {
    float:right;
    clear:right;
    margin-top: 1rem;
    /*margin-bottom: 4px;*/
    margin-left: 1rem;
    }

exports as:

If it’s not working for you, you could look into using !important or @media print {} CSS, but it shouldn’t be necessary here. Also, make sure Obsidian and your theme/plugins are updated, etc.

[Johan1974NL]

It does not seem to work for me. Also tried your example and the standard export PDF .

In the PDF the image allways shows back in the middle.

Let me check your suggestions about @media print

[ariehen]

Sorry to hear that.

I’d try making a test vault with one note, one image, and that snippet only.

Have a look at the debug help page, as well.

[anon63144152]

As a possible alternative, on macOS, HTML works on-screen and for PDF export. Don’t know about Pandoc. The syntax for the file path might well be different on Windows and Linux.

<img src="file:///full/path/to/image.extension" align="right" width="400">

[obsidian337]

Image Adjustments - SlRvb's Documentation - Obsidian Publish

I use the snippet from the above link.
And, it works well in the preview & ‘export to pdf’ within Obsidian.

![img|right|300](http://image.url) 
or
![[img.jpg|right|300]]

I’m not sure about pandoc because I don’t use it.

[Johan1974NL]

The last snippet seems to be working for me too.

Thanks!