Coder Social home page Coder Social logo

obsidian-local-images's Introduction

Obsidian Local Images

This plugin is still young, backups are a good idea.

Obsidian Local Images is a plugin for Obsidian desktop version.

The plugin finds all links to external images in your notes, downloads and saves images locally and finally adjusts the link in your note to point to the local image files.

For example, we initially have a markup in the note like this:

![](https://picsum.photos/200/300.jpg)

Local Images plugin will download image 300.jpg, save in media subdirectory of the vault, than change the markup so it refer to locally stored image:

![](media/300.jpg)

It is useful when you copy paste parts from web-pages, and want to keep images in your vault. Because external links can be moved or expired in future.

Use it with commands:

Download images locally -- your active page will be processed.

or

Download images locally for all your notes -- will be processed all the pages in your vault, that corresponds to Include parameter in the plugin's settings.

Also you can turn on in plugin's settings processing the active page when external links pasted into the page.

The plugin was not tested with mobile version, probably it can work with it too.

Credit

This plugin was developed from niekcandaele's code base. Key principles for downloading, saving were given there, and some texts too. Even the plugin's name is original.

Development

# Start the bundler in watch mode
npm run dev

# It's useful to set a symlink so you don't have to copy files over constantly
ln -s /home/user/code/obsidian-local-images /home/user/notes/dev/.obsidian/plugins/local-images

obsidian-local-images's People

Contributors

aleksey-rezvov avatar niekcandaele avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

obsidian-local-images's Issues

customize folder to save files

Nice plugin! Thanks.
It would be nice if user can set up the folder to save the files. For example, in media/%mdfilename%/, so all the saved files would be stuck unorderly in one folder.

Perfect for notes with files imported from Roam !!

This plugin is perfect to process notes that were imported from Roam. Roam stores all files in firebase and all you get is a link. No way to back up your files.

With this plugin, I can import all the images from my Roam notes into my Obsidian Vault. Marvelous !

It would be a dream if it could also do the same for other files, especially PDF... Possible?

change way of linking

The plugin now replaces the inline links to images with . For me this leads to issues. Maybe because the name of my media folder contains a space? Could instead the link be generated like: ![[media/300.jpg]]? This would work better I think

How is it different from the default feature in Obsidian?

If I copy an image and paste it, it would paste it from a link and preview it. But, if I Shift + Paste, then it creates a local file for the image and pastes it.

Is there something different with his plugin?

EDIT: Got it. It can actually capture all the images in the selected and pasted text. While what I was suggesting, it was just for images.

On Paste Processing

Looks like On Paste Processing option doesn't work.

When I paste url image to my note than I need to run download images command manually to start the downloading process.

Any idea why is it happening, any chance to fix it?

Support more media end element types

I have a suggested enhancement...

  • Support download for more media types - eg. .mp3
  • Support src attribute in more element types - eg. <source>

Using podcast app Snipd, users can clip parts of podcast episodes. Snips stores the clip, together with a transcript, AI generated summary and any user-contributed notes.

These lists can be exported to formats including Obsidian Markdown, allowing for review, reading and even listening of the clips inside an Obsidian note.

The exported files use <audio> to embed the user's clips, stored remotely...

<audio controls> <source src="https://traffic.megaphone.fm/SCIM5444804832.mp3?updated=1659667448#t=09:38,10:44"> </audio>

Given the impermanence of things online, it may be advantageous for a user to download these clips to local storage.

Supporting .mp3 and <source> would allow for this.

Is it possible to paste images into a {fileName}.assets subfolder

Thanks for your work. Is it possible to paste images into a {fileName}.assets subfolder like Typora? For a file "example.md" create images folder ./{fileName}.assets. So in the same directory there will be a example.assets folder created when you paste images in obsidian.

Multiple folder destinations per note type/folder

Imagine a system with note types like this...

  • Podcast notes
  • Book notes
  • Academic paper notes
  • Journal entries

All of those are very different types. Using a single media folder would store unrelated images together. This could also become a management headache.

How about being able to set multiple media folder destinations?

This could be based on...

  • Note's existing folder (prefer a "media" or "assets" sub-folder rather than the same folder as the notes themselves).
  • Some metadata.
  • Custom ask every time.

Supports “file:///” protocol

I hope Supports “ file:///” protocol
and this picture will saved in the local vault。
For example:
i pasted a picture like this:
![](file:///C:\Users\xxxxxx.png)
but I want it to be like this
![](media/xxxx.png)

[FR] Don't insert images with external link format

Instead of create external links (![Alt text](path/to/file/image.png)) insert images just in the Obsidian format (![[image.png]]).

The first option gets in the way because the images appear in Graph View as if they were external files.

Image processing failed: RequestError: certificate has expired

Certain images are not downloading. For example, this image will not download:

https://asylum.madhouse-project.org/assets/asylum/images/posts/multi-purpose-keys/m01-layout.png

This is the error I'm getting:

Image processing failed:  RequestError: certificate has expired
    at ClientRequest.eval (eval at <anonymous> (app://obsidian.md/app.js:1:1), <anonymous>:13478:111)
    at Object.onceWrapper (events.js:422:26)
    at ClientRequest.emit (events.js:327:22)
    at ClientRequest.origin.emit (eval at <anonymous> (app://obsidian.md/app.js:1:1), <anonymous>:7976:20)
    at TLSSocket.socketErrorListener (_http_client.js:426:9)
    at TLSSocket.emit (events.js:315:20)
    at emitErrorNT (internal/streams/destroy.js:92:8)
    at emitErrorAndCloseNT (internal/streams/destroy.js:60:3)
    at processTicksAndRejections (internal/process/task_queues.js:84:21)
    at TLSSocket.onConnectSecure (_tls_wrap.js:1501:34)
    at TLSSocket.emit (events.js:315:20)
    at TLSSocket._finishInit (_tls_wrap.js:936:8)
    at TLSWrap.ssl.onhandshakedone (_tls_wrap.js:710:12)
eval
[Violation] 'setInterval' handler took 50ms

Error occur when the plugin is used on a Chinese website

When the plug-in is used on a Chinese website, sometimes the plug-in cannot directly recognize the link that has appeared in the article, but it can recognize the link copied from the web page; when the plug-in is used to automatically scan, the picture will not appear in the correct position.

Serious problems occur when processing multiple consecutive images

When multiple consecutive pictures are pasted from the clipboard at the same time, there will be a serious problem in batch localization using the plug in the pictures will become only a few repeated and the order is chaotic. For example, I copied in 50 pictures, and only 4 pictures remained after running the command. They kept repeating and the order was chaotic. This plug-in is a plug-in that I think is very easy to use. It will be better if we can solve this problem!

Could not use proxy

The plugin doesn't support proxy. There is no place to add a proxy,and the system proxy doesn't work too. However,obsidian can load network images which must using system proxy. Could you please add this feature?
Thank you and sorry for my poor english.

Need the support of 'relative directory'

After the conversion, the current internal image link is ![](Assets/grid.jpg).
This will not work when it is stored on Github since Github uses a different link format. If there is an option to use the relative/absolute directory, such as ![](../../Assets/grid.jpg), it will be great.

Wrong filename when link has a name and a size

If i have for example this link with a name and size ![image|444](https://pbs.twimg.com/media/FRf4fsMX0Ac5cK2.jpg) the image gets the name of the link and size like this image|444.jpg and not the image original name FRf4fsMX0Ac5cK2.jpg

The link in the document is changed to ![image|444](media/image|444.jpg) so the link name is kept as is but the image now have the wrong name. Is this by design or is it a bug?

I would prefer to always keep the original filename and not pick up the link name as it does now, or have an option in the settings so i can choose to save the original filename or to save the file with the link name as filename.

BUG: download images will cause images mismatch or repeat.

When try to use this plugin to download images to local folder, it will mismatch iamges order and use some repeat images to replace the right one.

The original markdown with images by the weblink:

image

The images download to local folder by this plugin.

image

The original markdown with images by the weblink:

image

The images download to local folder by this plugin.

image

FR support for mobile

Please add support for mobile.

For fun i tried to change the flag from true to false and manually install your plugin on mobile.

PNG Image Links are Not Processed

Obsidian Version 0.12.19
Local Images Version 0.14.2

When I run this plugin it works wonderfully for many image types but seems to ignore PNG image links. I've tried with several PNG image URLs and the plugin skips them.

Plugin does not work at all (MacBook)

Hi,
thank you for taking the effort to program such a useful plugin. I know it is new, so I like to tell you that I installed it in my obsidian version on my Macbook and the plugin does not work at all. I am used to install and activate plugins and don't see an obvious reason from my side why it does not work. So probably it has to do with the code?

I find your plugin very useful and I appreciate your time you spend on this. Very helpful.

Pietro

Feature request: remove the outer link of a nested link

I found that some websites use nested links like [![caption](https://xxx.png)](https://xxx.png) and the plugin only resolve the inner link into [![caption](local/path)](https://xxx.png). If it's possible to remove the outer one? Thanks a lot!

a bug

When the url of the two pictures are very similar like this:

![](https://picsum.photos/100/300.jpg)
![](https://picsum.photos/200/300.jpg)

Local Images plugin will only download image 300.jpg

![](media/300.jpg)

[Bug] Issues with Obsidian folder names with spaces (includes Possible Fix)

Hi

I have had some trouble with a media folder named 10000 - Media I believe the issue is with the spaces.

image

image

I had to change the markdown link to 10000%20-%20Media to make the links to work.

image

If I put 10000%20-%20Media in the plugins settings media folder. It doesn’t work because it creates 10000%20-%20Media as another folder.

Instead, I modified the imageTagProcessor function to write the markdown link with 10000%20-%20Media via encoding the whole link before writing.

The following line

return `![${anchor}](${fileName})`;

with

if (fileName) {
                            const filenameTmp = encodeURI(fileName);
                            return `![${anchor}](${filenameTmp})`;
                       }

I wasn't sure what functionrecreateImageTag did but presumed it should be changed as well.

function recreateImageTag(match: string, anchor: string, link: string) {

with

function recreateImageTag(match, anchor, link) {
     console.info(link);
     link = encodeURI(link);
     console.info(link);
     return `![${anchor}](${link})`;
 }

I just wondered if anything else needs to be changed and if this will break current links and workflows in other peoples vaults?

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.