Hello! I hope it's alright for me to ask this here, but I've been trying to figure out how to get the banner to play nicely with the breadcrumbs plugin for a while now. I'm very inexperienced with CSS so please bear with me if this is an obvious question;

I have two plugins that display at the top of my note: breadcrumbs and metatable. I managed to edit metatable's css using a snippet found here to scoot it down when a banner is loaded, but I cannot figure out how to do the same for breadcrumbs.

This is my css edited snippet for my metatable plugin, and below are a couple screenshots showing the issue.

.code-block-wrap.obsidian-banner-wrapper {
	position: initial;
  margin-top: 200px;
  margin-bottom: 0;
}

The file w/o banner

Banner turned on, covering breadcrumbs but metatable was appropriately pushed down by banner

Is there something I'm missing to affect breadcrumbs as well? If it's impossible to mess with breadcrumbs, could the banner be scooted down a bit with css and have breadcrumbs accessible from above?

Thanks again, and if this doesn't belong here I'll gladly move it!

hi!, i've been trying to set my banner style as gradient, but for some reason it doesn't seem to work, it'll help a lot me if i could get some syntax examples about the property in the documentation, this is an image of all the attempts i made (all of them done separately):

then i gave up and decided to set it as my default value and it worked:

i'm not sure if this is a bug of the property or if i needed to do something else.

Hey dear dev, not sure if it's a bug or not but after the most recent update the position of the icon on my phone (iPhone pro 12) seems to be a bit off.

Before the update it was like this

But meanwhile I really did update lots of plugins and themes today so I'm not one hundred percent sure it's a banners related problem. Could you check this out if it's not too much trouble?

I've got several (100s) banners that I use for my notes, all with different dimensions. Would it be possible to have a setting that automatically scales the banner to display at 100% pane width and then have height adjust automatically?

As it is now, some banners are too wide and so I don't see the full image. if I adjust the height to display the full image then some other banners get cut off.

Example:

Banner original

3-pane banner

I'd like to see the whole banner width in the 3-pane banner example above.

Hi Danny,
thanks for this nice plugin!

I'm using Windows 10 and the plugin version 1.1.1, but I'm getting the following error after I added a banner:

Error loading banner image! Is the banner field valid?

The file content is this:

---
banner: kristaps-ungurs-DoOrFxZ6bMU-unsplash.jpg
---

# Test

Lorem Ipsum ...

![[kristaps-ungurs-DoOrFxZ6bMU-unsplash.jpg]]

The inline image is shown fine. Here's a screenshot of how it looks like for me: https://i.imgur.com/pHPxW7f.png
Any idea what is wrong here? Thanks a lot!

Workspace of desktop and mobile app got weird after enable the banner plugin. File explorer, tag pane, backlink pane... All were disappeared.

Describe the bug

The banner alignment is covering the main text. It just happened recently

Expected behavior
The banner should not cover the main text in preview mode

To Reproduce

Steps to reproduce the behavior:

1. Install Community Plug-in: Banners
2. Copy an image link
3. Command palette: Banners: Paste banner from clipboard
4. See error in Reading mode

Screenshots

• Reading mode: I have Heading 1 (iOS Apps) & Heading 2 (Owned)
  

• Preview mode: The Heading 1 is covered by the banner & The Heading 2 is partially covered.
  

• Pop-up window: It's fine with this one.
  

OS

Where does the bug occur?

• Desktop
• Mobile

Obsidian Version: v0.14.6

The fold / collapse arrow for YAML frontmatter seems to be missing in LP mode when a banner is set.

Frontmatter can still be collapsed via "Toggle fold on the current line" command.

e.g.1 The file hierarchy is as follows:

• level 1
  • level 12
    • image 1
    • image 2
• level 2
  • image 3

If "Banners Folder "is the default， according to the current algorithm, ”image 3“ cannot be queried.

e.g.2 The file hierarchy is as follows:

• level 1
  • image 3
• level 2
  • level 22
    • image 1
    • image 2

If "Banners Folder "is the default，it can look up all the images.

Hey, here I'm just loading the banner which is coming nicely, but in reading mode I can also see the banner properties getting rendered as yaml syntax. I've seen all my plugins and no one is causing this to happen.

Can you tell me what can be done about this??

Thanks

Kanban allows you to see an image that is in the frontmatter of the note.
http://matthewmeye.rs/obsidian-kanban/How%20do%20I/Add%20an%20image%20to%20a%20card/

It would be very interesting to be able to use the same line for banner and kanban.
The current problem is that kanban and banner use a different format.

Banner
Journal/images/Clipboard Image (2).jpg

Kanban
"![](Clipboard%20Image%20(2).jpg)"

Would it be possible to accept this format in banner?
Also in edit mode you can see the image with the kanban format.

