Koha How-To

Using Lists to Populate your Coverflow on the OPAC

In this week's tutorial, Kelly and Jessie will walk you through using the public lists feature in Koha to populate the coverflow plugin on the OPAC. You can use 1 list or multiple lists to showcase the new titles in your collection. Below you will find the steps to set up the coverflow including lists, reports, plugin administration and system preferences.

Lists

Lists can be set up in the Lists Module. You will want to make sure you create a public list.

This tutorial will walk you though creating lists. You can create multiple lists or just one.

You will want to keep a note of what list number you are using to add to your report. (in the steps below)

  • you can find the shelfnumber in the url of the list

Reports

Now that we have created a few lists, let's create a report to generate the titles on the coverflow. Below you will find an example report.

SELECT biblionumber, SUBSTRING_INDEX(isbn, ' ', 1) AS isbn, title
FROM virtualshelfcontents
LEFT JOIN biblioitems USING (biblionumber)
LEFT JOIN biblio USING (biblionumber)
WHERE shelfnumber=11
ORDER BY rand()
LIMIT 25

A few things to remember.

  • add the shelf number to the WHERE statement
  • you can change the LIMIT to the desired number of titles to populate
  • you will need to create a report for each list you create
  • you will need the report number for the coverflow plugin configuration

System Preferences

OpacMainUserBlock: this will allow you to add a <div> to populate multiple list titles.

<div id="tabs">

<ul>

<li><a href="#tabs-1" title="NYT Bestsellers">NYT Bestsellers</a></li>

<li><a href="#tabs-2" title="Picture Books">Picture Books</a></li>

<li><a href="#tabs-3" title="Non-Fiction">Non-Fiction</a></li>

<li><a href="#tabs-4" title="Staff Picks">Staff Picks</a></li>

<li><a href="#tabs-5" title="Summer Staff Picks">Summer Staff Picks</a></li>

</ul>

<div id="tabs-1">

<h1 class="cftitle">New York Times Bestsellers</h1>

<div id="coverflow-nyt"></div>

</div>

<div id="tabs-2">

<h1 class="cftitle">Picture Books</h1>

<div id="coverflow-pb"></div>

</div>

<div id="tabs-3">

<h1 class="cftitle">Non-Fiction</h1>

<div id="coverflow-nf"></div>

</div>

<div id="tabs-4">

<h1 class="cftitle">Staff Picks</h1>

<div id="coverflow-staff"></div>

</div>

<div id="tabs-5">

<h1 class="cftitle">Summer Staff Picks</h1>

<div id="coverflow-summer-staff"></div>

</div>

</div>

OPACUserJS: this javascript will populate your coverflow plugin. You can access the code here: https://github.com/bywatersolutions/koha-plugin-coverflow.

Coverflow Plugin

If you do not have the cover flow plugin you can install it here from GitHub: Cover Flow plugin for Koha.

Once installed, you will want to configure your plugin.

This tutorial will walk you through setting it up: Coverflow Set Up

Go to Administration › Plugins › Cover Flow › Configuration

  1. Link options
    1. how the links will populate under the the titles
  2. Image options
    1. setting up the size and title length
  3. Mapping
    1. this is where you will want to use the report numbers (we just created above) to add to the id section.
    2. example below: id will be the number of the report you created above.

- id: 69
selector: #coverflow-nyt
options:
buttons: true
autoplay: 4000
loop: true
style: flat
spacing: -0.25

- id: 70
selector: #coverflow-pb
options:
buttons: true
autoplay: 4000
loop: true
style: flat
spacing: -0.25

- id: 71
selector: #coverflow-nf
options:
buttons: true
autoplay: 4000
loop: true
style: flat
spacing: -0.25

- id: 72
selector: #coverflow-staff
options:
buttons: true
autoplay: 4000
loop: true
style: flat
spacing: -0.25

- id: 95
selector: #coverflow-summer-staff
options:
buttons: true
autoplay: 4000
loop: true
style: flat
spacing: -0.25

Refresh the OPAC

You should be all set! Refresh the OPAC and you should see the Coverflow on the OPAC.