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

Just the blank <ul> our JS will work with.

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

CSS

This CSS just uses flexbox to position the image to the left and the text to the right.
The media query makes it so that on small screens the text switches to below the image.

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:

Line 32: getRandomNumbers(4, jsonResponseLength); To change the number of items displayed change the 4 to any number that doesn’t exceed the amount of results from the API.
Line 6: This is our request to the API. To change the amount of results, modify rows=1000 to a different number. Note, the code as it is gets 1000 and this is simply how many of the collection’s items are available to us to pick from (for randomly displaying individual items).

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;
        }
      }
    }

);
});