folder_brief_live: use first found image within notes

[ngirard]

Hi, and thanks for your extension, which I just discovered through Bri Watson's interview by Anthony Gold.

One feature I'd find very helpful is the ability to use the first found ![](image) within notes as the thumbnail image for that note when generating ccards. Indeed, I try and add an image of every person into the associated note ; and I find it useful to do the same with books. This feature would allow to generate a live gallery of all the people I'm interested in, and a live gallery view of the books I took notes about. This would be great.

Cheers!

[xpgo]

It is already supported by the folder_brief_live in the plugin, make sure you are using the lateast version of the plugin. I use this feature to show all my notes with images in a folder.

[ngirard]

Thanks for your feedback. Apologizes for not giving details on my configuration: I'm using Obsidian 0.10.13 and Folder note 0.6.0 on Ubuntu 20.04.

It is already supported by the folder_brief_live in the plugin

I'm afraid i do not see the images in the generated ccards. Here's the output for my p folder (p = person):

Oh, could it be because I'm using the Obsidian syntax for image links ? Here's the link for the first person in my list:

![[Alain Caillé.jpg]]

[xpgo]

Thanks for the detail information. Yes, it does not recognize the obsidain syntax for image. I will add this in the next release.

[ngirard]

Well then, I can't wait ;-)

[xpgo]

Now, please update to 0.6.1, it should work with the Obsidain syntax for image links, and it use the first paragraph of a note as its brief. if there were any issue, please leave a message, thanks.

[ngirard]

Thank you for your work !

Here's what I did:

1. updated your plugin
2. Restarted Obsidian (just in case)
3. Deleted the p/p.md file
4. Did a Ctrl-clic on the p directory to have the pugin recreate the p/p.md page.

The first paragraphs indeed are used as brief, but quotes within them are unescaped. I'll amend my other issue report.

About the images: the plugin did recognize the appropriate images and générate an image attribute, but unfortunately the images aren't displayed.

To take my first note as an example. Alain Caillé.md contains the image link ![[Alain Caillé.jpg]]. The corresponding images lies in my attachments directory. Here's what the plugin generated:

 image: 'app://local/%2Fhome%2Fngirard%2FDocuments%2FNotes%2FZettelkasten%2Fp%2FAlain%20Caill%C3%A9.jpg?1613231171631',

Hope that helps

[xpgo]

Thanks for the reports.

It is weird. It works on my notes on Windows: You can see that both local image (the first image path is: ![[../assets/Pasted image 20210213092806.png]]) and web image url works fine.

Are you using linux? Could you show me the image url generated by Obidian for your note Alain Caillé.md in the preview mode? So I can check the difference between them?

[ngirard]

Yes, I'm on Linux. My distribution is Ubuntu 20.04. Here's a screenshot of my p/p.md page:

Incidentally, the cards are much larger using v0.6.2, but I guess I should fill another report for that.

As you can see, the image for Alain Caillé is not displayed. Don't hesitate to ask for more input, I'm willing to help !

[ngirard]

Many errors show up in the console, like

Failed to load resource: net::ERR_FILE_NOT_FOUND: app://local/%2Fhome%2Fngirard%2FDocuments%2FNotes%2FZettelkasten%2Fp%2FAlain%20Caill%C3%A9.jpg?1613235956117

so my bet is, the urls for the images are somehow wrong.

I'm going to create a minimal example, with an image that has a simpler name.

[ngirard]

Alright, I just created the following directory structure within my Obsidian project:

test/
\__ test_note.md

test_note.md only contains the following link to a pasted image:

![[test.png]]

the test.png image being stored in my attachment directory.

Control-clicking the test dir generated the following test/test.md page:

# test Overview
 
'''ccard
items: [
  {
    title: 'test_note',
    link: 'test/test_note.md',
    image: 'app://local/%2Fhome%2Fngirard%2FDocuments%2FNotes%2FZettelkasten%2Ftest%2Ftest.png?1613237203920',
    brief: 'No abstract.',
    foot: '13/02/2021 à 18:26:35'
  }
]
'''

which leads to the following in preview mode:

Hope that helps.

[ngirard]

FWIW, removing any custom css didn't make a difference.

[xpgo]

Please update to the v0.6.3 for better brief content of note. For the image problem, currently, due to the limitation of Obsidian's API, please use the relative path of the image in the link if you want to show the image with the Folder Note plugin. For example, if you set the "Attachement folder path" to assets and your vault file strucutre is:

• assets
  • a1.png
• dir1
  • note1.md
  • note2.md
• dir2
  • note3.md

In note1.md, you may use ![[../assets/a1.png]] instead of ![[a1.png]], if you want the image to be shown in the folder overview. The relative path can be automatically inserted if you set the Options -> Files & Links -> New link format to Relatie path to file. And this kind of link is compitable to other markdown editors. I know it is inconvenience, but currently this is the only solution. I will upate the plugin if the Obsidian's API got updated.

[ngirard]

Thanks for your feedback. I've updated your plugin to v0.6.3. It still generates links such as image: 'app://local/%2Fhome%2Fngirard%2FDocuments%2FNotes%2FZettelkasten%2Fp%2FAlain%20Caill%C3%A9.jpg?1613286435727'.

If you think that the only possible syntax for now is ![[../assets/a1.png]], could you make your plugin generate links with this syntax ?

