Syntax to resize markdown images in Devonthink preview

Hi all

I wonder if one can use a DT/common MD syntax to resize images in markdown preview mode

ie for a link like

 ![CleanShot 2022-05-30 at 21.05.04](assets/CleanShot%202022-05-30%20at%2021.05.04.png) 

can one specify a min/max size?

@BLUEFROG , this time I did read the help file in depth but couldn’t find references to that in the markdown section :slight_smile: :slight_smile:

thx a bunch

Z

You probably have to do that in a CSS file/inline. MMD does not allow for classes to be added to its elements, afaik.

Thanks for trying beforehand :smiley:

@chrillek is correct in that this would be handled via styling, e.g,…

img {
width: 150px;
height:auto;
}

gotcha in that case…can I put a feature request for adding in link resize like in obsidian ie:

# MD
![AltText|100x100](https://url/to/image.png)
# or 
![[image.png|100x100]]

thx!

Z

I don’t think that’s a good idea. Firstly, I guess that these dimensionless values are meant to be in pixels. Which is not a sensible choice for sizes nowadays: while 100 pixels are a third of the screen width on an iPhone, they’re only about an eighth on an ipad and even less on the desktop. Why wouldn’t I want to see the image larger on a larger screen?
Secondly, such a modification breaks compatibility. Markdown is already fractured enough as it is. Introducing another “feature” is not helping.
Thirdly, the solution is already there, and it is called CSS.

1 Like

There’s also an option in Preferences > Editing to scale images automatically, this is applied to Markdown & rich text documents and formatted notes.

This does work in DT for resizing images:

[image-with-attributes]: logo.png “For this image, the height and width are specified” height=22px width=60px

Actually, this method would be for resizing specific images, not a global styling of all images.

The request is noted but that is non-standard behavior.

Note this useful trick:

<img src=“x-devonthink-item://40C41285-D0D3-484C-9946-AB2BF53B031E” width=“500” style=“float:right”>

width=“xxxx” … sets the size with xxxx pixels
style=“float:yyyy” … sets the float as “center, right, left” … cent is text above and below, right text is left of image, left text is right of image.

There is no center for float. And it has always been possible to use HTML in Markdown.

Ok - then show the examples. Please

Examples for what? If you’re looking for documentation on float, head over to MDN:

If you’re looking for ways to style MD documents, see here: