Simple Media Gallery for Books, Movie,TV-Series, Games, etc

[Mr.Red]

Another addition you didn’t know you needed (but probably do)

A huge shout-out to @jamesravey ; his OpenBookLibrary got the gears turning.

Why let your notes and metadata gather digital dust hidden inside frontmatter? I thought it was time to bring them into the light. Whether it’s books, movies, TV series, games, or even a Contact directory, if it has a title/name and an image URL, the Media Gallery can visualize it beautifully.

Current Highlights:

• Instant Live Filtering: Search by title, author, genre, or any metadata field with real-time results.
• Pagination: Keeps things snappy and organized, even if your library scales to 1,000+ items.
• Flexible Deployment: Use it as a Widget on any page or via a dedicated Virtual Page (e.g., mediaGallery:movie or mediaGallery:book).
• Customizable: Adjust TileSize and ItemsPerPage to suit your aesthetic.
• Aesthetic Tiles: Includes score badges for ratings and elegant fallback placeholders for missing covers.

Movies

Books

Actresses/Singers

Essentially, if you can build a database for it, and has an image_url in it, this gallery can display it.

I’m currently tidying up the documentation and finalizing the repo. Expect a Preview Launch, provided everything goes to plan, sometime tomorrow.

[RELEASED]

Simple Media Gallery for Books, Movie,TV-Series, Games, etc

[Libraries Released] - check it out in my Repository [image] If you can’t see them there, then Update Repository Config Examples, which are also included in the Library file. I know it looks a little intimidating, but once you get the gist of it, it’s easy. [image] [image]

[jamesravey (James)]

This is awesome and the layout is really pretty. I can’t wait to give it a spin

[Mr.Red]

[Libraries Released] - check it out in my Repository

If you can’t see them there, then Update Repository

Config Examples, which are also included in the Library file.

I know it looks a little intimidating, but once you get the gist of it, it’s easy.

@jamesravey hope you don’t mind, I’ve integrated your bookmanager inside the MediaManager, and gave a shoutout to your version inside my library. I hope it’s ok

[Mike]

This is great. I’ve installed it without issues and it is working well for me. I’ll be looking to fine-tune it a bit to add some ‘personal metadata’ like whether this is something I have read or watched or want to read, and when I have read / watched it.

Also, when I find some time, I’ll see if I can integrate Google Books because Open Library is a bit limited when it comes to Dutch books.

Maybe one small comment: It would be nice if there was an explicit error messages when a book cannot be found (the API call returns nothing I guess)

[Mr.Red]

@Mike

I’ll be looking to fine-tune it a bit to add some ‘personal metadata’ like whether this is something I have read or watched or want to read, and when I have read / watched it.

That’s quite simple to achieve already.

For example you can use/replace the “score” field with a “status” field like this:

{"page","book",{"title","author","year"},"status","cover"}

and you can then display the reading status like this:

maybe in a future release i can add some custom stylings to different elements by content, but I need to think about it how to implement it the best, until then, this is a good workaround IMHO.

If you do it this way even the filter works, so you can filter for “To Read” or “” books:

Also, when I find some time, I’ll see if I can integrate Google Books because Open Library is a bit limited when it comes to Dutch books.

Need to look into their API if it’s possible. If you find something out, feel free to make a PR for it.

Maybe one small comment: It would be nice if there was an explicit error messages when a book cannot be found (the API call returns nothing I guess)

I’ll think about it and will add in a future release.

[Mike]

I have an initial version of the script to pull data from the Google Books API running locally. It still requires a bit a fine-tuning to make it more robust for different API responses and I need to figure out how to pull a higher quality image (the default thumbnail is too small). Trying to have PR ready by tomorrow

[Mr.Red]

@Mike

like whether this is something I have read or watched or want to read, and when I have read / watched it.

[UPDATE]

I added now the possibility to style the score Badge based on the content
for example for read status:

/* Status-specific badge colors */
.media-score[data-status="to-read"] {
  background: oklch(0.7 0.2 20); /* Reddish */
  color: white;
}

.media-score[data-status="reading"] {
  background: oklch(0.7 0.2 250); /* Bluish */
  color: white;
}

