[Bug] Banner images no longer show in Live Preview mode and show incorrectly in Reading mode in Obsidian 1.4.x due to new "Properties" feature

Question

[Bug] Banner images no longer show in Live Preview mode and show incorrectly in Reading mode in Obsidian 1.4.x due to new "Properties" feature

Zachatoo opened this issue a year ago · 35 comments

Description

Banner images no longer show in Live Preview mode in Obsidian 1.4.x due to new "Properties" feature.

Banner images do show in Reading mode, but the new "Properties" feature is hidden below the banner image.

Banner images show correctly in Source mode.

The "Properties" feature is still in beta testing, so maybe this issue will be resolved on it's own, but wanted to track it here in case it isn't.

Steps to reproduce

Upgrade to Obsidian 1.4.x.
- At the time of writing this issue, I was on 1.4.0.
Open note in Live Preview mode that previously had a banner image.
- You may need to click somewhere in the content of the note if you switched modes while the note was visible.
Open note in Reading mode that previously had a banner image.

Actual result

Banner does not show in Live Preview mode.

Banner covers new "Properties" feature in Reading mode.

Expected result

Banner should show, probably above the new "Properties" feature.

Video reproduction

2023-07-26_18-51-31.mp4

Answer 1 · 2023-08-19T06:40:13.000Z

The plug-in is dead, someone have to pick it up or create a new one.

Answer 2 · 2023-08-26T19:50:04.000Z

Looks like the plugin author is picking this back up

https://discord.com/channels/686053708261228577/840286264964022302/1145064351414358067

Answer 3 · 2023-08-27T01:35:55.000Z

Thanks for letting us know.
Let's hope this plugin gets fixed since it is a really nice and useful one.

Answer 4 · 2023-08-27T02:55:08.000Z

Hello, maintainer here. So this plugin has been in hiatus for a while as I've focused on other things nowadays (quite literally moved countries and starting grad school as of last month, hah). But I've been slowly looking into this 1.4 breakage issue for the past few days.

But as far as I can tell, it looks like I have to do some substantial refactoring, both to clean up some of my methods and code, as well as maybe have cleaner implementations. For the reading view, it looks like it's another restyling issue with the new Properties view (though am looking for any other ideas for more reliable solutions), but Live Preview view is, at best, going to require a different approach altogether, so that will take a bit (however it still works like before if you change the Editor -> Properties in document setting to Source).

Technically speaking, the current method creates a CM6 widget on the first line of the frontmatter. But because the new Properties view will essentially hide it, the widget doesn't get rendered. It is possible to simply add the widget on a different portion of the note, but I believe that's just gonna 'cause issues with positioning for the rest of the note. So another approach needs to be taken on that end

Answer 5 · 2023-08-27T03:15:05.000Z

Hi. Great to hear from the developer.
In case this may help you in refactoring the code, the following snippet...
https://forum.obsidian.md/t/banners-plugin-that-works-with-obsidian-1-4-0-and-above/65142/5?u=cerros
... solves some issues. It shows the banner in the correct position. But they emoji (if selected) is still displaced.
I hope this helps you :)

Answer 6 · 2023-09-02T16:09:14.000Z

Good to know that you can change the "Properties" setting to still get this add-on to work

Answer 7 · 2023-09-03T01:21:26.000Z

So, good news, I've got the core banners functionality working on both views now (mostly, still a couple of bugs in there). The detail here is that because I'm basically rewriting this from the ground up, I have to re-implement the rest, such as the settings, icon functionality, modals, etc, into the new codebase I've laid out. Not too bad 'cause I just have to translate my old methods though it will take some time; so bare with me for a while more, haha.

For the time being though, this snippet is a temporary workaround from #114 (comment) to hide the Properties view in the reading view while still having access to it in the Editing view. Not completely ideal, but a band-aid for now

.mod-header {
  display: none
}

Answer 8 · 2023-09-03T01:29:01.000Z

Thanks for keeping us up to date 👌

Answer 9 · 2023-09-03T14:23:40.000Z

Open the Obsidian Settings, then find 'Properties in document' in the Editor and select the dropdown option from 'Visible' to 'Source'. This will make the Banner plugin look the same in the 'Editor view' as before. Remember to close the 'properties 'plugin. The 'Reading View' will still display the Properties

Answer 10 · 2023-09-03T14:35:54.000Z

So, good news, I've got the core banners functionality working on both views now (mostly, still a couple of bugs in there). The detail here is that because I'm basically rewriting this from the ground up, I have to re-implement the rest, such as the settings, icon functionality, modals, etc, into the new codebase I've laid out. Not too bad 'cause I just have to translate my old methods though it will take some time; so bare with me for a while more, haha.

For the time being though, this snippet is a temporary workaround from #114 (comment) to hide the Properties view in the reading view while still having access to it in the Editing view. Not completely ideal, but a band-aid for now
.mod-header {
  display: none
}

