How to correctly clip webpage to markdown with images stored locally?

DEVONthink
1

I am trying to clip this page: Styling Components in SwiftUI - Moving Parts

The markdown file I got coverts the image to something as follows:

![A plain SwiftUI button with a blue label saying Continue.][3]

I have tried:

  • Clip the webpage in Safari via the DEVONthink extension
  • Open the webpage within DEVONthink and covert it to markdown directly

But neither of them worked for me

I have configured the DEVONthink’s image preference for markdown files to be:

Screenshot 2023-03-20 at 7.22.01 PM
Screenshot 2023-03-20 at 7.22.01 PM1772×1322 183 KB

Is this the correct configuration? Otherwise what is the correct way to clip a webpage as a markdown file with all its resources stored locally within DEVONthink’s database?

2

Might have to ask @BLUEFROG but I thought that setting pertained to drag and drop into an existing markdown file rather than the clipper. I use markdown mostly, but for webpages like that I would generally use either the HTML, or formatted note. The other option would be to use the services menu of Safari browser, i.e. Safari>Services>DevonThink3:Clip as Markdown. When you use that method you must select what part of the webpage you would like to import (which is why I like it), but in your case select all or cmd-A. May be that would produce better results?

3

Thanks for the suggestion!

It does create data representation of the image in Base64 format as data:image/png;base64 in the markdown file, but it loses the code format completely.

Plus, having the image as Base64 strings instead of local file, loses the capability of external references and deep linking with x-devonthink-item://, right?

Appreciate the help though! Hope there is a better solution of this.

4

This seems to be an issue of the clipper, the image’s URL is missing:

[3]:

We’ll check this.

1 Like
5

What I can see is that it is not an image file but an SVG.

<svg width="1280" height="628" viewBox="0 0 1280 628" fill="none" xmlns="http://www.w3.org/2000/svg">
   <rect width="279" height="125" transform="translate(45 63)" fill="#696969"></rect>
   <path d="M144.039 142.777C140.816 ... Z" fill="#FF7426"></path>
   <defs>
      <linearGradient id="paint0_linear_39_17" x1="641.888" y1="1.99997" x2="938.165" y2="145.431" gradientUnits="userSpaceOnUse">
         <stop stop-color="white" stop-opacity="0"></stop>
         <stop offset="0.515625" stop-color="white"></stop>
         <stop offset="1" stop-color="white" stop-opacity="0"></stop>
      </linearGradient>
   </defs>
</svg>

I believe this cannot be stored locally, so the entry [3]: also remains empty.

6

Thank you for looking into it!

7

The PNG files in the webpage are not stored, either

<aside class="example">
	<div class="image-holder">
		<p>
			<img alt="A sheet with a button, toggle, and range slider, where the button and toggle are displayed with their automatic styles, and the range slider is displayed with a rounded style." src="/img/styled-components/Modal-Presentation-Bug-iOS-16.2-dark-@3x.png">
		</p>
	</div>
</aside>
8

You are absolutely right, sorry I missed that. All generated image links in the markdown document point to the same index [3]:

9

@cgrunenberg Gentle nudge, any updates?

10

Nothing to report.

11

Fixed.