Save images offline (set default location, add file prefix, etc...)

[dxcore35]

Feature request

1. Add option to define if you want to download images offline

2. Add option to define default folder for saving images e.g. (Obsidian/Resources/Images/Clipped/)

3. Images should have prefix of the articles:

   Title: Food is about taste
   Image name: FoodIsAbo_ + image file name

This will help to group images from one article, if article contains a lot of them. It it will also help in general to manage images resources.

4. When it is on, the markdown online image references are replaced with future local references
5. All link to images are downloaded to folder set in settings

---

You already know the links to relevant images in articles. I see that it is fairly easy to download the links as images, and save them in appropriate folder. It is very beneficial to have the offline version of images and it make sense - as you already have the text offline.

[deathau]

This is something I have thought about. As discussed in issue #21 I'm unable to specify a download folder, and can't pick where I write things to. I can download multiple files at once, but they'll either all get dumped to the downloads folder or display a large number of "save as" modals...

My thoughts to get around this are to potentially pack all the images into a zip file, so there's only one download. But it needs more research and thought put into it.

Thanks for the suggestion, though! And the insights about having a prefix for the image name — that's a good idea 💡

[dxcore35]

Let me also share this app with you: https://optimage.app so you can see what it can do. It will be amazing to optimize images after downloading them, this feature will be consider as luxury feature :D

The code is open-source and available to use as python module.
https://github.com/sk-/optimage

[montemartin]

@deathau check out https://addons.mozilla.org/en-US/firefox/addon/maoxian-web-clipper/. They are able to bypass the save as locations with some manual setup by the user.

It also creates folders within the downloads folder by default. My thinking would be to do something similar to a browsers default Save Page As... functionality. Create a folder with a name matched to the name of the download file and use relative links to the images within that folder. I've found that to be a common pattern for apps that export files to markdown.

Then he end user could setup something like https://github.com/tfeldmann/organize or Hazel to move the file and folder to the desired location and optimize images. I'd be happy to write some docs on how to do it.

[deathau]

I was still tossing up between zipping images and having a subfolder. Thanks for your input @montemartin. Thinking about it more, the subfolder thing is pretty standard (even when you just SaveAs a HTML page). That's probably the route I'll take.

[deathau]

Also, organize looks pretty cool. If you do end up writing up a guide, I'd be happy to link it in my extension's description

[montemartin]

Great, I’m still working out my system, but I’ll write something up in the near future.

[deathau]

I've committed this functionality now: There's an option to download images, and a "prefix" for the images (which can use the same template substitutions as title/frontmatter/backmatter).

If you use a '/' in your prefix, that will create a subfolder when you download. So by default you could have {title}/image_ and all images will get the image_ prefix in a {title} subfolder. This subfolder is relative to wherever you choose to download the .md file

[montemartin]

This is a perfect solution! It solves several problems for me.

There does seem to be one small bug when combined with subfolders in the filename template. Images are still being created relative to the downloads folder instead of the file location after factoring in the filename template.

For example if my template is {title}/{date:YYYYMMDDHHMM}-{title}.md if the downloads prefix is set to images/ I'd expect images to end up in ~/Downloads/20201028230504/{title}/images. They are actually still downloading to ~/Downloads/images/.

I assume this wasn't the intended behavior. The filepath in the image links is set relative to the actual Markdown file, (i.e. ![](image/filename.ext) in the example above). Replicating the entire filename template in the downloads prefix field does put the images inside the same subfolder as the actual file, but writes the links with a path relative to the downloads folder and they still don't work.

The somewhat inelegant solution I came up with is to use the prefix {title}_images/. That makes it easy to associate the images folder with the correct folder and simply move it so the images are located correctly.

[deathau]

Ah, yeah, silly me I didn't make the image path relative to the .md path (because I'm basically just using both as a prefix to the filename that gets downloaded). I'll add it to my to-do list to check if the title template also has a slash and if so, get everything up to the last slash added to the image prefix as well.

In the meantime, another workaround would be to use the same prefix in both. For example, if your title template is {title}/{date:YYYYMMDDHHMM}/{title} you could set your image prefix to {title}/{date:YYYYMMDDHHMM}/images/
... which could be weird when I make it relative.

[adamalbrecht]

Also check out the TextBundle format: http://textbundle.org