Dragging a banner can happen accidentally, even by just clicking on it once.
This leads to a new line in the frontmatter being created.
A feature to have this restricted would be very nice.
Thank you.

When I exported an md file with banner in pdf format it seems to be a bit displaced. Could it be fixed if it's not too much of a trouble?

Hi there, i've been trying to get your plugin to work with Export to PDF but it just ain't playing ball.

Screenshot of what it looks like exporting to PDF:

Versus what it should look like:

Thank you!

Does not work:

banner: /files/201230-dolf-en-mark.png

Works

banner: files/201230-dolf-en-mark.png

I have a website build script that expects an absolute path (relative to the vault location, see above). The plugin only works with relative paths, I believe.

Could you add a standardization function, or a function that tries a few locations to find the picture?

Currently, you can make animated banners with gif and animated webp and png files. But gif is generally a low quality format, and webp and apng aren't very popular, so most of the time you need to convert them beforehand. The ability to use mp4 and webm files with autoplay and loop enabled would be much simpler.

When there are too many attachments, it becomes difficult to select images. Can you add setting options to allow users to customize any folder as an image folder.Thank you very much. The plug-in is great.

[BUG?]. my banner folder is set to / but I am not able to find any images even though I have quite a few in my designated attachment folder named 0-attachments

How can I debug this or what could this be?

I am on the latest Obsidian version.

It would be awesome to be able to automatically add a banner depending on the note tag or tag combination

for example

tags: [article, business, noise, avocados]

tags to look for, [article, business]
and then select a default image for that combination, for example _banners/article_business.jpg

I really like your plugin, thanks a lot for developing it. I was wondering if you could add a setting with which you can determine the position of the emoji icon on the banner. Currently it shows like this:

And I would love it like this:

I know this can be done with custom CSS like:

.has-banner-icon .obsidian-banner-icon {
    font-size: 4em;
    margin-top: -.9em; /* originally -1.2em */
    margin-bottom: -0.3em;
}

But making it a setting would be great.
If you want to go all out ;-) you can make it draggable like the banner itself.
But a disadvantage would probably be another two lines in the frontmatter block for X/Y offset.

Thanks, Jan

This may be similar to #32 but it would be useful to make Banners compatible with the Embedded Note Titles plugin.

I tried to add to the frontmatter:
banner_z: 150px

But this doesn't do anything - it was just my try to see if I could change hight dynamically
If possible, would you mind to implement also hight?
so we can style hight, depending our user case

It would be nice in addition to displaying an icon in the banner, that a title could be provide that renders in the header.

Or better yet that the page is not pushed down by the banner but is behind the document. that way I can use markdown to control what content appears in the banner area.

Thank you for this interesting plugin.

Hey i really like the aestetic looks of banners. So thank you first of all for your work.

However i was wondering if there is the posibility to shift the banner downwards? I also use the Breadcrumbs plugin but it interferes with banners and overlaps.

The obsidian-banner-wrapper div encloses the yaml frontmatter code block, which makes plugins that enhances code blocks break the layout of the note.

An example of a plugin that breaks is Obsidian Code Block Enhancer

I suggest moving the frontmatter up a level, just after the banner wrapper.

Hi, there are several sources of rotating pictures you could add.

Some suggestions are:

• Bing daily pictures;
• NASA's image of the day;
• The Guardian's best photographs of the day;
• Nat Geo photo of the day.

Thanks!

Trying to export a note as a PDF using the built-in Obsidian functionality, I get the following error.

Error: Failed to save PDF.

Also causes generates an error using the Pandoc plugin when trying to export.

Error: Pandoc export failed: TypeError: Cannot read property 'parentElement' of null.

Disabling the Banners plug-in allows exports to work in both cases. The documents I tried to export have no Banners defined on them. Export would work on simple notes with no embedded image files.

Obsidian version: 0.13.19 and 0.13.14
Banners version: 1.2.0

Love the plug-in but I have to disabled it for now. Need the export function more.

Thank you

After the address is set, the image under the address cannot be queried when the local image is set to banner.

Does this plugin work with obsidian publish?

Hi, I'm using the kanban plugin and I would like to set a banner also on that note.
Apparently right now is not possible to visualize it without going to the "open as markdown" view as you can see from my screenshot:

and this is the markdown view:

Apparently, the DOM structure for the kanban view is quite different from the markdown one and it leads to do not having the banner appearing on the page.

Thank you

As it can be seen above, the test on the page is not showing below the banner, instead it is over the banner

• Note: Used Garbel text plugin to hide my text

Feature description: User can choose an emoji as an icon within banner.

just like this ⬇️

If welcome this feature, i'll make a pull request. 🎉

or give me some suggestion

What

