Do you plan on adding better image support?

Features & ideas
1

Hi,

I’ve been using Inkdrop for about a week now, I really love it.

I understand this a lot of hard work, though before committing to using it as my main note taking / life-long learning system I’d like to know your plans regarding image support. I have 2 main features in mind.

  1. support HTTP redirect in ![link to image](http://some/address/here) to close the Dropbox loop

At the moment, on Mac, the Dropbox application makes it possible to take a screenshot, have it automatically uploaded online and, if we click fast enough on the popup that appears for a few sec, get the public URL to that image in the clipboard. This almost makes it fast and easy to get screenshots into Inkdrops notes, which would be central to my note taking system since it allows to create an image in a note in a couple of seconds and keep the mental focus on what I’m writing about.

The process above does not work unfortunately, because the link we get in the clipboard points to a location that HTTP redirects us to the actual image, and Inkdrop’s current ![link to image](http://some/address/here) does not follow redirections at the moment.

Do you plan on adding that in the future?

  1. image resizing.

Again, the point here is to keep the mental focus on writing: I take a screenshot, i get it in my notes with the process above, I resize it quickly and I move on with my thoughts. If I need to open Gimp or whatever to reduce the image size it just breaks the mental focus and defeats the point.

At the moment this is not possible since the Inkdrop markdown flavour does not support resizes.

This might sound picky, thought from a learning / note-taking perspective, the ability to manipulate the knowledge both intellectually and visually improves long term retention. Lack of basic screenshot support current prevents that.

Again, I’m developper myself, I do understand this is all hard-work. I’m not asking if this will be done tomorrow, I’d just like to know if this is part of the strategy you have in mind for the product.

Thanks in advance for any feed-back,

2

Hi Svend,

Thank you for the suggestions.

  1. support HTTP redirect for images

I confirmed that it is already supported for 302 Found HTTP redirections.
The app is based on Chrominium and it just inserts a <img> tag for the specified image URL.
It looks like Dropbox uses a different way for the redirection?
Please check if it is possible on your Chrome browser.

  1. image resizing

I understand your need, but I’m afraid that it can’t break the standard Markdown (GFM) compatibility.
Maybe making a plugin for that would be one of solutions but it won’t work on mobile.

At the moment, it is not planned to support.
As I’m focusing on the current roadmap, this feature may be considered on the next roadmap after discussing with other users.

Thanks!

3

Thanks for the quick answer,

I’m not sure how the Dropbox redirect works, here’s an example: when looked up with curl -O -L, the image gets downloaded correctly:

curl -L -O https://www.dropbox.com/s/up9b4sxj1g63o7u/Screenshot%202017-12-22%2023.12.44.png

Although when I do a simple GET from Postman, I get a 200 with an html page.

Anyhow. Thanks for the link to the roadmap,

Svend

4

For the image resize, do you think it would be doable to support plain html ? In the Stackoverflow answer below, I see this comment that Markdown often supports html as a superset. I just tried that with Inkdrop now, it does not work at the moment, though if it were implemented that would solve my issue, <img ..> html tag offer an easy way to resize images

What do you think ?

1 Like
5

It seems like Dropbox responds a html with 200 status code for browser access and a 302 redirection for curl based on user-agent.
Unfortunately it’s impossible to support this kind of url. Instead, please open up a link on your browser, right-click an image and select Copy Image Address. It worked for me, a bit annoying though.

For the image resize, thank for the link.
I’m afraid that raw HTMLs aren’t supported since a Markdown renderer module internally used in the app prohibits it due to the security reason. It needs to hack somehow.
Let me consider about it once I have finished the current roadmap.

6

Oh, good point about security, I did not think of that when considering letting a markdown interpreter accept raw HTML.

Thanks for the super quick and detailed update, and congrats for the hard work, looking forward for the content of the next roadmaps.

Take care,

S

7

If the security issue could be solved. I also looking forward to use the image resize feature.

1 Like
8

Regarding image resizing: I don’t think the need here is to free-size all images and record those settings in code, but rather, having all images at 100% width pushes the content down and makes harder to scroll through the article.

I was about to create themes with:

.editor img.inline-widget,
.mde-preview img {
    max-height: 240px;
}

^ solves most of my problems.

But then I realize we could be duplicating the work b/c every color theme may need a color-img-smaller version. So I’m thinking about making a blank plugin with no JS and just these lines.

Still hoping to make it a global setting tho, this is what Ulysses do for their preview images.

And if we can please put a class on this wrapping div:

59%20PM
Screen Shot 2018-03-28 at 7.12.59 PM.png930×186 32.4 KB

Then we can easily put multiple images on the same line, too.

9

Hi Samantha,

The plugin would be great!
I guess this is a sort of personal preference problem.
If we have a CSS like you suggest, some people may not like it.
I don’t feel like adding more options because I’d like to keep it simple.
So plugins are nice way to solve such problems.

However, smaller images would make them hard to see, so it’d be nice to have a feature to show an image with its actual size on a separate window.
Let me think carefully about it, including whether it should be a plugin or a built-in feature.

The inline image widget is implemented with line widget which is a CodeMirror feature. I’m afraid that putting multiple images on the same line would not be recommended.

Thanks for your feedback!

10

Ah makes sense. Plugin for now: https://app.inkdrop.info/plugins/img-small

3 Likes
11

Great, thanks!

12

I know this is an old thread, but I thought I’d add that you can use dropbox links in Inkdrop. For details, checkout this blog post. The key point is this:

After you copy the public Dropbox link to your clipboard, just change ?dl=0 to ?raw=1 at the end of the URL.

13

Thank you for the suggestion, @anon22943317.
I’m planning it to support in the roadmap recently announced. Please read this article:

https://blog.inkdrop.info/the-roadmap-of-inkdrop-vol-3-a32fc0cc42d

14

Awesome!

15

As of v4.1.0, it supports user stylesheet.
You can resize images with a following custom stylesheet:

.editor {
  .mde-cm-wrapper .CodeMirror .CodeMirror-linewidget, .mde-preview {
    img[alt$='#small'] {
      max-width: 75% !important;
      min-width: 200pt !important;
    }

    img[alt$='#x-small'] {
      max-width: 50% !important;
      min-width: 100pt !important;
    }

    img[alt$='#xx-small'] {
      max-width: 25% !important;
      min-width: 50pt !important;
    }

  }
}

With these rules defined, your images with alt attribute ending with #small will be rendered in small size. You can insert images in Markdown as following:

![image.jpg](inkdrop://file:srPsQH8nx)
![image.jpg #small](inkdrop://file:srPsQH8nx)
![image.jpg #x-small](inkdrop://file:srPsQH8nx)
![image.jpg #xx-small](inkdrop://file:srPsQH8nx)

The app will render like so:

resizing-images-example
resizing-images-example.jpg2110×2600 2.01 MB

Here is the documentation about this:

I would like to mark this topic as resolved. Thanks folks!