Automatically hide assets folders when not focused

Share & showcase
,
1

Hey guys, I was searching the forum why it is not possible to use a hidden .assets/ folder for assets. Then I looked for another way to to hide folders conditionally, and ultimately I stumbled upon an elegant CSS snippet Enable use of hidden files and folders starting with a dot /dotfiles/.dotfolders within Obsidian - #77 by ausernamedtom and I improved it a bit. It works great, but there is one drawback.

Below, I am using a name_assets/ folder via the Community plugin “Custom Attachment Location”.

Here is the CSS, add it to Appearance > CSS snippets


/* Hide assets folders – https://forum.obsidian.md/t/automatically-hide-assets-folder-when-not-focused/111617 */

/* Base style for every assets folder (visible / hidden). */
.nav-folder:has(>[data-path$='_assets']) {
  transition: max-height 500ms ease-in-out;
  overflow: hidden;
  max-height: 4px;
  background: color-mix(in srgb, currentColor 5%, transparent);
}

/* Style for visible assets folders (expanded height) when parent folder has an .is-active child. */
.nav-folder-children:has(>*>.is-active) > .nav-folder:has(>[data-path$='_assets']),
/* ... also for assets folder with an active asset. */
.nav-folder-children > .nav-folder:has(>[data-path$='_assets']):has(.is-active)
{
  max-height: 1000px;
  background: color-mix(in srgb, currentColor 3%, transparent);
}

/* Highlight forgotten NOT collapsed assets that break menu items rendering due to expecting their actual height. */
.nav-folder-children:not(:has(>*>.is-active)) > .nav-folder:not(.is-collapsed):has(> [data-path$='_assets']):not(:has(.is-active)) {
  background-color: color-mix(in srgb, red 30%, transparent);
}

For illustration purposes, I highlighted the assets folders in red.

  • All folders with _assets suffix are hidden
  • Focusing a document in a folder with a hidden _assets folder will reveal those folders.
  • It intentionally limits this behavior only for current folder, ignoring nested or parent _assets folders

obsidian-assets-hide

Now the drawback:

  • Unfortunately, with pure CSS it is not possible to conditionally show only the _assets folder related to the active document if there are multiple _assets folders in currently active folder.
    • I might create a simple JS snippet for it using the JavaScript Init plugin, or a dedicated plugin if I get annoyed with current behavior enough or there is an interest
  • The _assets folders are only “invisible” and “reduced via css”, however, the rendering engine still counts their presence, their folder title height and expanded height if they are expanded. This causes undesired behavior when scrolling, because the menu elements are rendered (added) dynamically.
    • This means that if there is too many would-be-visible items, the dynamic item rendering will start un-rendering next items too soon.
    • Since folders are sorted to the top, this can ultimately lead to a situation where the active document is pushed away outside of the expected rendered range, which will cause the assets folder itself to be un-rendered again (because the .is-active child is not present)

In the gif below: red assets are collapsed, orange assets are expanded and even if they are invisible, they still inflate the container.

obsidian-assets-hide-drawback

related:

2 Likes