Window for Linked Notes in Line

What I’m trying to do

Is it possible to limit the size of the window when displaying a note in line – ![[file name]]? I would love to limit the size of the window to maybe 2 inches or so tall vs. showing the whole note, which in the case of long notes displays much more than I would like to.

I have searched for a solution and found none. But I am unsure what terminology to use to get to what I am looking for.

1 Like

One way: if the note to embed has headers/sections, you can specify the section you want to embed.

2 Likes

Just to be clear, your talking about limiting the display of embedded notes, and not the preview when hovering over a link, right?

From the top of my mind, two very different solutions come to mind. Either you limit the amount of embedded text, like @mnvwvnm is talking about, or you limit the box into which the embedded file is shown.

I’m not sure about which CSS selectors apply, but there was a similar question related to reducing the preview window recently, see Hoverover Pop up that adjusts size depending on note content - #2 by ZenMoto

Some of the same CSS could be used, I reckon, given you locate the html elements used to surround the embed.

@holroy Yeah that’s true, it is similar :snowboarder:

It could be done like this:

.markdown-embed {
    height: 100%; 
    max-height: 44vh; 
    overflow: scroll; 
    padding: 0 0 0 8px;}

.markdown-preview-section {
    max-width: 100%;
    margin: 0 0 0 0;
}

And the result…

gjBEYqc9897L

The embedded note is scrollable, in a fixed-height box.

  • To change the height of that box, change the 44vh number.

  • If you don’t want the box to be scrollable, change overflow: scroll; to overflow: hidden;

[Margins and paddings were also trimmed, to make use of the space]

2 Likes

In addition to the two described methods, og embedding a smaller block, or limiting the embedded version with CSS, I would also suggest a different approach which might not be in accordance with your use case: Summaries

In my daily notes I’ve included a summary field in the frontmatter, but it could also be placed in the text. This allows for me to list all the daily notes for a period, with a summary attached.

I’m contemplating on doing the same for other notes covering all the different topics I’ve written notes on, but haven’t done so yet. But it can be done, and it could also be used in addition to or instead of embedding. If so inclined one could rather easily build a specific “embed” function, using dv.view, to embed a link, some text and whatever you’d want to include.

PS! On a side note, you can add your own blockIds to a given paragraph using ^summary, which would enable you to do ![[MyNote^summary]] ![[MyNote#^summary] to embed just that block

2 Likes

Thanks. Interesting idea. I would have to construct all my notes to have sort of an introductory section, but that would work. Not quite what I am looking for but sometimes you can’t get what you want – but this would be a solution.

With what @mnvwvnm said, this might very well be a good practice for me. I will consider it. Thanks!
I really want the fixed-size scrollable window that you and @ZenMoto are going after. I am excited to do some work with what you two have provided! Lacking some expertise in markdown and such, I will play around with it as soon as I get a chance. Thank you two!

You have identified exactly what I am looking for! Thank you!

Please excuse me if I am asking a really dumb question, but where in that markdown coding scheme do I identify the file name of the note to be displayed in the fixed-size scrollable window? (I presume I am revealing my great ignorance here. But I do want to learn.)

Awesome :parrot: It’s alright, you can ask anything.

where in that markdown coding scheme do I identify the file name of the note to be displayed in the fixed-size scrollable window?

  • If you mean, “how do I declare which notes are displayed inline?”
    You just put a ![[file name]] in the editor, and it will automatically display each embedded note in a scrollable view-box (in reading-mode and live-preview mode) [after you’ve added the new CSS].

  • If you mean “how do I change the appearance of the title in the view-box?”
    You target the class .markdown-embed-title in your CSS - for example .markdown-embed-title {color: red;}

If I missed your meaning, or if you have another question, feel free to ask.

(I think any sincere question is a smart question :tropical_fish:)

OK, here goes. So, do I:
(1) place the CSS you showed me in a note, then it regulates the windows of linked files in just that note,
(2) place it in my vault’s CSS file, and then all windows in all notes follow its display properties,
(3) or somehow tie the CSS 1:1 with each instance of ![[file name]]?

Before you answer, the more I think about it, I would not mind making this a global linked-note display solution throughout my vault.

Secondly, I know little to nothing about loading or updating CSS for my vault.
Do I place your CSS in …/.obsidian/plugins/css-snippets? If so, how do I create the document I place it in? What is the file type?

I have installed the “css snippets” plugin, but no window opens when I execute its Reload or Unload commands. I am CSS ignorant - but, I hope, educatable.

I’ll pause here.

The solution as @ZenMoto displayed it is a global solution, which would apply to every embedded file. In order for it to work it need to be placed in a CSS-file at a given location: vault/.obsidian/snippets/linkedNotes.css where you can choose the filename as you see fit (the linkedNotes part).

Sadly, this needs to be done outside of Obsidian, but any ordinary text editor will be able to create this file. Just make sure the extension is .css and not anything else.

After you’ve created the file, you can go to the settings menu of Obsidian, and locate the bottom section of Appearance > CSS snippets, and you should see a linkedNotes snippet, and here you can enable it. It should now work for every embed you do.

If you want to limit this behavior to some specific notes, you can do so in the embedding note, that is the file doing the embed, not the included note, and you can add something like the following at the start of that file:

---
cssClass: linkedWindow
---

If you then modify your css-file to look like this:

.linkedWindow .markdown-embed {
    height: 100%; 
    max-height: 44vh; 
    overflow: scroll; 
    padding: 0 0 0 8px;}

.linkedWindow .markdown-preview-section {
    max-width: 100%;
    margin: 0 0 0 0;
}

That is add the .linkedWindow in front of the other CSS selectors, this CSS will only apply to the file having that first part, and other embeds will be normal.

So a complete example of including the note with this syntax would be:

---
cssClass: linkedWindo
---

loads of text...

![[IncludeThisNote]]

more text

PS! Regarding loading just a block of text, using blockId’s, the correct link should be like ![[IncludeThisNote#^summary]] (note the extra # which I forgot in my previous post.

1 Like

Here is an easy way to create your CSS snippet:

1 - Download this file: snippets.css (a blank text file).

2 - In Obsidian - go to Preferences > Appearance > CSS-Snippets (at the bottom).

  • Turn the snippets switch to “On”.
  • Click the little folder icon above the switch. A popup will appear (this window is the folder /vault/.obsidian/snippets/).

3 - Drag that new downloaded file (snippets.css) into that popup.

DONE! Now you have a CSS Snippets file.

  • You can open it in any text editor [like Notepad (Windows) or TextEdit (Mac)]… a CSS file is just a text file.
  • You can add/change styles in that CSS file.
  • New changes are automatically pulled in by Obsidian, any time you save the snippets.css document.

Now you can add custom CSS styles to Obsidian. :beer:

2 Likes

Thank you all!!!
@ZenMoto @holroy @mnvwvnm I have learned from you all.
Sorry for the delayed response, but I have not been able to implement your suggestions until just now. Then it took me all of 5 minutes to implement what you provided @ZenMoto! I even readjusted the height of the window.

You have resolved my issue. I do not have a good idea of how it works, but I love that it works.

The additional benefit: I will put into practice summarizing each note in the space the display window provides to minimize my further scrolling or opening the linked note.

I am so grateful for your guidance. I hope I can pay you back or pay it forward someday.

1 Like

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.