Responsive, mobile-friendly ‘View’ templates for book lists

3 out-of-the-box responsive, mobile-friendly Views to display book lists are readily available. All that needs to be done by the store staff are to edit the book lists and plug them into the views.

This feature provides 3 pages - Front Page Books 1, Front Page Books 2 and Front Page Books 3 and 3 blocks with the same names. The book lists from each of those 3 pages are pulled into views and displayed in the corresponding blocks. Though these view templates and blocks are named ‘Front Page’, they can be used for any pages on your website, like ‘Staff Picks’, ‘New and Noteworthy’ etc.

NOTE: This feature requires modules to be enabled for your site. If you have not previously requested we enable them for you please contact staff@bookweb.org [3]. We will send you confirmation once it has been enabled.

EDIT THE BOOK LISTS

Navigate to 'Content'

1. Locate the Front Page Booklist content options - Front Page Booklist 1, Front Page Booklist 2, Front Page Booklist 3
2. Select ‘Edit’ for Front Page Booklist 1
3. Update the book list by adding and removing ISBNs. By default, up to 6 books will be displayed in this view
4. Save
5. Repeat steps 1-4 for Front Page Booklist 2 and Front Page Booklist 3

CONFIGURE THE VIEW BLOCKS

Navigate to Structure > Blocks

1. Locate the Front Page Book block options - Front Page Booklist 1, Front Page Booklist 2, Front Page Booklist 3
2. Select ‘Configure’ for Front Page Booklist 1
3. Enter a 'Block Title' - Example: New and Noteworthy
4. Save
5. Repeat steps 1-4 for Front Page Booklist 2 and Front Page Booklist 3

CUSTOMIZE THE VIEW (INDIECOMMERCE MEMBERS ONLY)

Navigate to Structure > Views > Front Page Booklist

Prepare to make this change by retrieving the NID (node ID) of the page containing your booklist. This can be found in the URL for editing the node so click on Content > Find the page and click edit. Look at the URL and make note of the NID. Example: node/111/edit

CHANGE THE BOOKLIST BEING USED
 

1. Select the Front Page Booklist you want to edit (Front Page Booklist 1, Front Page Booklist  2 or Front Page Booklist 3)
2. Under ‘Filter Criteria’ select ‘Content: Nid’
3. Replace the existing NID value with the new  NID value
4. Apply (this display)
5. Save<

INCREASE THE NUMBER OF COVER IMAGES DISPLAYED
 

1. Under ‘Pager’ select the number of items listed - Example: 6 items
2. Change the number under ‘Items to display’
3. Apply (this display)
4. Save

Want to show all items?

1. Under ‘Pager’ select ‘Display a specified number of items’
2. Select ‘Display all items’ (we recommend the only if there are 20 or less items)
3. Apply (this display)
4. Save

ADD ADDITIONAL VIEW BLOCKS
 

1. Select ‘clone Front Page Booklist 1’
2. Select the ‘Display Name’
3. Edit the name to be unique - Example: Front Page Booklist 4
4. Apply
5. Under ‘Filter Criteria’ select ‘Content: Nid’
6. Replace the existing NID value with the new  NID value
7. Apply (this display)
8. Save

You will now have an additional view block under Structure > Blocks that can be placed in a region of your choosing.

If you need assistance making additional customizations please contact us by emailing staff@bookweb.org [3]

 

SINGLE GRID (INDIECOMMERCE MEMBERS ONLY)

PREPARE TO CREATE YOUR VIEW

To prepare to create your view retrieve the NID (node ID) of the page containing your book list. You will need it for step 22 of creating your view. The NID can be found in the URL for editing the node”

Navigate to: Content
 

• Select ‘edit’ for the page that contains your book list
• Look at the URL and make note of the NID. Example: node/111/edit 

If you haven’t created your book list yet and aren’t familiar with doing so instructions can be found under ‘Creating Booklists’

CREATE THE VIEW

Navigate to: Structure > Views > Add New Views
 

1. Fill in ‘View Name” - Example: cookbook_bestsellers
2. Fill in Description - Example: Cookbook Bestsellers
3. Uncheck ‘Create A Page’
4. Select ‘Create A Block’
5. Enter Block Title - this should automatically fill in with your view name, if it does not, repeat it.
6. Display format - select 'Responsive Grid' of 'fields'
7. Set ‘Items per page’ - this should be the number of books you want to display (leave blank to display all)
8. Select ‘Continue and Edit’
9. Click on ‘Block’ under ‘Display Name’
10. Enter name and description Example: (Cookbook Bestsellers Block, Grid of cover images) - click Apply
11. Confirm ‘Format’ is set to ‘Responsive Grid'
12. Select ‘Settings’ next to ‘Responsive Grid’
13. Set the number of columns you want to be displayed by default - Example: 4 (this will automatically adjust on smaller devices, for instance, you may have it set to 4 but on a mobile device it may adjust to 2)
14. Expand ‘Column Classes’ and adjust the entries to:
    • Every Column - views-column column
    • First Column - views-column-first column
    • Last Column - views-column-last column
15. Expand ‘Row Classes’ and adjust the entries to:
    • Every Row - views-row row
    • First Row - views-row-first row
    • Last Row - views-row-last row
16. Under Fields - Click Add
17. Find ‘Content : Books’ in list - Select - Apply (this display)
18. Configure Books - uncheck ‘Create a label’
19. Select the appropriate ‘Formatter’ - Example: Product reviews - Cover Image Only
20. Select 'Multiple Field Settings' - Uncheck ‘Display all values in same row’
21. Apply (this display)
22. Under fields click on ‘Content : Title’ - Remove
23. Under ‘Filter Criteria’ Add - ‘Content: Type’ - Apply (this display)
24. Select ‘Page’ under ‘Content Type’ - Apply (this display)
25. Under ‘Filter Criteria’ Add - ‘Content : nid’
26. Enter NID that you previously made note of from the Staff Picks page into the ‘Value’ field - Apply (this display), Example: 111
27. Under Sort Criteria - confirm 'Content: Post date' is in place (this can be adjusted to your desired sort)
28. Under ‘Footer’ select ‘Add’
29. Select ‘Global Text Area’ - Apply this display
30. Fill in the Label - Example: CSS
31. Paste the following line into the text field: <br clear="all"> - Apply this display
32. Save View

The Cookbook Bestsellers Block view is now ready, and will be available in the list of disabled blocks. You can activate this block from Structure > Blocks and place it in a suitable region.

NOTE: Responsive designs rely on consistent elements such as images that are the same size or height to display correctly. If after following these instructions your cover images aren’t aligning correctly, try shifting the order of the books around so that the longer covers images are the last in the list. If you need assistance, please email us.