Code Samples (apologies for inevitably weird formatting, let me know and I can try to send you some better files…)
 
SQL Report:
SELECT CONCAT(
'<div class="lists_title">',title,'<br><br><br><div class="coveri">',IF(
isbn IS NULL, '<img style="max-height:300px;" src=" URL_OF_A_ GENERIC_BOOK_COVER_IMAGE_YOU USE">', CONCAT(
'<img src="URL_OF_THE_SEARCH_OPTION_FOR_A_BOOK_COVER_SERVICE_SET_TO_SEARCH_ON_ISBN',IF(LEFT(isbn,LOCATE(' ',isbn) - 1)='', isbn, TRIM('(pbk.)' FROM LEFT(isbn,LOCATE(' ',isbn) - 1))),'"></div>')),'<br><div class="lists_link"><a href="https://YOUR.KOHA.SERVER/cgi-bin/koha/opac-detail.pl?biblionumber=',biblionumber,
        '\" target="_blank">','Find it!</a>'
) AS "Title and Cover"
FROM virtualshelfcontents
LEFT JOIN biblio USING (biblionumber)
LEFT JOIN biblioitems USING (biblionumber)
LEFT JOIN biblio_metadata USING (biblionumber)
JOIN (SELECT @num :=0) AS n ON 1=1      
WHERE shelfnumber=<<>> AND virtualshelfcontents.borrowernumber IN ('BORROWER NUMBER OF THE STAFF USE ACCOUNT THAT WILL CREATE THE LISTS')
GROUP BY title, biblionumber
ORDER BY 1
 
HTML (added, in our case, to opacnavbottom);
       
<section>
        <div class="container" id="srlists">
       
                <h2>Summer Reading</h2>
                <p style="padding-left: 20px;"><a href='https://www.camdencountylibrary.org/camden-county-schools-summer-reading-lists' alt="Link to All Summer Reading Lists">All Available Reading Lists</a></p>
                <h3>Selected Lists</h3>
                <ul>
                        <li><a href="#" data-toggle="modal" data-target="#srlmodal-1">Somerdale Park K SR</a></li>
                        <li><a href="#" data-toggle="modal" data-target="#srlmodal-2">Pine Hill Middle School Summer Reading 2018</a></li>
                        <li><a href="#" data-toggle="modal" data-target="#srlmodal-3">Ms. Wurster's PreK Books! {Merchantville School}</a></li>
                </ul>          
 
                <div class="modal fade" id="srlmodal-1" data-modal-index="1">
                        <div class="modal-dialog">
                                <div class="modal-content">   
                                        <div class="modal-header">
                                                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                                                <h4 class="modal-title">Somerdale Park K SR</h4>
                                        </div>
       
                                        <div class="modal-body">
                                                <table id="1" class="table">
                                                        <thead>
                                                        </thead>
                                                        <tbody>
                                                        </tbody>
                                                </table>
                                        </div> 
 
                                        <div class="modal-footer">
                                                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                                        </div>
                         </div><!-- /.modal-content -->
                        </div><!-- /.modal-dialog -->
                </div><!-- /.modal --> 
 
               
        </div>
</section>
 
 
CSS (added to opacuserCSS)
 
        .lists_link {
    float:right;
    padding-bottom: 10px;
    font-style: italic;
    font-size: 20pt;
}
 
.lists_title {
    padding-top: 5px;  
    font-size: 16pt;  
 
}
 
.coveri img {
    padding-left: 50px;
}
 
#srlists h3 {
    font-weight: normal;
    padding-left: 5px;
}
 
#srlists .modal {
     display:none;
}
 
 
#srlists .modal-header .close
{
        float: right;
        font-size: 20px;
    margin-top: 10px;
}
 
 
 
JQuery (added to opacuserjs):
 
// Custom list script
 
$(document).ready(function() {
       
$('#opacnavbottom .table').each(function () {                  
  var data1;
  var listnum = this.id;
  $.get( "/cgi-bin/koha/svc/report?id=Koha_report_number&sql_params="+listnum, function( data1 ) {
$.each(data1, function(index, value) {
var json = value;
var tr;
var tbname = '#' + listnum;
 
tr = $('<tr/>');
$.each(json, function(index, value) {
tr.append("<td>" + value + "</td>");
});
 
$( tbname ).append(tr);
});
        });
   });
});