Movie Posters Grid in Obsidian With Dataview

With the upcoming Bases update in Obsidian, this may become obsolete, but for the time being I am still quite happy using Dataview to embed little graphical elements in my notes.

For example, I have a note summarizing all the movies I watched each month. For that I use a combination of CSS and a Dataview query to generate a grid of movie posters. Until recently I used a very simple Dataview query, but I had a problem: if I watched a movie twice in a month, I got only one entry in my poster grid. This is not what I wanted, so I had to do something more complicated.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
const results = [];
const from = dv.date("2025-07-27");
const to = dv.date("2025-08-28");

for (const page of dv.pages('"03 - Literature/Movies"')) {
    const watched = page.Watched;
    if (!watched) continue;

    // Handle both single dates and arrays of dates
    const watchedDates = Array.isArray(watched) ? watched : [watched];

    // Add an entry for each watch date that falls within the range
    for (const date of watchedDates) {
        const watchedDate = dv.date(date);
        if (watchedDate &&
            watchedDate < to &&
            watchedDate > from) {
            results.push({
                poster: page.Poster,
                date: watchedDate
            });
        }
    }
}

// Sort by date descending and display just the posters
dv.list(
    results
        .sort((a, b) => b.date.ts - a.date.ts)
        .map(item => item.poster)
);

So in short, I have a Watched property on my movie notes that can take multiple values, and for each date in the property I add a “poster” entry to the results array. Finally, I sort the results by date descending and display the posters.

Problem solved.

(Btw, let me know if you want the CSS for the grid.)

Use Obsidian's Plugin Responsibly

My Default Apps for 2024

The Changelog – February 2024