APIs for Librarians

Helping you to help yourself in helping your patrons. Or something.

Princeton Theological Seminary Books


Description

The Internet Archive houses a collection of more than 73k texts from the Princeton Theological Seminary. The code below grabs a random number of items and displays them in a nice way. It’s very easy to specify how many items you want displayed.

Something like this can help promote seredipitous discovery in your research guides. It also has the benefit of being something that is fresh and constantly changing without you needing to constantly update it.

Screenshot

Princeton Theological Seminary Books screenshot

More details

The styles included here use flexbox to display each book image to the left of the text. It also vertically centers the text. On small screens it will adjust to have the text below the image.

Currently everything is displayed in one vertical column, book after book. It would be possible to have books in multiple vertical columns but doing that would depend on the code situation of where you were using it. If you want multiple columns I’m willing to help, just contact the project using the form in the footer of this page.

The Code

HTML

1
    <ul id="IA-princeton-theological"></ul>

CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
 .flexy-container {
display: flex;
align-items: center;
}
.flexy-container a {
text-decoration: dotted underline gray;
color: #333;
}
.flexy-container .left {padding: 1rem;}
.pb-title {
font-weight: bold;
font-size: 1.1em;
}
@media (max-width: 500px) {
.flexy-container {flex-wrap: wrap;}
.pb-pic img {
display: block;
margin: 0 auto;
}
}

JavaScript/jQuery

Notes for implementation:
The code itself:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
 $(document).ready(function() {
//Show our spinny preloader
//document.getElementById("preloader").style.display = "";
//Gets the data
$.getJSON(
"https://archive.org/advancedsearch.php?q=collection%3Aprinceton+mediatype%3Atexts&fl[]=creator&fl[]=description&fl[]=identifier&fl[]=publisher&fl[]=subject&fl[]=title&fl[]=volume&fl[]=year&sort[]=&sort[]=&sort[]=&rows=1000&page=1&output=json&callback=?",
function(data) {
//Removes our preloader
//document.getElementById("preloader").style.display = "none";
var jsonContents = data.response.docs;
var jsonResponseLength = data.response.docs.length;

      //This is the function to generate as many random numbers we want - with the amount of API results as the upper range.
      var getRandomNumbers = function(howMany, upperLimit) {
        var limit = howMany,
          amount = 1,
          lower_bound = 1,
          upper_bound = upperLimit,
          unique_random_numbers = [];
        if (amount > limit) limit = amount; //Infinite loop if you want more unique natural numbers than exist in a given range
        while (unique_random_numbers.length < limit) {
          var random_number = Math.floor(
            Math.random() * (upper_bound - lower_bound) + lower_bound
          );
          if (unique_random_numbers.indexOf(random_number) == -1) {
            unique_random_numbers.push(random_number);
          }
        }
        return unique_random_numbers;
      };
      //This is where we actually specify how many random numbers (and therefore how many books) we want generated.
      var ourRandoms = getRandomNumbers(4, jsonResponseLength);

      class PrincetonTheologicalBook {
        constructor(theBookStuff) {
          this.theBookStuff = theBookStuff;
        }
        getToAppending() {
          var domsn = document.getElementById("IA-princeton-theological");
          domsn.insertAdjacentHTML("beforeend", this.theBookStuff);
        }
      }
      for (i = 0; i < ourRandoms.length; i++) {
        var theBookStuff = `<li class=flexy-container><div class="left"><div class="pb-pic"><a href="https://archive.org/details/${
          jsonContents[ourRandoms[i]].identifier
        }"><img src="https://archive.org/services/img/${
          jsonContents[ourRandoms[i]].identifier
        }"></a></div></div><div class="right">
      <div class="pb-title"><a href="https://archive.org/details/${
        jsonContents[ourRandoms[i]].identifier
      }">${jsonContents[ourRandoms[i]].title}</a></div>
      <div class="pb-creator">Creator(s): ${
        jsonContents[ourRandoms[i]].creator
      }</div>
      <div class="pb-published">Published: ${
        jsonContents[ourRandoms[i]].year
      }</div>
      <div class="pb-subjects">Subject(s):  <span class="pb-sub-span">${
        jsonContents[ourRandoms[i]].subject
      }</span></div>
      </div>
      </li>`;

        var ttttt = new PrincetonTheologicalBook(theBookStuff);
        ttttt.getToAppending();
      }
      //Check if any subjects are undefined and if so replace with custom text
      var princetonSubjects = document.getElementsByClassName("pb-sub-span");
      const descMessage = "Unavailable.";
      for (varelement of princetonSubjects) {
        if (element.innerHTML == "undefined" || undefined) {
          element.innerHTML = descMessage;
        }
      }
    }

);
});