-
-
Notifications
You must be signed in to change notification settings - Fork 4
Album view tutorial
This tutorial explains the saved Albums view from data.json. It renders an album note and uses an embedded Obsidian Bases query to list song notes that link back to the current album.
A matching album note becomes a designed album page with:
- cover art,
- album title and artist links,
- year, genres, and description,
- a track list populated by Bases,
- track titles and artists kept as Obsidian links,
- colors generated from the cover image.
Example album note:
---
categories:
- "[[Albums]]"
artists:
- "[[Ritviz]]"
year: 2024
genres:
- Electronic
- Pop
cover:
- cover.jpg
description: Album description goes here.
---The saved template uses {{cover[0]}}, {{artists}}, {{year}}, {{genres}}, and {{description}}.
Each song note should link to the album note in an album property:
---
album:
- "[[Music/Love and Machines/Love and Machines|Love and Machines]]"
track: 1
artists:
- "[[Ritviz]]"
---The track list query uses this relationship.
The saved Albums view matches notes categorized as Albums:
{
"type": "group",
"operator": "AND",
"conditions": [
{
"type": "filter",
"field": "categories",
"operator": "contains",
"value": "[[Albums]]"
}
]
}At the top of the HTML template, the view defines a Base named Songs:
{% base "Songs" %}
views:
- type: table
name: Songs
filters:
and:
- list(album).contains(this)
order:
- track
- file.name
- artists
sort:
- property: track
direction: ASC
{% endbase %}The important line is:
list(album).contains(this)
It means: find song files whose album property contains the current album note.
The template loops over bases.Songs.rows:
{% for row in bases.Songs.rows %}
<div class="album-track">
<div class="album-track-number">{{row.values.track}}</div>
<div class="album-track-body">
<div class="album-track-title">{{row.file.link}}</div>
<div class="album-track-artists">{{row.values.artists}}</div>
</div>
</div>
{% endfor %}Because row.file.link and row.values.artists contain Obsidian-style links, the rendered view keeps them clickable.
If the only track artist is the album artist, you usually do not need to show it under every song. Use expression syntax in the condition:
{% set trackArtists = row.values.artists %}
{% if trackArtists.length > 1 and not trackArtists.contains(artists[0]) %}
<div class="album-track-artists">{{trackArtists}}</div>
{% endif %}This checks both cases:
- one artist means the artist is probably the album artist,
- a track artist list containing the album artist should not be repeated unless there are additional collaborators.
If notes are named like Ritviz – Mimmi and the view should show only Mimmi, use:
<h1>{{file.basename.replace(/.*\s*–\s*/, "")}}</h1>The saved template currently uses split/last style title cleanup. Regex is more flexible when spacing varies.
The full copied view code is in Full Album view code.