work on cimar tuhmbnails

templates/base.html

@@ -11,6 +11,7 @@
                 PENRA Courses
             {% endblock %}
         </title>
+        <meta name="htmx-config" content='{"selfRequestsOnly": false}' />
     {% comment %} <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" /> {% endcomment %}
         <link href="{% static 'css/bootstrap.min.css' %}" rel="stylesheet">
 

templates/cimar_series.html

@@ -1,3 +1,4 @@
+
 <h3>Series</h3>
         <div class="pre-whitespace multi-image-block"><b>Series:</b>
                 {% for series in series_data %}
@@ -6,10 +7,28 @@
                             <span class="series-block-series-number">Series {{ forloop.counter }}:</span><br>
                                             <span>
             <span class='series-block-examination'>{{series|get_item:"series_description"}}</span><br/>
-            <span class='series-block-thumbnail'><img  src='{{series|get_item:"thumbnail"}}?{{cimar_sid}}' /></span><br/>
+            <span class='series-block-thumbnail'>
+              <img 
+      hx-request='{"noHeaders": true}'
+      hx-get='{{series|get_item:"thumbnail"}}?sid={{cimar_sid}}'
+      hx-on::after-request= 'event.detail.elt.src = event.detail.xhr.responseURL;'
+      hx-trigger='load'
+      hx-swap='none'
+              src="" />
+            </span><br/>
             <span class='series-block-image-number'>Images: <span class='series-block-image-number-count'>{{series|get_item:"image_count"}}</span></span>
             </span>
                         </span>
                     </span>
+
+{% comment %} <button
+  id='load-series-image'
+  hx-request='{"noHeaders": true}'
+  hx-get='{{series|get_item:"thumbnail"}}?sid={{cimar_sid}}'
+  hx-on::after-request= 'console.log(event.detail.xhr); document.querySelector(".series-block-thumbnail img").src = event.detail.xhr.responseURL;'
+  hx-trigger='load'
+  hx-swap='none'>
+  Load Series
+</button> {% endcomment %}
                 {% endfor %}
 </div>