Changing the image size of linked images in markdown document created by DevonThink extension

DEVONthink
1

Hi,

I use the DevonThink extension to save web pages that contain tutorials I’m interested in. I save them in markdown format because that makes it easier for me to edit them. I’m having the following problem.

The markdown documents created by the DevonThink extensions don’t insert the links to images in the same position where they are found in the original HTML document. Instead, it creates some sort of footnote reference:

![Screenshot of Website with Login Form][24]

and then it adds the link to the image file at the end of the document like this:

[24]: https:/path_to_image.png

When I create a PDF I find that many times the images are too big. The problem is that I don’t know how to change the image size. If the link to the image is inside the document, this is not hard to do. You just do the following:

![|500](https:/path_to_image.png)

and that will affect the size of the image when the document is rendered. But I can only do this on the list of links, not in the place where the image should appear in the document. I would need to change something in:

![Screenshot of Website with Login Form][24]

but I don’t know how to do it. If there were just a few images, it would be easy to copy each one of the links to the appropriate place in the document but this is just too much of a pain when there are a lot of images.

Can anybody tell me how to do this?

2

Do you want to affect all Markdown files or just some?

3

Well, I want to have a way to change the size of the images in the position where they appear in the text without having to cut and paste the link every time I want to increase the size of an image. It really depends on the document. In some cases it is necessary to reduce or increase the size of all images, in some other cases only a few images need resizing.

4

There seems to be a way to specify width/height directly in the Markdown:

https://fletcher.github.io/MultiMarkdown-6/syntax/attributes.html

Regardless:

This is not true in general. I see that happen with some sites, but not with others, where the image is inserted exactly at the same place as in the web document. Therefore, it might be helpful to provide a URL where you see that happen.

5

This is an example:

[https:/realpython.com/python-web-scraping-practical-introduction/]

Note: how do you insert links? I have to delete one of the ‘/’ in the URL because otherwise I get an error that says I cannot include links in my messages.

I haven’t been using this extension for a long time but so far, every single web page I have saved as markdown distributes the images this way.

I’m just a novice in markdown and I’m not understanding very well the relevance of the resource you linked. My problem is that I don’t know which one of the elements that are mentioned correspond to each of the elements I’m dealing with. That is:

Which one of these two:

![image][] and a [link][]

corresponds to the ones I find in my document:

![Screenshot of Website with Login Form][24]

[...] text text text text text text text text text text text text [...] 

[24]: https:/path to image with screenshot.png

In the examples from fletcher.github there is an URL in each one of the elements, whether it is an ‘image’ element or a ‘link’ element. Not so in the elements from the document I saved with the DevonThink extension.

And, more importantly, I still don’t know what the syntax would be to change the size of a given image (say the screenshot referenced as [24]) so that it appears in the desired size inline.

6

Using Markdown syntax, or by clicking on the chain symbol in the toolbar.

Now, if you look at the source of the website, you’ll see that they embed the img element in an a element, i.e. a link. Which leads, I guess, to DT handling this the same as it does any link on the page, namely by using a “reference link”. Which is perfectly legal MD syntax, as you’ll find out when you search for the term.

I linked to the Multimarkdown syntax description. Which is relevant because DT implements/uses Multimarkdown. Reference links might not be mentioned there, but they’re part of the MD syntax, of which MMD is an extension.

I’m afraid, but “desired size” is not a clear concept in the context of MD and HTML. First off, MD has no idea of size at all, it is just a markup language. It can be rendered to something else, like HTML. Which is what happens in DT’s preview.

But: Even in HTML, “desired size” is not a clear concept. Or rather: It depends on the real estate you’re dealing with. Would you want to see an image as 1024 by 800 pixels on a smartphone screen in portrait orientation? Hardly. Would you want to see it as 300 by 400 on a 27" monitor? Probably not. That’s why people came up with the idea of responsive images and use CSS to ensure that the images are at the “desired size” on whatever real estate there is available. Having said that, you could set up CSS so that it does The Right Thing™ with your images sometimes. But having it set up so that it works with all websites – no way.

We’ve, by the way, been over the question of images in MD several times already in this forum. You might want to use the search button to find those threads and learn about the various approaches, wishes, shortcomings, solutions (kind of) etc. I’m not going to repeat all that here. But: If layout is important to you, MD is not the solution. HTML might, but you’ll have to find that out for yourself. PDF is good for layout/page purposes, but doesn’t reflow.

Entering “Multimarkdown reference link image width” in my favorite search engine lead me to this: MultiMarkdown Link and Reference Image Attributes - Spec - CommonMark Discussion Perhaps the approach described there?

Aside: Nothing of that is related to DT, btw.

1 Like
7

OK. I appreciate your help and your didactic approach. It is clear to me now that this is not an issue with DT but with markdown. Now I understand what a ‘reference link’ is. I’m a total novice with markdown and even though I have read some tutorials, the term ‘reference link’ was not in my mind when I did searches to try to solve my problem. The problem still remains, though. I went to the link you provided, and even though they discuss this matter, as far as I can see, they don’t say anything that can answer the question I have. Now that I have the terminology, the question can be rephrased.

When the URL for an image link is inserted in an MD document, you can change size with the following syntax:

![|500](https:/path_to_image.png)

How can you achieve the equivalent result if the document uses a ‘reference link’ instead?

If any of the DT users participating in this forum can help me with this, I would appreciate it.

8

I’m sorry, but I misread the post that I linked to. I have no idea how to style a reference link.

What could be done is to modify the MD with a script so that it uses inline links. And those can be styled.

Btw: where did you find the syntax you say works for inline links?

9

This was suggested to me in a forum for Obsidian. The person that answered was surprised that the DT extension had chosen to transform all the inline links to images in the original HTML into reference links. He didn’t know how one would go about modifying any of the attributes of the image when a reference link was used. If I use the |500 strategy in one of the items of the list of links, the image is appropriately resized but then it is only visible next to the link itself. It disappears from the place where the reference link was introduced.

I have to admit that the ‘reference link’ strategy is elegant and a lot cleaner when there are a lot of images in a document but as you can see, this can become inconvenient some times.

I’m afraid my competence as a programmer is very limited so I would have a bit of a hard time figuring out how to write the kind of script that would be needed to change reference links to inline links. Perhaps the best solution would be for the DT extension to give you a choice as when it gives you the choice between a paginated PDF or a one page PDF.

10

I’m unsure if the |500 syntax is part of any widespread MD implementation.

As I said before: This is a misconception. DT transforms the links to reference links for those images embedded in an a element. Which does not mean all images. Regardless: The clipper also omits the three links available in the original document under the heading “Additional resources”. Which is not so good, in my opinion.

I’ll try to come up with a script.

11

Thanks again for your help!

12

The script and some explanations merited their own thread:

13

Wow! Thank you so much chrillek. This is perfect!!! This script is going to make my life a lot easier. What I like is I have the choice between making all the links inline links or just the ones I select. This is very useful indeed.