adding function for adding images

web/app/random.py

@@ -59,6 +59,7 @@ def ten_random_abstracts():
 
 # route for getting ten random images
 @random.route('/random/images/')
-def ten_random_images():
-    results = solr.get_ten_random_images()
-    return render_template('images.html', results=results)
+def random_images():
+    images = solr.get_random_images(4)
+    additional_images = solr.get_random_images(6)
+    return render_template('images.html', images=images, additional_images=additional_images)

web/app/solr.py

@@ -185,18 +185,19 @@ def get_ten_random_elements(field):
                 i += 1
     return output
 
-def get_ten_random_images():
+def get_random_images(number):
     core = 'all'
     output = []
     i = 0
-    while i <= 9:
+    while i <= number-1:
         search_results = random_search(core)
         results = search_results[0]
         for result in results:
             if ops.get_images(result['doc_ref']):
                 image = ops.get_images(result['doc_ref'])
-                result.update(image)
-                output.append(result)
+                dict = {'id': result['id']}
+                dict.update(image)
+                output.append(dict)
                 i += 1
     return output
 

web/app/templates/images.html

@@ -11,11 +11,11 @@
   <span class="info" style="display: none;">
     <span class="operations">↝ new display of random images from dataset;</span>
   </span>
-  <button  onclick="" title="add one">+</button>
+  <button onclick="addRandomImage()" title="add one">+</button>
   <span class="info" style="display: none;">
     <span class="operations">↝ add a random image from dataset;</span>
   </span>
-  <button  onclick="removeRandomImage()"  title="remove one">-</button>
+  <button onclick="removeRandomImage()"  title="remove one">-</button>
   <span class="info" style="display: none;">
     <span class="operations">↝ remove a random image from page;</span>
   </span>
@@ -23,21 +23,33 @@
   <a href="{{ url_for('main.index') }}" class="arrow-back h1 text-left contrast" style="color: var(--color-lightyellow) !important;" title="back to index"> ⇽ </a>
 </div>
 
-
-  <div class="row">
-    <div class="col m-5">
-      <p class="h1 text-center contrast">a Scattering of Images</p>
-    </div>
+<div class="row">
+  <div class="col m-5">
+    <p class="h1 text-center contrast">a Scattering of Images</p>
   </div>
+</div>
 
-  <div class="container-fluid compare">
+<div id="image_container" class="container-fluid compare">
 
-  {% for result in results %}
+  {% for image in images %}
 
-    <img class="img-fluid" src="data:image/jpg;base64,{{ result['image'] }}" alt="Drawing accompanying patent for {{ result['title'] }}" />
+    <img class="img-fluid" src="data:image/jpg;base64,{{ image['image'] }}" alt="Drawing accompanying patent for {{ image['id'] }}" />
 
   {% endfor %}
 
-  </div>
+</div>
+
+<script type="text/javascript">
+  var images = {{ additional_images|tojson }};
+
+  x = 0;
+
+  function addRandomImage(){
+    var record_array = images[x];
+    document.querySelector('#image_container').innerHTML += "<img class='img-fluid' src='data:image/jpg;base64," + record_array['image'] + "' alt='Drawing accompanying patent for " + record_array['id'] + "' />";
+    x++;
+    window.scrollTo(0, document.body.scrollHeight);
+  }
+</script>
 
 {% endblock %}

web/app/templates/index.html

@@ -20,7 +20,7 @@
 
   <div class="col text-center p-2">
     <!-- random images -->
-    <a href="{{ url_for('random.ten_random_images') }}">a scattering of images</a>
+    <a href="{{ url_for('random.random_images') }}">a scattering of images</a>
   </div>
 </div>
 

web/app/templates/titles.html

@@ -7,11 +7,11 @@
   <span class="info" style="display: none;">
     <span class="operations">↝ new display of random titles from dataset;</span>
   </span>
-  <button  onclick="addRandomTitle()" title="add one">+</button>
+  <button onclick="addRandomTitle()" title="add one">+</button>
   <span class="info" style="display: none;">
     <span class="operations">↝ add a random title from dataset;</span>
   </span>
-  <button  onclick="removeRandomTitle()"  title="remove one">-</button>
+  <button onclick="removeRandomTitle()" title="remove one">-</button>
   <span class="info" style="display: none;">
     <span class="operations">↝ remove a random title from page;</span>
   </span>