Feature Request: Notelist to show image thumbnails (Like Evernote does)

Features
1

Like this:

Capture
Capture976×667 91.9 KB

1 Like
2

Hello, I had a discussion like this a while ago, and the proposition given was quite satisfactory. First, there is a plugin called Note Overview, which you should install first.
Second, create a note with the command

<!-- note-overview-plugin
search: notebook:"YOUR NOTEBOOK NAME"
fields: image
image:
  width: 25% 
  height: 25%
  nr: 1
  exactnr: false
listview:
  text: "[{{image}}](:/{{id}})"
  linebreak: false
  separator: "&nbsp;"
-->

The width and height percentages are up to you;
nr: 1 means that the code parses the very first image of each note in the notebook you chose above.
Then, you just have to press the "Tools / Create note overview" command on the command bar.
Voilà, your page is ready.
Every image will have an internal link to the note. All of the images will be put in a single line, non-stop. It means that the line breaks depend on the screen.
For more features, such as exerpts, please take a look at the author's page.
:blush: Hope it helps you!

4 Likes
3

Hi Nikki,

your post is very helpful to me :pray: (big thx also to @HendonRunner for asking :grinning:) as I did not realize that there is such a solution available. I am not familiar with written code and will have to invest some time to understand the system of the plugin to use it effectively but it sounds like fun when I imagine the options it offers!

Perhaps you could - in the meantime - modify your example so it creates a table instead of single lined row, which also includes the note titles? That could be closer to what is shown in the mockup above and would help me as well instantly :wink: I hope this does not sound inappropriate, so please do not feel obligated!

4

Hey :slight_smile:
You can see more use cases of the Plugin here in the Git Repo.

For your use case use the following code:

<!-- note-overview-plugin
search: notebook:"NAME OF THE NOTEBOOK HERE"
fields: title, excerpt, image, tags, updated_time
image:
  width: 100
  height: 100
  nr: 1
  exactnr: false
excerpt:
  maxlength: 200
sort: updated_time ASC
-->

Happy Joplin and settings time! :smiling_face_with_three_hearts:

5

Thanks to .@Angel_Crawford_ftw, @Wimvan, @Nikki for the helpful replies.
I have successfully installed the recommended plugin on the master desktop installation of Joplin and it works on that platform, but without images thumbnails where there are images in the note.

  1. Is there another plugin or change to the script needed to integrate images into the Note Overview?

  2. Despite syncing both platforms, it does not seem to be working in either the iOS or Android apps.
    Please correct me if I am wrong, but those apps seem to have reduced functionality and visual presentation (not displaying notebook hierarchy for instance) as compared to a desktop installation - Is that correct?

Please be tolerant of users like me with low exposure and capability in scripting/coding.

LATE EDIT - Just seen this on Github
image: In this field a image resource from the note will be displayed. This field can be configured using the image option.

How do I add this correctly to the code block?

6

Thx a lot! I can reduce that number of columns to my needs and start to understand the syntax!

I just made a test and I have the thumbs in the third (of 5) columns. I had to scroll to see them...

I just made a test and I have the thumbs in the third (of 5) columns. I had to scroll to see them...

7

Hi @HendonRunner, when you create a new Note, please go to the edition mode (the one which opens two panels side by side. On the left side (or I could call the "guts" of the Note :smile:), the format used is mandatory. So, in short, the code

<!-- note-overview-plugin
search: notebook:"YOUR NOTEBOOK NAME"
fields: image
image:
  width: 25% 
  height: 25%
  nr: 1
  exactnr: false
listview:
  text: "[{{image}}](:/{{id}})"
  linebreak: false
  separator: "&nbsp;"
-->

starts and ends with those arrows and words, and the commands inside. If you want a hand, I'm here, we can make it work together, since I have plenty of time!
As for Windows / Android, yes, there are somme differences. Anyway, the code I presented here worked fine on both.
I think you want one image-excerpt on each line, am I correct?
If so, for the
fields: image line, you can write instead fields: image, body
for the text: "[{{image}}](:/{{id}})" line, you can replace it by

excerpt: maxlength: 200
text: "[{{image}}](:/{{body}})"

(note that the maxlength is up to you)
and for the
linebreak: false line of the code, you can use instead linebreak:<BR>.
Hope it helps.

8

Hi. In my notebook i have some images resized through the WYSIWYG editor, so from

![vincent_pharaoh_hound.jpg](:/3067431425c041ed809b2c67cce013fa)

I get something like

<img src=":/3067431425c041ed809b2c67cce013fa" alt="vincent_pharaoh_hound.jpg" width="199" height="300">

In this case the field image doesn't work.
There is any solution to that?
Thanks in advance for the help.

9

Hi Nikki,
Back on the 22nd Aug, I thought the NoteOverview plugin was partly working, but on review, I had just fooled myself and it wasn't working for me on any platform at all.

I really want Joplin to work for me......But I am whilst being a highly logical human, I am not at all intuitive with scripting

Looking first at the Windows desktop installation of Joplin:

I have successfully installed the NoteView plugin via Settings > Plugins (it confirms that it is installed and turned ON)

I have created a note containing the recommended script in the same Notebook that I want to use the plugin.

I have restarted the Joplin App

No note preview is occurring.
You mentioned scrolling to a fifth column, I cannot find any way to see further columns.

Have I missed out a major step?

At the most basic level can you suggest some diagnostic steps to see what I am doing wrong?

I appreciate you may no longer have lots of time on your hands as you mentioned before and fully understand if this is the case.
Thanks
Steve

10

@HendonRunner, Sorry a thousand times for leaving you without an answer for so long, I am ashamed...
Can you please send me part of your coding, so that I can help you better?

One of my indexes is as follows (directly from the .md file):

LIVRES & PAPIERS - CARTONNAGE

<!-- note-overview-plugin
search: notebook:"CARTONNAGE"
fields: image
image:
  width: 25%
  height: 25%
  nr: 1
  exactnr: false
listview:
  text: "[{{image}}](:/{{id}})"
  linebreak: false
  separator: "&nbsp;"

-->
11

So sorry for the delay, @TheGame83, shame on me...
Maybe I misunderstood your question, can you please send me how is the code you used to list all images with the note-overview plugin? If you want, we can do it together :slight_smile: