#1

I would love, love, love, a banner feature like in Notion, where you can easily add an image to the top of the page that captures the theme/mood of the note; it’s just absolutely gorgeous. Maybe there is a way to have a handy little template bit of markdown/css code that I can paste at the top of each new note, paste the path/to/image, and just adjust a parameter that specifies the vertical centre of the crop and bam, I have something close enough.

3 Likes
#2
  1. Go to Unsplash.com and find the images you want
  2. Drag all of them in to a note in Obsidian
  3. Make this note a template, and add other stuff you like on that template
  4. Make sure the first 20 (pick a number) lines, are just the images you dragged in.
  5. When using the template (CTRL-T), just delete the 19 images you don’t want.
#3

There hasn’t been any activity for 5 days, could you please see if you’d like to pick any of the existing answers as the solution, or do you still need help with something?

Would appreciate it if you could clarify on that, thanks!

#4

Hi, sorry, maybe I should setup email alerts. Anyway, thank you @oyvind , however this solution is not practical for me. I want an easy way to copy paste an image from the web (generally a new different image for each note), and very quickly crop it (and choose the crop area) to have dimensions of a banner image.

#5

It would be nice to have this as a part of the yaml frontmatter like this:

---
banner: url(./image.jpg)
---

Crops and such could also be encoded in the  `banner:` line
1 Like
#6

Personally not a fan of banners I feel this should be an optional plugin

#7

I like @davidolrik suggestion, though. That would make it easy and manageable for the users.

2 Likes
#8

any update to this? would love to see it

1 Like
#9

I have done some work around it using css snippets. It’s in a pretty initial state but works for me.

The script takes the first two body elements of a note and use them, respectively, as banner image and title. It ignores frontmatter blocks, so it’s ok to use them.

This note

Screenshot 2021-07-27 102031
Screenshot 2021-07-27 1020311137×1033 77.4 KB

will be rendered as this

Screenshot 2021-07-27 102057
Screenshot 2021-07-27 1020571159×918 140 KB

1 Like
#10

There is a plugin for this by now. It is called “Banners” and available via the repo.

See also: GitHub - noatpad/obsidian-banners: An Obsidian plugin that adds banners to your notes .

Brgds, Martin

2 Likes
#11

Could you share these CSS snippets, please?

#12

Do you know if there is a way to use .jpg images as ‘banner icons’ instead of emojis? Also, I’m looking for a way to make the banner thicker so that it wraps laterally around some of the lines in the body of the note (like on WIkiwand)… I can’t find a thread over here about this plugin >:(