Poor person's image scaling in Markdown

DEVONthink Tips
1

Occasionally, people are asking about image scaling in Markdown. One possibility is to (mis-)use a query string in the image URL, e.g. “width=half”:
![image alt text](https://example.com/image.gif?width=half)
and add this to your CSS:

figure :has(img[src*="width=half"]),
img[src*="width=half"]{
  width: 50%;
}

One has to use two rules, since images can occur inline (2nd rule) or in their own paragraph, in which case they’re rendered inside a figure element.

Alas, one can’t get at the value following the = sign in CSS. If that were possible, one could write generic CSS rules that simply take the width from the query string…

3 Likes
2

DT uses multimarkdown. You can do this using the following as an example:

![][Blackbird]

[Blackbird]: images/Blackbird_drawing.jpg style="width:40%;float:left"

You can add most ‘style’ elements. Is this what you are needing?

1 Like
3

I’m aware of that. My approach is slightly different in that it allows you to put a bunch off settings in a relatively short string. And thus change all
similar images in one go. Instead of having to modify every single one.

4

I use below, just change the width number, works perfectly.

![RAF McDonnell F-4M Phantom FGR.2 XV411 at the Manston Fire School \(1995\)](x-devonthink-item://78920E50-9988-4A68-9437-D5CBD15CD259 width=600)
5

Yes. I know. And I am not convinced that’s a good approach. 600 is pixels, and that doesn’t give convincing results on a smaller screen. Imagine an iPhone a width of 340 pixels, and you set your image size to 600 pixels… otoh, on a 1900px wide screen, a 600px image might look a bit lost.

My approach is more flexible, since it uses CSS that you can also modify to accommodate different screen sizes. And there’s only one place to modify if you change your mind, you don’t have to change all occurrences of width=600 to whatever, but only one line in a CSS file.

6

This is a very clever solution. Thanks for posting it.

The flexibility of the approach means one could extend it to have keywords not just for different sizes (?width=quarter, etc.), but also different styles (e.g. &style=plot, &style=photo, etc.), in a very compact form.

1 Like
7

:+1:

Exactly. I’m using this method to have Hugo (a static site generator) produce different class attributes for img elements.

8

Wait, are you saying you have a scheme that combines Hugo with DEVONthink?

9

No, not at all. I’m doing all my MD writing for Hugo in VS Code (integrates nicely with GitHub, has a basic Hugo extension, all that).
I’ll send you a PM with the details.

10

As I am not a coder, I think the width=? is just workable, the good thing about it is that you can have different sized images in the same text, which I do often. Furthermore, can you explain what you mean about the iPhone size, as I find using the above, resizes to match the screen without any other intervention.

11

What does “the above” refer to? We’re talking about manyPreformatted text different things here.

Generally, using absolute length values (px, pt, cm) for CSS properties is not a good idea, since these values work well only with certain device dimensions. If you want to display HTML (and that’s what rendered MD is), you should use relative length units like %, em, rem, vh etc.