Improve the appearance of the default front page catalog

[SteelWagstaff]

As a network manager, I want the front page catalog block to better reflect the improved/attractive new catalog. Currently, if I turn on the front page catalog:

the home page displays 3 colored blocks with book titles and about this book links and a carousel to display more books (scroll left/right buttons) with a link beneath to take the user to the 'complete catalog':

We should make space for 4 featured books, should replace the color blocks with book covers and display the titles just beneath (as links to the book homepages). We can remove the carousel feature. The catalog link should point to whichever page uses the catalog template on their network. We need to handle cases where a network has multiple catalog pages (perhaps they can choose from a dropdown in the customizer for where the link goes?)

Network managers should be able to designate up to four books from their catalog as featured books in the customizer using a 4 drop down selectors that let them choose from any book in the network catalog as a featured book: 'Featured book 1' 'Featured book 2', etc.

[richard015ar]

An acceptable solution for multiple catalogues is to allow networks to have only one page designated as a catalog template page.

[fdalcin]

Reviewed and left a comment related to a minor issue I've detected while reviewing

[SteelWagstaff]

I don't see any of the book covers after choosing 4 books as 'featured' on integrations:

See https://integrations.pressbooks.network/

[arzola]

I'll review it :whatshappeningJJ:

[SteelWagstaff]

Images are now appearing (I had to clear my browser cache). I would like us to make a couple of small adjustments to default size of the cover blocks.

A few suggestions to make:

• reduce margin-top on .featured_book__title to match the margin-bottom (i.e. 1rem)
• increase height of the .featured_book and .featured_book__cover elements so it has a better height/width ratio. Maybe try 30rem for featured book and 85% for faetured_book__cover?

Rationale: Our default book cover is 800px (tall) x 600px (wide), with a height to width ratio of 4:3 (or 1.33). Our current block has a default size of 318.91px x 286px (1.15). This is too small, especially because many books have cover ratios that fall between 1.4 - 1.6. There's probably a better, more scientific way to do this, but I think I want the default ratio for the cover image div to be somewhere in the range of 1.33 - 1.5.

[arzola]

What do you think to set by default an aspect ratio of 3/4 instead of doing rem, In my opinion looks good

#373

[SteelWagstaff]

Works as expected. Aspect ratio is now 4:3 with images centered so that excess content is cut off on top/bottom or left/right of overflow. We should consider improving instructions for cover images, if we expect/require them to have these 4:3 dimensions.