[xpgo]

the v0.6.3 already supports the ![[../assets/a.png]], I have tested it on the linux version of Obsidian. please try to reopen obsidian and modify the note.

[ngirard]

So here's what I did:

1. I double-checked that I had the latest version of your plugin (0.6.3)
2. I restarted Obsidian (just in case)
3. I deleted my p/p.md page
4. I ctrl-clicked on the 'p' folder

The plugin re-generated contents for the p/p.md page. Within it, the images links are still like app://local/%2Fhome%2Fngirard%2FDocuments%2FNotes%2FZettelkasten%2Fp%2FAlain%20Caill%C3%A9.jpg?1613286435727, whereas I'd expect them to be like ![[../assets/a.png]].

[xpgo]

oh, sorry, I misundrstand your request. You want to use ../assets/a.png in the ccard codes directly, right? my logic is when you use ![[../asset/a.png]] in a note (not the folder note), the plugin generates the real link app://.... for you, so it can be shown in the folder note. I will let it support that.

[ngirard]

Hey @xpgo, I noticed you released a new version (0.6.4) and gave it a try.

The plugin now generated "properly-shaped" image links -- e.g. image: 'p/Alain Caillé.jpg'. Problem is, the images still don't show up in preview.

Now, my attachment directory is at/, and simply replacing the abovementionned example link with image: 'at/Alain Caillé.jpg' did make the image to appear.

So I think you're getting close to a fully-working code. I guess you'd need to take into account the recent changes that came with Obsidian v.0.10.8, namely:

You can now choose to store attachments in the same folder as the current note, or in a subfolder relative to the current note. The two related configuration parameters can be found at the bottom of the "Files & links" section of the options editor.

Cheers, and thanks again for your efforts !

[xpgo]

Thanks for the feedback. Yes, I have tried to implement that. I have noticed the the problem you mentioned. It is what I said the limitation of Obsidian's API. Althougth Obsidian lets users choose the attachment path, the path can not be obtained by plugin. I will leave a message to the developer of Obsidian for the issue.

[ngirard]

@xpgo, why not leaving the issue open until it's solved ?

[ibestvina]

Hey, seems to me like a simple fix of this would be to just add a field in the config of the plugin where we can specify the default attachments path. This would have the added benefit of adding a feature to ignore this folder when creating the cards in the folder brief, which would be great.

p.s. Great plugin, thanks a lot for this!

[xpgo]

@ibestvina good sugesstion! But instead of adding a field in the config, I add a key imagePrefix for the ccard code block, there are several considerations:

1. it is compatible for whom using relative path in their notes.
2. it supports the exsting ccard code blocks with relative path
3. it is general for different conditions

@ngirard now with v0.7.0 you can add imagePrefix: 'at/' to ccard code blocks for type: static and folder_brief_live and using the wiki style image path in note. If you feel inconvenient to add the key every time for folder_brief_live, you can use the template or add the following codes to the initial folder note content config:

```ccard
type: folder_brief_live
imagePrefix: 'at/'
```

[ibestvina]

That's perfect I think, thanks!

[ngirard]

@xpgo, yes, it's working just fine. Thanks for your efforts !

Feel free to close this issue whenever you want !

[ibestvina]

Sorry for bringing this up again - is this imagePrefix supposed to block the attachments folder from showing up in the ccards? In v0.7.1 I'm testing ATM, it seems that this folder is still displayed, but maybe you haven't even worked on that issue (since this topic is about something else, and I jumped in on it)?

Edit: If I understand correctly, if attachments folder is inside of each folder, then imagePrefix should by default be set to {{FOLDER_PATH}}/attachments/, for ccard images to work?

[xpgo]

oh, I did not consider the condition of attachments folder within each folder, but your setting is a good solution. I will collect your ideas in the doc for reference.

[ibestvina]

Thanks! Do you know if there's a good way of hiding the attachments folder so it doesn't show in the autogenerated ccard? I guess some type of filter pattern would be great, but I don't see anything in the ccard docs.

[Peeeet]

Hey so this may be related (or not, wasn't sure if I should open a new issue) but I'm having the same problem as above: only web URL images are showing up in the note preview ccard. if it's a local obsidian linked image (I have my images in the same folder as the notes, no relative or absolute path) then it doesn't show up but if it's a web URL it does. Both local and web linked images do show up in the actual note once I go into them.

I'm using Obsidian desktop 0.11.5 with your plugin version 0.7.3 on Widnows 10

Edit: It does appear to work with absolute paths but not relative. Also it looks like each ccard is trying to load an image (as the header with the colored background goes away) but no image ever appears. I'm using the mode where the notes are inside the folders with the same name as the folder BTW...

[SettingDust]

Only display the first note in my workspace. No error in console

Tried 1:

type: folder_brief_live

![[assets/Elenai Dodge 2.png]] ![[assets/YUNG's API.png]]

Tried 2:

type: folder_brief_live
imagePrefix: 'assets/'

![[Elenai Dodge 2.png]] ![[YUNG's API.png]]

All above only display the first note's first image.

There is my repo

[danbulant]

Would be nice to have a way to set imagePrefix to some default value in settings instead of having to copy paste it. Or maybe default it to obsidian attachments? As right now I have to add imagePrefix to every single folder for images to work (if they don't have remote links).