Book Coverart and Grid Display

[davidPilkington]

Desired Feature:
Allow users to upload a cover for a book and to change the Views Page to allow for grid display of covers, thereby allowing more books on the one page before pagination.

Perhaps something similar to how amazon or sitepoint display books

[ssddanbrown]

Hi @davidPilkington,
I'm quite intrigued by this idea, I think it would help add some visual context when looking at a listing of Books and give it a 'Virtual Library' kind of feel. Thanks for the suggestion.

[Wookbert]

The uploaded cover image however should be embedded in a graphical, icon-like context. If one simply replaces the current generic book icons with plain images, things will getting to look cluttered real quick. What I find so appealing about BookStack is its clean, uncluttered design. No easy task.

[Wookbert]

Just looked at it again: Image-based book covers would only work a large, grid-like view. I just don't see how this could work in all other views. Even when viewed on a Retina display, the icons are way too small to get meaningfully replaced by images the same size.

If there's a need to visually distinguish the book icons, the best way would be through variations of the existing book icon, through graphical icons added on top of the cover. E.g. a spoon for cooking recipes, a house for any house related stuff, a screwdriver for technical stuff, symbolized lines of code for programming and so on. I would even go that far to strictly stick to the blue color, as allowing the user to change the icon color, could make it difficult to distinguish books from chapters and pages at first sight.

[leone125]

👍

[nileshdeepak]

Hi @ssddanbrown , I really like the idea of having grid view and cover image for the BookStack app.

I clearly understand your concern about the screen getting messy. To avoid that we can provide users the option to choose grid view or the current layout. This toggle can be placed in the 'Edit Profile' page.

Initial implementations can have the following:

• Grid view for bookstack.com/books page.

• The 'Recently Viewed' and 'Popular Books' section on that page can be left unchanged.

• Allow users to upload cover image at the time of creating book.

• The ideal size of the cover art is a height/width ratio of 1.6:1.

• Scale image if not of required size.

• Provide toggle button to show/hide cover art on 'Books' page.

• If no cover image is uploaded, a default cover will be set.

• Provide toggle button for type of view in the 'Edit Profile' page

Here's a link to the mock-up:
https://app.moqups.com/nileshdeepak/ch3xOXMSey/view

Please do give your feedback. Once you are happy, I would like to take a crack at developing this.

[Shackelford-Arden]

👍 This sounds (and looks) awesome!

[nileshdeepak]

This pull request adds features for grid view and cover art #434

[ssddanbrown]

This has now been implemented into master as of #494. Will be in the next release.