Good to hear you're still alvie ! I was really close to go insite the code (forked the repository already) and try to see what was going on :D

Answer 11 · 2023-09-04T04:24:08.000Z

why not just display the undisplayed (fm dom), then put on the widget, and then undisplay the (fm dom)

I always like to keep original approaches until they zombify.

Answer 12 · 2023-09-04T15:56:16.000Z

Because of how both CodeMirror (the editor Obsidian runs off of under the hood) and Obsidian itself works. In CodeMirror, widgets (and decorations as a whole) have to be attached to an element to style it or add other elements. But in Obsidian, it looks like when the Properties view is to be used, it removes those frontmatter elements entirely from the DOM, thus I have nothing to work with in that scenario. And this is functionality that is only controlled by Obsidian, and I can't modify it from a plugin (or at least not easily).

I also wanted to keep the original implementation to quickly put this out, but I realized it was already getting to the point of frankenstein-ing solutions with my old methods

Answer 13 · 2023-09-09T18:55:32.000Z

I tried snipped "temp fix" and it didn't work for me. I almost moved to make.md plugin just to have banners. In my test vault it consumed so much CPU that I gave up the idea using make.md. I like new properties a lot so I didn't want give properties as much as banners.

My workaround for now is:

Settings > Editor > Properties in document > Source / Hide
Settings > Core Plugins > Properties View > "Plus button" > Properties View: Show File Properties > Ctrl + Q

So now I can go to right side panel to edit properties and for me it's almost as convenient as having buttons on top of the note. At the same time banners works as it use to be. I know it's not a super smart solution but somewhat my brain was too slow to figure that out. So maybe somebody have similar workflow as my 🧠💨

Answer 14 · 2023-09-15T03:22:44.000Z

Took a long while, but https://github.com/noatpad/obsidian-banners/releases/tag/2.0.0-beta is finally ready to be beta-tested. This isn't live on the Community Plugins page yet, but you can test out the version with BRAT (or manually, but BRAT is nicer). I'm confident enough to have it out there while I iron out a few more things.

I'll keep this issue open until a proper release is made, but for the time being, feel free to drop more issues with the pre-release so I can iron those out too!

Answer 15 · 2023-09-15T04:22:53.000Z

Thanks :) I will give it try and provide feedback.

Answer 16 · 2023-09-15T08:27:39.000Z

Works for me - but one question, did the syntax for the banner change?

I have a mix of ![[image.png]] and plain filenames, but the only thing that works now is [[image.png]].

Is this intentional?

Answer 17 · 2023-09-15T08:53:11.000Z

I've just read the changelog and see that it is indeed intentional - never mind me 😊

Answer 18 · 2023-09-15T11:09:08.000Z

Question: is it intended behavior that the note title disappears when banners are enabled? I followed Settings > Editor > Properties in document > Source / Hide, and I cannot see the note title in neither editor mode nor reading mode when I set "Properties in document" to "Source" (and thereby enable banner in editor mode).

Answer 19 · 2023-09-15T19:04:17.000Z

@davidolrik Mhm, this is intentional because 1.4 now can manage internal links in the frontmatter. This is better than the workaround from before and has the benefit of being auto-updated when a banner image is renamed. Still am thinking how to handle migrating the legacy syntax automatically though, because I imagine many people have it like that for their banners.

@pinetreemoonlight If you mean Obsidian's native "Inline title", then that shouldn't be happening because that should only depend on the Appearance -> Show inline title setting. But if you mean Banner's new "header" title, then it should only display when you have a banner_header property to your file set to a string or to true. Which were you referring to?

Answer 20 · 2023-09-19T21:50:48.000Z

Hi, thanks for everything so far! I noticed a potential bug/issue - when setting the banner heading height to "Custom" in the settings there's an awkward space created in between the bottom of the banner and the Properties section; when set to anything but "Custom" i.e. center, edge, below the banner, etc., this space is not present.

Banner Heading height set to "Center"

2) Set to "Custom"

this is constant no matter what the custom value is for the height itself.

Answer 21 · 2023-09-20T03:02:20.000Z

@pinetreemoonlight If you mean Obsidian's native "Inline title", then that shouldn't be happening because that should only depend on the Appearance -> Show inline title setting. But if you mean Banner's new "header" title, then it should only display when you have a banner_header property to your file set to a string or to true. Which were you referring to?

Thank you for your reply. I am referring to Obsidian's native inline title. It disappears, when banner is activated. I tried playing with Appearance --> Show inline title and confirm it's the native inline title that disappears, whenever I have a banner visible. I also tried setting my theme to Default, in case there could be any conflict, but the inline title still does not show.

Edit: Obsidian ver. 1.4.13 (15 Sep 2023) and Win11

