Insert Image?

[bordaigorl]

Insert Image?

[bordaigorl]

The easiest method is by using Markdown's syntax ![alt text](imageurl) but this requires your image is somewhere in the web and you have a valid URL pointing to it. This means that if the image is removed from the site it was hosted by, it will no longer appear in your note.

The usual way you do that in Evernote is by uploading the image (implicitly as an attachment) and put a reference to it in the note.

The plugin, being based on the textual interface of ST, does not have a direct way to interact with attachments. This could be a neat feature but needs a lot of work and I do not know if it would be worth it.
The Attach file function of the plugin could come in handy though:

1. you open the image file
2. ctrl+shift+p Evernote: Attach current file to a note
3. select the note you want to attach the image to

the attach_to_evernote_note command has an optional insert_in_content option (defaults to True) that will insert a reference to the attachment in the body of the note.

Unfortunately this does not currently work with images because ST3 previews them and does not set up a view from which one can retrieve the filename of the opened image so I think the previous instructions would just fail with an exception.

I'll think of a workaround, maybe a menu in the sidebar? a prompt for the filename?

[metalbrick]

Could it attach the image file to Notes automatically, if I use ![image](imageUrl)?
And change the imageUrl to uploaded one?

That will preserve the images even if the source of image is removed or unavailable.

[bordaigorl]

@metalbrick that's certainly possible but it requires a lot of new code.
I'll put this in the TODO list but I guess there are more urgent things and I have very little time at the moment.

If you wish to give it a go feel free to fork, create an "images" branch and submit a pull request.
It would be best if we discussed the specs here first though.

So, the technical difficulty with this is: the markdown parser needs to be modified to produce an <en-media type="image/jpeg" hash="HASH-HERE" /> tag; the HASH-HERE part is a hash of the contents of the image and needs to be computed by the plugin; then the note needs to be updated with a new resource containing the downloaded data + the hash.
Puttin all this in the parser seems ugly as you are making it dependent on the logics about Evernote notes. Making it return a complicated structure holding the hashes and the data seems as ugly. Implementing this as a post-processing step is very error prone, you'll need to hook in an HTML parser as html2markdown does. Maybe all of this would be easier if we switched to a more sane md parser like mistune but that requires work as well.
An additional problem is that the markdown source needs to be modified too: you cannot leave the ![image](imageUrl) unmodified or the next time you update the note the whole process will be done again, duplicating the resource in the attachments.

I think the best solution would be to tradeoff in terms of automation and do the following:
Provide an "Insert image" command that will prompt for an URL / filename and do the necessary work, inserting the <en-media /> tag accordingly in the current cursor position.
This will work only on already created notes as it will update the note remotely with the new attachment. I already have plans for this to be implemented.
This way you can choose if you want to have the image embedded in the note or loaded from external sources.

Another feature in my todo list is a command to list and view attachments...

[bordaigorl]

@oliverzy and @metalbrick I've implemented something in the attachments branch.
If you could try and test it and give some feedback that would be awesome.
I intend to include these changes in next release but I need to test and document them properly.

[metalbrick]

It sounds awesome, I'll totally try these features and give some feedback.

[metalbrick]

It seems not to work for me, the picture would be fine in the file at first inserting, as this:

<en-media type="cab43657734bb42bfd1563c6595a939b" hash="image/jpeg"/>

but when sync to online, it would just preserved as an attachment but not a image to present, and display as a Paperclip instead of the picture itself.

Moreover, when it get edited online and fetched back again, the tag of attachment totally changed, it became of picture of the clip like this:

<en-media border="0" style="margin-top: -1px;" type="image/png" align="left" hash="0bcd03d2024bf5fdbd9925f560b931f9"/>

[bordaigorl]

@metalbrick thanks a lot for trying it out!

I just pushed a commit solving the issue: I foolishly changed the order of the hash and type attributes but not the order of their values so the hash was containing the mime-type and viceversa.

It should work now. Can you confirm?

[metalbrick]

It work greatly now, I appreciate your nice work so much.

It would better if the process of uploading could be done background and not frozen the interface of sublime text.

[bordaigorl]

That's a good idea, however it is trickier to implement than it might seem.
I could do the update asynchronously but then I would have to backtrack in a messy way if things go wrong (say an exception happens and the upload is not successful).
I'll think about it...

[bordaigorl]

PR #29 has been merged with this new feature implemented.
It does not upload-download asynchronously but should work fine for reasonable files.
The download bit is done in memory for now but it would be a good idea to use the URL based method described here in the future.