Include note name (or breadcrumbs) in heading link embed

I think it would be helpful to have the note name as part of the heading link embed. it could be small font, top-right, near the link button (which is how I’ve styled note names in the regular note embeds).

7 Likes

was just about to make this FR as well, originating from Can I have file name in the transcluded header?

Many have asked for how to disable the title in file embeds, and it’s easy to do with a css snippet. However, I have the opposite where I always want to see the originating note title, which is shown when embedding the whole note, but not if embedding a section.

It could be default off for same default behavior with an option to toggle it.

Not sure about best default styles, but I’ve also made my embed title smaller and out of the way like this:

Here’s what a section embed looks like for me right now

And how I’m imagining it

Was seeing if it’s possible with css

Can kinda do something like this to show the note name before the transcluded box

.internal-embed::before { content : attr(src) ;}

Could almost modify the heading inside but the css attr() function cannot get the src attribute many parents up.

.internal-embed > .markdown-embed > .markdown-embed-content > .markdown-rendered > .markdown-preview-section > div > h1::before { content : "[[" attr(src) "]]" ;}
1 Like

Got a workaround:

Show a non hidden version of ![[Note#Section]] before the embed

.internal-embed::before { content : "![[" attr(src) "]]";}

and then hide the first heading in the embed

.internal-embed > .markdown-embed > .markdown-embed-content > .markdown-rendered > .markdown-preview-section  > div:nth-child(2) > h1[data-heading="Text"],
.internal-embed > .markdown-embed > .markdown-embed-content > .markdown-rendered > .markdown-preview-section  > div:nth-child(2) > h2[data-heading="Text"],
.internal-embed > .markdown-embed > .markdown-embed-content > .markdown-rendered > .markdown-preview-section  > div:nth-child(2) > h3[data-heading="Text"],
.internal-embed > .markdown-embed > .markdown-embed-content > .markdown-rendered > .markdown-preview-section  > div:nth-child(2) > h4[data-heading="Text"],
.internal-embed > .markdown-embed > .markdown-embed-content > .markdown-rendered > .markdown-preview-section  > div:nth-child(2) > h5[data-heading="Text"],
.internal-embed > .markdown-embed > .markdown-embed-content > .markdown-rendered > .markdown-preview-section  > div:nth-child(2) > h6[data-heading="Text"] { 
  display: none
}

where the last snippet is inspired from this thread, but doesn’t break error messages.

Example:

Steps to reproduce

Create a file with at least one section under a heading.

Embed that section into another markdown file using ![[MyFile#Heading]].

My debug info indicates a few plugins, but the same behavior happens with 0 plugins, 0 CSS snippets, and the default theme. See screenshot below.

Expected result

The markdown filename should be shown on the top of the block (Pizza), but it’s missing, leaving an awkward blank spot that pads the section content.

Actual result

See screenshot.

Environment

  • Operating system: Windows
  • Debug info:

SYSTEM INFO:
Obsidian version: v1.1.4
Installer version: v0.15.8
Operating system: Windows 10 Home 10.0.19044
Login status: logged in
Catalyst license: supporter
Insider build toggle: off
Live preview: on
Legacy editor: off
Base theme: light
Community theme: none
Snippets enabled: 0
Restricted mode: off
Plugins installed: 3
Plugins enabled: 0

RECOMMENDATIONS:
none


Additional information

The top is linking to the ![[Pizza]] and behaves normally, the second is linking to ![[Pizza#Toppings Ranking]]

1 Like

Is this the default theme?

Anyway, I don’t recall we showing the filename in headings embeds.

Original shot was the default theme, but I tested on that too, with all plugins and CSS snippets disabled.

Here’s the result. You can see in the top one which links to ![[Pizza]] the note name is in the line with the copy link icon. In the bottom there’s no note name.

Second shot in view mode:

Totally agree with @fuzzbyte . I became aware of this limitation when embedding sections and blocks onto canvas surfaces. It would be nice to show the parent note name via a hover or a container label.

FWIW - Canvas: Show title of source note for each link to section, header, and block embedded onto a card

Could this be an issue because of the link type we choose in our vault settings: Wikilinks or Mardown links?

Sorry, original shot was not the default theme. Bad typo there.

Thanks! I adapted your code a little bit to make it less visible:

.internal-embed::before {
  content : "![[" attr(src) "]]";
  font-size: 0.8em;
  opacity:0.6;
}