Enhanced Electronic Library Cards in Koha

2nd May 2024 | Alexander Blanchard

In today’s digital age, forgetting your wallet no longer spells disaster. From mobile payments for your morning coffee to e-tickets for public transport and concerts, digital solutions streamline everyday tasks. But what about a visit to your local library?

Thanks to this blog post by Lucas Gass from ByWater, we know that patrons leaving their library card at home is no longer a problem, thanks to the introduction of electronic library cards. Building on this foundation, the latest enhancement to electronic library cards adds personalisation and offers the opportunity to take functionality to new heights.

Inspired by the physical ID cards used by many university libraries, the electronic library cards now boast the addition of patron images, allowing them to be used as electronic ID cards across the campus. With this in mind, the electronic library cards have been styled to mirror their traditional counterparts, including the addition of the establishment’s logo and the display of the card holder’s role.

library e-card
An example of the enhanced library e-card.

Adding the enhancements:

Building on the existing report used to return the correct card number, we can add a few simple adjustments to access patron images and roles:

JOIN categories ON borrowers.categorycode = categories.categorycode
    borrowers.borrowernumber = <>
Base64 Encoding

You will notice that the patronimage.imagefile undergoes a process called TO_BASE64. This converts the binary data of the image into a ASCII string format. This is a text-based format, making it easier to transmit the image data, especially when working with web technologies such as jQuery, which primarily deal with text data.

As noted in the previous blog from ByWater, you will want to make sure this report is public before you save it and make a note of the report number.


Now let’s move across to the OPACUserJS system preference and adjust the custom jQuery. You can replace the previous /* start e-card jQuery*/ with the following:

/* start e-card jQuery */
$(document).ready(function () {
  if ($("#usermenu").length) {
    var ecard_report_number = 420;
    var eborrowernumber = $(".loggedinusername").attr("data-borrowernumber");

    $.getJSON('/cgi-bin/koha/svc/report?id=' + ecard_report_number + '&sql_params=' + eborrowernumber)
      .done(function (data) {
        if (Array.isArray(data) && data.length > 0) {
          $.each(data, function (index, value) {
              console.log("Data at index", index, ":", value);
            var ecard_number = data[0][0];
            console.log("ecard_number: ", ecard_number);
            var ecard_name_obj = $(".userlabel").text();
            var ecard_image = data[0][1];
            var ecard_name = ecard_name_obj.split("Welcome, ")[1];
            var ecard_role = data[0][2] || "Unknown Role";
            console.log('role: ', ecard_role);


            var logo_html = ecard_image 
              ? ''
              : '
Logo Here
'; $("body").append( '

Lines you will need to edit:

Let ecard_report_number = 420;

Make sure that the report number corresponds to the report number you noted earlier.

If you want to include your library’s logo, replace the path to your image in the ‘src’ section and adjust the title of your logo.


Finally, let’s update the OPACUserCSS System Preference to reflect the layout of the physical ID cards:

/* e-card css */
border: 4px solid #003D50; 
border-radius: 7px; 
display: flex;
flex-direction: column;
  align-items: center;
height: 290px;

.fa-user-circle-o {
 font-size: 12vw !important;
 padding: 15px;

#barcode_placeholder {
  width: 100%;
  height: 70%;
  align-items: right;
  display: flex;
  align-self: center;

#photo {
  width: 33%;
  height: 100%;

#photo img {
  width: 100%;
  height: 100%;

#name {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 60%;
  height: 100%;

#name span h2{
  font-size: 1.6vw;
  width: 100%;
  padding-left: 5px;

#logo_here {
  width: 100%;
  height: 65%;

#name_photo {
 display: flex;
 flex-direction: row-reverse;
 position: relative;
 align-items: center;
 padding: 10px 15px 10px 15px;
 height: 60%;

#barcode_role_container {
  width: 100%;
  height: 50%;
  display: flex;
  flex-direction: column;

#role {
  height: 50%;
  padding-left: 20px;
/* end e-card css */

That’s it! Your electronic library card will now reflect the latest enhancements.


Need help? Chat to our team of experts today.

Get Support