1 of 20

Inside Out, Outside In

Captivating users through interactive book cover art

Can Li

eCAUG 2026 Oct 7, 2026

2 of 20

Introduction

A brief review of online book display
Display showcase
Workflow and reusable code

2

Can Li eCAUG 2026 Conference

3 of 20

A brief review

code4lib journal Issue 44, 2019-05-16

Building a better book widget: Using Alma Analytics to automate new book discovery

Trying to move away from statics lists

https://library2.buffalo.edu/new-additions/books-display/list-all/print.php

3

Can Li eCAUG 2026 Conference

Online book display is not a novel idea. Many public libraries, publishers, and sites like Goodreads all have used visual presentations on their website and social media. However, It’s less common in academic libraries.

When this idea first came to my mind a couple years ago, I found this article on code4lib by East Tennessee State University. The authors identified the same two problems I wanted to address, which is 1) “we rely on the expectation that users will periodically search our systems to discover newly acquired titles” and 2) maintaining the traditional static lists were tedious and unsustainable. I would also add that we also rely on the assumption that users CAN discover titles of interest to them.

Use cases: East Tennessee’s automated book widgets are deployed in their subject guides, website, and digital displays. I will show an example on the next slide.

Challenges to adopt: However this seems like a complex project that requires server programming.

The example on the bottom where book lists are presented in the traditional, static, table-format lists may have their usage. However, a list format is what I try to move away from; instead I am focusing on a solution that requires the least effort to maintain, and delivers a visual patterns common on media streaming and e-commerce platforms.

4 of 20

A brief review

East Tennessee State University

Book carousel in History LibGuide

4

Can Li eCAUG 2026 Conference

5 of 20

A brief review

Example: CSU Bakersfield Library Collection Discovery

Primo VE

Collection Discovery

5

Can Li eCAUG 2026 Conference

6 of 20

A brief review

Primo VE

Book Showcase Carousel

Primo NDE

Example: SFSU NDE test view

6

Can Li eCAUG 2026 Conference

7 of 20

Project showcase

On GitHub https://can-li1128.github.io/display-designs/

https://can-li1128.github.io/grid/

7

Can Li eCAUG 2026 Conference

8 of 20

Library

display

8

Can Li eCAUG 2026 Conference

9 of 20

Three components

Primo records Permalinks

Cover images

ISBNs

AI-assistant programming

9

Can Li eCAUG 2026 Conference

10 of 20

Cover images

Syndetics

Template:

https://syndetics.com/index.aspx?isbn=<ISBN>/SC.GIF&client=<library code>&type=xw12

Example:

https://syndetics.com/index.aspx?isbn =9780593686218/L C.GIF&client=primo&type=xw12

10

Open library book cover api

Example: https://covers.openlibrary.org/b/isbn/9780521112383-L.jpg

Project Gutenberg

Example: https://www.gutenberg.org/cache/epub/65994/images/cover.jpg

Can Li eCAUG 2026 Conference

What the program does is to find a cover image somewhere online, so the program needs to be instructed as to where to find that image. Thumbnail cover images are available on various sites. Here are a few options and definitely not an exhaustive list. They are Syndetics, The Open Library, and Project Gutenberg.

These urls all follow a specific pattern and the variable is the ISBN. The Syndetics link template is easy enough to use–you just replace the ISBN with real ISBNs, and client code is primo.That’s where Alma gets cover images from.

Another variable is the image size in LC.GIF. L means large image. If you replace L by M or S, you get median or small sized images. Please note those are all thumbnail images and a large size is under 30KB. My project used large size images from Syndetics.

11 of 20

Alma analytics

11

3

Can Li eCAUG 2026 Conference

12 of 20

Get report

in Excel

12

Can Li eCAUG 2026 Conference

13 of 20

AI-assisted coding

One task at a time

Be creative

Test the result

Be precise and thorough

13

Can Li eCAUG 2026 Conference

I wanted to share a few reflections on this process:

AI is very capable of coding, and I was amazed when I see the result. The example of finding a book cover was done at the first attempt.
The code for an interactive display is more complex. It can mess things up, and that’s because natural language often are not precise or thorough. Building the program in small incremental steps helps to troubleshoot. I will show you a video that captured how the carousel behaved at the beginning stage.
Be precise and thorough.
Test the result each step to see if it accomplished exactly what you instructed it to do
Be creative�

Context is crucial for effective coding. E.g. Keeping all the chats in a project in ChatGPT, or in a Gemini Notebook helps the bot make sense of the instructions across chats.�

14 of 20

Troubleshooting

example 1

14

Can Li eCAUG 2026 Conference

15 of 20

Troubleshooting

example 2

15

Can Li eCAUG 2026 Conference

16 of 20

Accessibility

features

Web Content Accessibility Guidelines (WCAG) on Pause, Stop, Hide

Motion Sensibility:

Pause, browser setting

Navigational control:

buttons and keyboard; screen reader control

16

Can Li eCAUG 2026 Conference

The Prev, Pause/Play, and Next buttons were added to meet Web Content Accessibility Guidelines (WCAG). They serve three key functions:

Pause / Play Button:

WCAG 2.2.2 (Pause, Stop, Hide): Accessibility guidelines require that any automatically moving or auto-updating content lasting longer than 5 seconds must give users a way to pause or stop it.
User Control: It allows users who find automatic motion distracting, or screen reader users who need time to inspect an item, to halt the rotation easily.

Prev & Next Buttons:

Keyboard Navigation: They give keyboard-only users (who cannot use a mouse to hover) a clear, direct way to manual step forward or backward through the book collection at their own pace.
Screen Reader Control: They enable screen reader users to navigate between titles explicitly while receiving clear status announcements (e.g., "Showing book 3") through the live notification region.

17 of 20

Grid design

Use cases for two designs

17

Can Li eCAUG 2026 Conference

I have created two versions for the grid design. The design with just cover images without adding permalinks was born first. It may not be of much practical use in term of leading to resource discovery. I kept it because I think it can be used to quickly create something for decorative purposes, e.g. adding an image to a LibGuide, a slide, or newsletter etc.

Later I thought to add permalinks, subjects and description. I ran a script to add those from PNX data using Primo Search API. Supplemented with such information, it helps users discover what might interest them. Because it’s a HTML, it can be distributed as a URL in any format such as an email or a campus memo announcement. It also might be useful to run on a public use computer in the library or a touch screen.

All of the designs are meant to go where user are, on a computer or on the go with their phones.

18 of 20

Workflow

Carousel

Excel (Alma new arrivals report)

->Convert to JSON

-> enrich with image links & Primo permalinks

-> run the carousel HTML

Grid

Excel (SFSU’s print book display list)

-> Convert to JSON

-> enrich with ISBN, image links, subject, description, Primo permalinks

-> run the grid HTML

18

Can Li eCAUG 2026 Conference

19 of 20

Reusable

code

https://can-li1128.github.io/display-designs/

Showcase page

& Small programs

19

Can Li eCAUG 2026 Conference

20 of 20

Thank you

Can Li

Discovery & Systems Librarian

San Francisco State University

cli05@sfsu.edu

20

Can Li eCAUG 2026 Conference