mirror of
https://github.com/advplyr/audiobookshelf.git
synced 2026-05-30 23:40:40 +02:00
[Enhancement]: Book Cover Square/Rectangle Pref w/ smallest to largest sub-sorting. #2777
Assignees
adam (Adam Melkus)
Clear assignees
adam (Adam Melkus)
No Assignees
Notifications
Due Date
No due date set.
Dependencies
No dependencies set.
Reference: starred/audiobookshelf#2777
Reference in New Issue
Block a user
Delete Branch "%!s()"
Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?
Originally created by @tagmeh on GitHub (May 17, 2025).
Type of Enhancement
Web Interface/Frontend
Describe the Feature/Enhancement
When searching for a book cover, It'd be nice to see the square or rectangle covers presented first, based on the library-specific setting "Use square book covers".
It would also be nice to have the book covers intentionally sorted from smallest to largest. Or for there to be a setting in the modal or library setting to sort ascending or descending.
Why would this be helpful?
Currently the application is designed to favor rectangle or square book covers based on a library-specific setting. So, when I'm looking for a higher quality or more accurate book cover, I don't necessarily want to see or dig through covers I don't prefer. On top of that, it doesn't appear there is any size/ratio sorting. The book covers generally go from smallest to largest, but that's largely due to the order by which the 3rd party APIs are called.
I'm aware some books simply don't have one type of cover (usually square), so the rectangle cover has to do. That's fine. I just think the preferred ratio should be sorted on top, if available.
TL;DR: Ease of use, more consistent and intentional design.
Future Implementation (Screenshot)
I thought I'd try my hand at working on the solution, but decided to raise an issue for discussion purposes when things felt like they started to get messy.
Initial implementation: Minimal script change, no html change, adds a bit of tech debt by way of duplicated work.
(Notice the first images are square, ascending in size, until it resets to the first and smallest rectangle image. There are no UI elements to indicate the change in cover ratio)
Second implementation: Script and html change, same tech debt as above.
(The divider will only show if there are covers of the non-preferred type. Otherwise it would appear exactly the same as it does now, except sorted.)
Tech debt explanation: In order for the model-cover tab (Cover.vue) to sort the covers, it has to have access to the height/width of each image. So the model-cover makes an api call to get the image information. It's my understanding (I'm no JavaScript, Vue.js, or Nuxt expert) that the covers-preview-cover component is also making this api call for each image being displayed. I tried to remove this logic, but backtracked when I realized this component was being used in multiple other components.
Note, the images sorted first (square/not-square) change automatically when the library-specific setting "Use Square Book Covers" is changed.
Audiobookshelf Server Version
v2.21.0
Current Implementation (Screenshot)
Updating book covers, trying to find themed/consistent/fan covers and straining my eyes trying to hunt down only the square ones.
Then I noticed they aren't actually sorted smallest to largest, and that it probably wouldn't be too much harder to sort by square/not-square then by width or height.