Answer 22 · 2023-09-20T03:09:47.000Z

@pinetreemoonlight If you mean Obsidian's native "Inline title", then that shouldn't be happening because that should only depend on the Appearance -> Show inline title setting. But if you mean Banner's new "header" title, then it should only display when you have a banner_header property to your file set to a string or to true. Which were you referring to?

I made a new vault to test it again. I have "Properties in Document" set to "Source", otherwise I changed nothing in this new vault.

Editing mode with banner:

Reading mode with banner:

Editing mode without banner:

Answer 23 · 2023-09-20T04:02:14.000Z

@inkreydible This was actually intentional, but I think now that you mention it, it's likely that the custom setting would be placed somewhere within the banner's boundaries. So I'll change that styling to remove that spacing.

@pinetreemoonlight That's odd. I can't replicate it on my end, and the plugin doesn't do anything to the inline title nor the new Properties view. Do you have a custom CSS snippet that hides it per chance? I noticed that the Reading mode doesn't show the Properties view either, despite setting it to Source (which is supposed to only be hidden when setting that to Hidden)

Answer 24 · 2023-09-20T04:18:18.000Z

@pinetreemoonlight That's odd. I can't replicate it on my end, and the plugin doesn't do anything to the inline title nor the new Properties view. Do you have a custom CSS snippet that hides it per chance? I noticed that the Reading mode doesn't show the Properties view either, despite setting it to Source (which is supposed to only be hidden when setting that to Hidden)

I do use custom css, but I disabled them initially to test. And in the newly-created test vault (in the pics) I didn't add any custom css. I also wonder where my "Properties" title is to be honest, it could be related to the issue with the inline-title.

Answer 25 · 2023-09-21T01:22:57.000Z

@inkreydible This was actually intentional, but I think now that you mention it, it's likely that the custom setting would be placed somewhere within the banner's boundaries. So I'll change that styling to remove that spacing.

Ohh I see. Was it to allow for space under the banner were the heading to be placed under? I do think that's necessary, but it would be better for it to be adjustable or tied to the underside of the header itself instead (I don't know how it works, so excuse me grasping here)

Thanks for the reply though

Answer 26 · 2023-09-27T11:28:10.000Z

I tried using the snippets mentioned here but it still didn't solve the issue of the banners disappearing in live mode :(

Answer 27 · 2023-10-06T19:45:43.000Z

when will it be fixed?

Answer 28 · 2023-12-09T18:09:31.000Z

I tried using the snippets mentioned here but it still didn't solve the issue of the banners disappearing in live mode :(我尝试使用此处提到的片段，但它仍然没有解决横幅在实时模式下消失的问题:(

Modify the old version code (1.3.3) to temporarily display the banner in the live mode. After that we just need to change the incorrect position through overriding the older CSS.

File .obsidian/plugins/obsidian-banners/main.js:
change from (followed by the prettiered code, you can globally search by words without tailing spaces and enters)

return G.Decoration.set(
  h.map(m => m.range(0)),
  !0
);

to

return G.Decoration.set(
  h.map(m => m.range(r.doc.length)),
  !0
);

After that the banner can show both in live/preview mode:
Complete the step below of adding a custom css snippet to show properly yourself

Answer 29 · 2024-01-05T16:10:53.000Z

r.doc.length

I followed this instruction as my banner was not showing in live preview. In theory it is now showing but it is displaying an error code when in live preview/source mode. The image correctly displays in reading mode.

Answer 30 · 2024-03-01T16:27:28.000Z

Snippet that works both on Desktop and Android (not tested on iOS)

.mod-header:has(+ .obsidian-banner-wrapper) {
  margin-top: var(--banner-height);
  margin-bottom: calc(-1 * var(--banner-height));
}

Answer 31 · 2024-03-07T05:24:54.000Z

Snippet that works both on Desktop and Android (not tested on iOS)

.mod-header:has(+ .obsidian-banner-wrapper) {
  margin-top: var(--banner-height);
  margin-bottom: calc(-1 * var(--banner-height));
}

Nice! Tried on macOS and iOS. This snippet fixes the awkward gap.

The banner is still not showing up in Live Preview mode though.

EDIT:
I don't know exactly what happened, but the file I was testing with got mysteriously deleted. And when I tried to do it again it showed like the comment from creativefibro when in Source mode:

I followed this instruction as my banner was not showing in live preview. In theory it is now showing but it is displaying an error code when in live preview/source mode. The image correctly displays in reading mode.

Answer 32 · 2024-04-14T03:13:45.000Z

Any updates on when this will be available via Obsidian?

Answer 33 · 2024-04-16T16:08:58.000Z

+1 I'm interested as well

Answer 34 · 2024-06-13T18:05:35.000Z

Does this plugin work with the latest Obsidian version?