.media-score[data-status="done"] {
  background: oklch(0.7 0.2 140); /* Greenish */
  color: white;
}

[Mike]

I create a PR on Github with the Google Books API. I’ve tested it with several books. I’ve primarily create an additional MediaManager.provider (gbook), but I have had to make a few change to the OpenLibrary provider to make it a bit more generic.

Let me know what you think and if it needs any fine-tuning. I’m not a super experienced coder, so

[Mike]

Additionally, I was thinking how it would be possible to have the “Order By” as an argument for the mediaGallery? Year would be a logical way to sort, or author (although it would result in sorting on first name). This would make it very flexible to for people to implement their own sorting criteria.

I looked at the code and I can hard-code it to year or author, but my Lua knowledge is insufficient to figure out how to make it work as an argument.

[jamesravey (James)]

@Mr.Red

@jamesravey hope you don’t mind, I’ve integrated your bookmanager inside the MediaManager, and gave a shoutout to your version inside my library. I hope it’s ok

yes of course - honoured to be included nice work!

[Mr.Red]

@Mike

Additionally, I was thinking how it would be possible to have the “Order By” as an argument for the mediaGallery? Year would be a logical way to sort, or author (although it would result in sorting on first name). This would make it very flexible to for people to implement their own sorting criteria.

I looked at the code and I can hard-code it to year or author, but my Lua knowledge is insufficient to figure out how to make it work as an argument.

Let me handle the ordering.
I just create a DropDown list + JS, with Order By ( Title, Author, Year, etc) A->Z / Z->A and hat should cover all the ordering the Gallery itself. possibilities, IMHO.

[Mr.Red]

[UPDATE]

• added Ctrl/Cmd-Click to Flip the Card and show more Details on the “back” of the card
• added scroll marquee on hover to Title/Detail rows if text is longer than the card width.

[Mr.Red]

@Mike

I create a PR on Github with the Google Books API.

[PR merged] - thank you

[Mr.Red]

@Mike

Additionally, I was thinking how it would be possible to have the “Order By” as an argument for the mediaGallery? Year would be a logical way to sort, or author (although it would result in sorting on first name). This would make it very flexible to for people to implement their own sorting criteria.

[UPDATE]

• replaced pageItems config with pageRows to display n-rows per page instead of n-items per page, for a better responsiveness (default:2)
• Added Order By DropDown

[Mike]

I raised another PR on the MediaManager as I was running into quota limits on the Google Books API. I couldn’t find what the daily limit is exactly, but by requesting an API key (free), you get a much better daily quota. So I implemented logic for that.

[Mr.Red]

Ok, I’ll take a look later. Heading to work now.

[Mr.Red]

@Mike

I raised another PR on the MediaManager as I was running into quota limits on the Google Books API. I couldn’t find what the daily limit is exactly, but by requesting an API key (free), you get a much better daily quota. So I implemented logic for that.

[Checked, Tested & Merged ]

Thank you.

[Mike]

Hi,

When you have a multipage Media Gallery, it is hard to go to the second page, because the little pop-up to reload, copy or edit the code for the widget blocks access to the [2] button (see screenshot upper right corner). Possible to add a bit more padding on the top or move the buttons left?

[Mr.Red]

@Mike

Possible to add a bit more padding on the top or move the buttons left?

This was overlooked from my part, because my TopRight Buttons are by default moved outside the Widgets window, so I forgot that the original buttons are overlapping the widget

Of course it's possible to add a padding, but that might just look weird in my opinion, especially on mobile would be just lost screen real estate and empty space.

How about this for a solution: the TopRight Buttons are moved outside the Widget window and are slightly dimmed, until you hover over them:

space-style

#sb-main .cm-editor .sb-lua-directive-block:has(.media-gallery-wrapper) .button-bar { top: -40px; padding:0; border-radius: 2em; opacity:0.2; transition: all 0.5s ease;} 
#sb-main .cm-editor .sb-lua-directive-block:has(.media-gallery-wrapper) .button-bar:hover { opacity:1;}

[Mike]

That does the trick, thanks!