Movie view tutorial

Movie view tutorial

This tutorial explains the saved Movies view from data.json. It renders a movie note with a large backdrop, metadata, cast cards, trailers, and a palette sampled from the backdrop image.

What you will build

A matching movie note becomes a designed movie detail page with:

• backdrop image and gradient overlay,
• title, genres, runtime, rating, and release details,
• markdown-rendered description and note body,
• TMDB cast and crew cards,
• YouTube trailer thumbnails,
• colors generated from the backdrop.

Required note properties

The saved template expects properties shaped roughly like this:

---
categories:
  - "[[Movies]]"
tags:
  - movies
tmdbId: 496243
backdrop:
  - https://image.tmdb.org/t/p/original/example.jpg
poster:
  - https://image.tmdb.org/t/p/w500/example.jpg
genres: Drama, Thriller
description: A short movie description.
runtime: 132
rating: 8.4
year: 2025
---

You can rename properties, but then update the template placeholders and JavaScript selectors accordingly.

View rule

The saved view matches notes categorized as Movies or tagged with #movies:

{
  "type": "group",
  "operator": "OR",
  "conditions": [
    {
      "type": "filter",
      "field": "categories",
      "operator": "contains any of",
      "value": "[[Movies]]"
    },
    {
      "type": "filter",
      "field": "file tags",
      "operator": "contains",
      "value": "movies"
    }
  ]
}

Use Settings → Custom Views → Movies → Rules to recreate or adjust this rule.

HTML structure

The template has three main regions:

1. .hero contains the backdrop image and gradient overlay.
2. .content-area contains movie title, genre, description, rating, and metadata.
3. Cast and trailer rows are filled by JavaScript after TMDB requests finish.

Key placeholders:

Placeholder	Expected data
{{tmdbId}}	TMDB movie ID.
`{{backdrop	first}}`
{{file.basename}}	Movie title from the note name.
`{{genres	split:","
{{description}}	Movie description.
{{file.content}}	Note body rendered as Markdown.

CSS notes

The CSS uses a full-width visual layout and Obsidian variables so the page still feels native. The JavaScript writes palette variables into the rendered view, then the CSS consumes those variables.

If you want a simpler version, keep the HTML and CSS first, then add JavaScript after the static design is stable.

JavaScript notes

The saved JavaScript does three things:

1. Samples the backdrop image to build a Flexoki-like color scale.
2. Fetches cast and crew from TMDB.
3. Fetches trailers from TMDB and shows YouTube thumbnails.

Before sharing the template, replace the placeholder key:

const TMDB_API_KEY = "YOUR_TMDB_API_KEY";

Do not publish personal API keys in your vault screenshots, wiki pages, or issue reports.

Full code

The full copied view code is in Full Movie view code.

Wiki pages

• Home
• Quick start
• Settings and view rules
• Template syntax
• Template logic
• Filters and functions
• Bases in Custom Views
• CSS and JavaScript
• Movie view tutorial
• Album view tutorial
• Troubleshooting