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/access to 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 */
.nav-folder:has(>[data-path$='_assets']) {
  /* Base style for every assets folder (visible / hidden). */
  background: color-mix(in srgb, currentColor 5%, transparent); /* Highlight all assets folders. */
  max-height: 4px; /* The height of the hidden assets folder. */
  overflow: hidden; /* Hide everything beyond the max-height. */
  transition: max-height 500ms ease-in-out; /* Enable smooth expand/shrink animation. */

  /* Style overrides for active folders (has an .is-active child). */
  .nav-folder-children:has(>*>.is-active) > &,
  .nav-folder-children > &:has(.is-active) /* When the assets folder itself has an active asset. */
  {
    background: color-mix(in srgb, currentColor 3%, transparent); /* Highlight for active expanded assets folders. */
    max-height: 150px; /* Some large number is needed for the smooth effect. Too large ruins the animation, too small may limit assets visibility. Set at least 25px larger than the scrollable area below. */

    /* Optional: Enable scroll within assets folders. */
    .tree-item-children {
      max-height: 125px; /* Max height of the scrollable area. */
      overflow-y: auto;
    }
  }
}

/* Optional: Highlight forgotten NOT-collapsed assets folders 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-mix(in srgb, red 30%, transparent);
  max-height: 10px; /* Make it slightly larger so that it can be clicked to hide comfortably. */
  * { color: 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
2