• If in Preview Mode, Banners are displayed perfectly
• I look forward to seeing Banners also displayed during Live Preview mode.

No rush! But thanks for your awesome plugin!

I updated the plugin (via the community store) and the Banner plugin automatically turned itself off. Attempts to turn it back on bring up the "Failed to load plugin obsidian-banners" prompt.

Didn't do too much testing to see if there's a conflict but I tried disabling all my other plugins, it didn't help.

When both Tasks and Banners are enabled, there is a TypeError output to the console from Banners and the Preview mode processing of checkbox lists that Tasks performs doesn't work. The error only shows up in the console if both Banners and Tasks are enabled. If I disable Tasks then the error from the Banners code does not appear. This does not prevent Banners from putting the image at the top of Preview, though. I was going to submit a Tasks bug but the error is coming from the Banners code (at least judging by the stack trace below).

There might be issues inter-operating with other plugins but Tasks is the only one that I have that is causing an issue.

Uncaught (in promise) TypeError: Cannot read property 'hasClass' of null
    at BannersPlugin.eval (eval at <anonymous> (app.js:1), <anonymous>:1542:69)
    at Generator.next (<anonymous>)
    at eval (eval at <anonymous> (app.js:1), <anonymous>:31:71)
    at new Promise (<anonymous>)
    at __awaiter (eval at <anonymous> (app.js:1), <anonymous>:27:12)
    at eval (eval at <anonymous> (app.js:1), <anonymous>:1540:57)
    at Function.<anonymous> (app.js:1)
    at app.js:1
    at Object.next (app.js:1)
    at app.js:1

Obsidian Version: 0.12.15
Banners Version: 1.1.0
Tasks Version: 1.3.0

I wanted to create author notes in Obsidian, but found that Banner only supports emojis and does not support uploading profile pictures, can we support this feature?
thank you😊

This only seems to happen with daily notes and I'm not sure why. Whenever I navigate away from the note (whether in edit mode or not), a new YAML block gets inserted before the one already there. This new block only contains the banner and nothing else so it seems like this would be the plugin causing it

Add an option to change the frontmatter field "banner".

My current markdown notes (pre-obsidian) have an "image" field, and my website build script uses that one.

The banner image is covering the start of the note, but when I drag it briefly goes back to normal and then returns to the same position.

The video demo was too large so here is the link for it https://imgur.com/Jzm3Dfo

Hi
I encountered some problems when using it. It seems that it can't use "Win + . " This key combination adds Emoji. If you can directly add Emoji, I believe it will be more convenient to use.
Thank you for your plug-in. It's really great. 🥰🥰🥰

Hi, I had the obs version of a week ago and everything worked as I loved it. Addon is amazing. You can see in the screenshot a snippet of my daily note. Before the update the image was still shows through the complete width. So from total left to total right. That is now in live-preview not anymore the case. The second image is the reading view. That is how I wanted it to be and how it was in the previous version.
Is it intended to be only line-length at live-preview or is that a "bug" caused by the new version of obsidian.

Will an update patch follow to fix that or is that issue to small/ unimportant?

Hi! Great plugin you made there, thanks a bunch 🤩 !

Just noticed what I think is a small bug: when transcluding a page with the ![Page] syntax, the embed contains a weird vertical offset that seems to correspond to the banner height, despite the embedded page having no banner. Here's a screenshot:

The page that embeds ("Home") does have a banner. See vertical space in the Vrac embed in this page. I can't reproduce the bug if the embedder page ("Home" here) doesn't have a banner.

Please let me know if you need more info about my setup, and thanks for doing this plugin again 🙏

While obsidian-banners is enabled with default settings, obsidian fails to export the selected file to pdf.
Restart or Reinstall didnt help. Disabling obsidian-banners fixed the issue.
Error in console:

version: 0.14.2

Hi,

neat plug-in, thanks!

I'm trying to figure out why there's space above my banners, and an expander handle that I'd like to get rid of.

I think the expander handle goes away by choosing the embed style, is that right?

I can't get rid of the extra size, and I narrowed it down to one css rule, but I don't know why it's happening or how I can fix it.

Attaching screenshots of the one css rule enabled/disabled if that helps.

If I want to review and enjoy my past daily notes the banner is one of the most beautiful starts possible. A photo that describes my day perfectly with that gradient that flows into my daily notes. But I can only see it in live preview and nowhere else.
If that should be like this: Feature request PLS BRING AN OPTION FOR READING VIEW
If is should show in reading menu, then what could be reasons for it not working?

Hi,

The new icon function in really great, but when I tried to add an emoji (🇺🇸), it didn't work as expected and it shows me only a big "U".

Would it be possible to render native emoji in icon, because those one looks a bit chunky.
Thanks