Image Thumbnails in Sidebar

Features & ideas
1

Similar to Evernote, see this image for example:

1181×665 197 KB

This is very useful to me for say listing React components to see overview of how they look like.

2

Hi Mark,

Thank you for the suggestion.
Yeah it looks nice to have.
I’m working on the current roadmap right now, so it’ll be discussed when planning the next roadmap once finished.

1 Like
3

Hey Takuya, was thinking as well that if we can have the image thumbnails be programmable via plugins, it will open up really cool plugin implementations.

Like for example, we can program plugins that will automatically get thumbnails of “movies to watch” or “album art”, anime pictures from character names or even plugins that will automatically generate background image for tasks so they look distinct and ‘fresh’.

1 Like
4

Oh, that’s cool and yes, it’s possible with a plugin.
Here is an example of a custom note list view plugin:

All you have to do is put an image view on it :slight_smile:

1 Like
5

I will be really busy atm. so anyone who wants to take on making this plugin, feel free to do so, just comment here so I won’t try and duplicate the effort.

Otherwise, I’ll get on it once I get some more free time to hack around.

6

Sorry for waking up a thread that was gone to sleep a few months ago.

I want to try to make this plugin, but if I replace the NoteListItemView with a custom view, tags and update date/time and so on will disappear.
I think I need to know the original code of NoteListItemView, could you tell me about it?

7

Hi @yk4to,

As I’ve mentioned above, the simple-note-list plugin is the best example for your plugin.
Please take a look at the plugin and see how to display tags and other metadata in your custom view.

1 Like
8

Thank you for your reply.

I made a plugin based on simple-note-list plugin.

This almost works, but there are a problem: when it try to load an image with a path like inkdrop://file:~, the image cannot be displayed.

sample
sample614×746 48.2 KB

3 Likes
9

@yk4to wowww, that looks awesome!
You have to simply replace the "inkdrop://file:***" URI with "inkdrop-file://file:***".

EDIT:

I found that the plugin converts Markdown into HTML, then extracts img tags. This would significantly affect performance:

You can instead use regex to extract images from Markdown like so:

10

I’ve been able to support Inkdrop URIs by replacing them using regex.
(Thank you, Takuya-san!)

As for how to extract image URLs, there are several ways to add images to Markdown.

For example:

![alt text](https://~/~.png)

![alt text](https://~/~.png "title")

![alt text][sampleImg]
[sampleImg]: https://~/~.png "Title"

<img src="https://~/~.png" alt="alt text">

So I thought converting the text to HTML once is easier than using regex to cover all of these ways.

11

Yeah, Markdown is kinda awkward when it comes to parsing.
But you can go with the simple regex solution as I guess it covers 80%, which is sufficient for the optional feature.
You don’t have to support references because it is too complicated.

12

I’ve been away from this task for two months, but just today I was able to publish!

Inkdrop Thumbnail List Plugin

It supports the following syntaxes with regex:

![alt text](https://~/~.png)
![alt text](https://~/~.png "title")
<img src="https://~/~.png" alt="alt text">

Let me know if there are any problems.

1 Like
13

@yk4to Wow, cool! It works great👍

Screen Shot 2022-03-11 at 17.27.32

Looks like the plugin version is 0.0.0, which is kind of strange.
Can you try updating it with “ipm publish minor”? It will mark the version as 0.1.0.

Well done, Luke!

1 Like
14

Ah, I didn’t understand enough about semantic versioning.

I’ve just corrected the version notation.

1 Like
15

I found a bug when 2 images are added one after the other, even with newlines.

image
image1178×1364 202 KB

I made my own fork with a fix. https://github.com/xmarkclx/inkdrop-thumbnail-list

image
image1140×811 92.2 KB

The fork also hides the text for privacy reasons (passwords, etc.) on screen sharing.

I probably should publish it on its own if anyone is interested with a more minimal setup.

16

Updated my fork to use object-fit:contain instead of cover so you can see all the pages/components instead of it being cut up.

image

I think if someone has the time, they can just make the fix and the object-fit: contain into a plugin setting for the main repo.

1 Like
17

@Mark_Lopez Nice! Can you send a pull request to his repos?

18

I will try, it kind of drifted a bit in features.
I removed remove-markdown as it causes unrecoverable freezes on certain long markdown files.

I also removed the text for privacy reasons.

And the images are object-fit contain.

19

@anon32234548 Thanks for your pull request.

I’ll work on fixing and improving the received problems.

As for whether to display the summary text or not and style of images, I plan to make those options selectable.

@craftzdog Could you teach me how it parses text to remove Markdown, as default?

To increase parsing speed, I want to use the same method as the default, if possible.

20

Ahh, you can use NoteListItemSummaryView for displaying the note body without Markdown markups.

const NoteListItemSummaryView = inkdrop.components.getComponentClass('NoteListItemSummaryView')

something like:

<NoteListItemSummaryView revId={_rev || ''} body={body} />