zamsyt / obsidian-snippets

CSS snippets for Obsidian
The Unlicense
91 stars 5 forks source link

Custom page preview: Display page preview in embeds #2

Open dxcore35 opened 1 year ago

dxcore35 commented 1 year ago

I was thinking can your code be adapted to show this view also when the note is embedded? Instead of seeing the whole note content I would like to see only the summary and image. Also I was thinking if we can get this running via DV.VIEW it will be nice to get the image automatically from the note's body like it is done here:

https://github.com/702573N/Obsidian-Notes-List

zamsyt commented 1 year ago

A couple of days ago I made a separate snippet for similar cards which aren't used as the page preview. I haven't published it on this repo because I've been thinking I could rather make a more flexible snippet that combines the functionality of these snippets as well as providing control of various properties of the card/callout.

As well as the option in embeds to display the card (like you suggest)

I don't yet know what the syntax will be exactly, but basically it would be some list of keywords in the callout type.

Thanks for your suggestions. I'll be looking at automatic generation of the previews too.

dxcore35 commented 1 year ago

I made something for begining:

DataviewJS code in note's body

dv.span(dv.sectionLink("cover.jpg", "#cover", true))

Custom dataview you need to copy (and set folder in dataview)

dx_Project_header.zip

Custom CSS need to copy to Snippets folder

[ui] Auto image blend.css.zip

Results

Screenshot 2023-03-10 at 16 04 00

https://user-images.githubusercontent.com/7279156/224335410-ee24af85-a05e-4a84-9818-5942a22fc48a.mov

Original image

cover