Redesigning Coverflow:
Enhancing the User Experience
Barbara Glassford Johnson
Technical Services Manager
Bedford Public Library, Texas
KohaCon22
Lawrence, Kansas
September 21, 2022
Bedford Public Library
Former OPAC Display
Former OPAC Display Issues
Typical Coverflow Display
Coverflow Issues
Goals for New OPAC Display
Gallery Display - OPAC
Gallery Display - OPAC
Gallery Display – iPad landscape
Gallery Display – iPad portrait
Gallery Display – phone
Components
Reports
Reports
Basic coverflow report
SELECT * FROM (
SELECT b.biblionumber, SUBSTRING_INDEX(m.isbn, ' ', 1) AS isbn, b.title, dateaccessioned
FROM items i
LEFT JOIN biblioitems m USING (biblioitemnumber)
LEFT JOIN biblio b ON (i.biblionumber=b.biblionumber)
WHERE m.isbn IS NOT NULL AND m.isbn != '' AND 'cover' != ''
HAVING isbn != ""
LIMIT 24 /*limits the number of covers in the gallery*/
) covers
GROUP BY biblionumber /*prevents displaying duplicate covers for same bib*/
ORDER BY rand() /*displays covers in random order*/
Customized coverflow report
Add some elements to the WHERE statement
Titles without cover images
Final coverflow report
SELECT * FROM (
SELECT b.biblionumber, SUBSTRING_INDEX(m.isbn, ' ', 1) AS isbn, b.title, dateaccessioned
FROM items i
LEFT JOIN biblioitems m USING (biblioitemnumber)
LEFT JOIN biblio b ON (i.biblionumber=b.biblionumber)
WHERE b.biblionumber != 234838 AND b.biblionumber != 234006 /*removes any bibs that don't have a cover image*/
AND permanent_location IN ('FN') /*specifies the location code for the gallery */
AND notforloan != '-2' /*removes any bibs that are still in 'in processing' status*/
AND DATE_SUB(CURDATE(),INTERVAL 30 DAY) <= i.dateaccessioned /*specifies number of days*/
AND m.isbn IS NOT NULL AND m.isbn != '' AND 'cover' != ''
HAVING isbn != ""
LIMIT 24 /*limits the number of covers in the gallery*/
) covers
GROUP BY biblionumber /*prevents displaying duplicate covers for same bib*/
ORDER BY rand() /*displays covers in random order*/
Report number for coverflow plugin
Remember me!
Coverflow Plugin
Configure the Coverflow Plugin
Configure the Coverflow Plugin
Coverflow Plugin - Mapping
Report number
OpacMainUserBlock
OpacMainUserBlock
OpacMainUserBlock
<div class="container-fluid">
<div class="row justify-content-center">
<div class="col col-xl-7 col-lg-8 col-md-9">
<div class="tab-content" id="myTabContent">
OpacMainUserBlock – Main Tabs
<ul class="nav nav-tabs" id="category_list" role="tablist">
<li class="nav-item active">
<a class="nav-link active" id="adult-tab" data-toggle="tab" href="#adult" role="tab" aria-controls="adult" aria-selected="true">New Adult Books</a>
</li>
<li class="nav-item">
<a class="nav-link" id="teen-tab" data-toggle="tab" href="#teen" role="tab" aria-controls="teen" aria-selected="false">New Teen Books</a>
</li>
OpacMainUserBlock – Subtab 1
<div class="tab-content">
<div id="adult" class="tab-pane fade active show">
<ul class="nav nav-tabs" id="myTab1" role="tablist">
<li class="nav-item waves-effect waves-light"><a class="nav-link active" id="nav-Fiction-tab" data-toggle="tab" href="#nav-Fiction" role="tab" aria-controls="nav-Fiction" aria-selected="true">Fiction</a></li>
<li class="nav-item waves-effect waves-light"><a class="nav-link" id="nav-Mystery-tab" data-toggle="tab" href="#nav-Mystery" role="tab" aria-controls="nav-Mystery" aria-selected="false">Mystery</a></li>
OpacMainUserBlock – Subtab 2
<div id="teen" class="tab-pane">
<ul class="nav nav-tabs" id="myTab2" role="tablist">
<li class="nav-item waves-effect waves-light"><a class="nav-link show active" id="nav-Young-tab" data-toggle="tab" href="#nav-Young" role="tab" aria-controls="nav-Young" aria-selected="true">Young Adult Fiction</a></li>
<li class="nav-item waves-effect waves-light"><a class="nav-link" id="nav-Graphic-tab" data-toggle="tab" href="#nav-Graphic" role="tab" aria-controls="nav-Graphic" aria-selected="false">Graphic Novels</a></li>
</ul>
</div>
Coverflow Content
<div class="container-fluid">
<div class="row justify-content-center">
<div class="col col-xl-7 col-lg-8 col-md-9">
<div class="tab-content" id="myTabContent">
<div class="tab-pane fade active show" id="nav-Fiction" role="tabpanel" aria-labelledby="nav-Fiction-tab">
<div id="cf_fiction" class="CFInnerPanel">
</div>
</div>
<div class="tab-pane fade" id="nav-Mystery" role="tabpanel" aria-labelledby="nav-Mystery-tab">
<div id="cf_mystery" class="CFInnerPanel">
</div>
</div>
OpacUserCSS
OpacMainUserBlock CSS
/*expand content/coverflow widget to span width of screen*/
.col-lg-7 {
-ms-flex: 0 0 58.333%;
flex: 0 0 100%;
max-width: 100% !important;
}
Coverflow Images
/*set the size & margins for each cover*/
.flipster__item img {
width: 155px;
height: 225px;
margin: 20px 10px;
transform: none;
border: 2px solid transparent;
background-color: transparent;
}
Coverflow Images
Currently selected image
Coverflow Images
/*add blue border to covers on hover*/
.flipster__item img:hover {
border: 2px outset #4775d1;
box-shadow: 0px 0px 2px 2px #4775d1;
}
Main Tabs
#category_list {
width: auto;
margin-left: auto;
margin-right: auto;
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-content: stretch;
justify-content: center;
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
}
Main Tabs
#category_list > li > a {
border-right: 5px solid white !important;
background-color: #2c79b7;
font-size: 20px;
font-weight: 500;
color: white;
padding: 10px 15px 10px 15px;
margin-top: 10px;
text-decoration: none;
line-height: 50px;
}
Main Tabs CSS
/*set background-color for main tabs*/
#category_list > li.nav-item > a.active,
#category_list > li.nav-item > a.show,
#category_list > li > a.active {
background-color: #1b517c !important;
}
Subtabs
#myTab, #myTab1, #myTab2, #myTab3 {
width: auto;
margin-left: auto;
margin-right: auto;
font-size: 18px;
line-height: 18px;
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-content: stretch;
justify-content: center;
}
Subtabs
/*remove border from subtabs*/
.nav-tabs {
border: none;
}
/*make font on subtabs white*/
.nav-tabs .nav-link {
color: white !important;
border: none;
border-top-left-radius: 0rem;
border-top-right-radius: 0rem;
}
Subtabs
/* WIDTH ABOVE 1200 PIXELS */
/*set width of subtabs on larger screens*/
@media only screen and (min-width: 1025px) and (orientation: landscape) {
#myTab, #myTab1, #myTab2, #myTab3 {
width: 60% !important;
}
}
OpacUserJS
Coverflow Navigation
$( document ).ajaxComplete(function() {
$('.flipster__item__content a').click( function(e) {
e.preventDefault();
let my_bibnum = $(this).attr('href').split('biblionumber=');
getBibInfo(my_bibnum[1]);
$('#moredetails').attr('href' , '/cgi-bin/koha/opac-detail.pl?biblionumber=' + my_bibnum[1]);
$('#placehold').attr('href' , '/cgi-bin/koha/opac-reserve.pl?biblionumber=' + my_bibnum[1]);
$('#card-image').html( $(this).find('img').clone() );
});
});
$('#close, .close').click( function() {
$('.modal-title').text('No title available');
$('.card-title').text('No description available');
});
}
Things we’d like to see
Coverflow Resources
Thanks
Barbara Glassford Johnson
barbara.johnson@bedfordtx.gov
OPAC - https://bedfordtx.bywatersolutions.com/