X-Git-Url: https://git.arvados.org/rnaseq-cwl-training.git/blobdiff_plain/5d9e94328016e8c95d63b71105b0e37dd20a391d..3a82dee0447f439da7524299f3f1c433eb285d62:/bin/boilerplate/_extras/figures.md

diff --git a/bin/boilerplate/_extras/figures.md b/bin/boilerplate/_extras/figures.md
index c1511e8..ee5b650 100644
--- a/bin/boilerplate/_extras/figures.md
+++ b/bin/boilerplate/_extras/figures.md
@@ -1,30 +1,58 @@
 ---
 title: Figures
 ---
+
+{% include base_path.html %}
+
 <script>
   window.onload = function() {
     var lesson_episodes = [
     {% for episode in site.episodes %}
-    "{{ episode.url}}"{% unless forloop.last %},{% endunless %}
+    "{{ episode.url }}"{% unless forloop.last %},{% endunless %}
     {% endfor %}
     ];
+
     var xmlHttp = [];  /* Required since we are going to query every episode. */
     for (i=0; i < lesson_episodes.length; i++) {
+
       xmlHttp[i] = new XMLHttpRequest();
       xmlHttp[i].episode = lesson_episodes[i];  /* To enable use this later. */
       xmlHttp[i].onreadystatechange = function() {
+
         if (this.readyState == 4 && this.status == 200) {
-          var article_here = document.getElementById(this.episode);
           var parser = new DOMParser();
           var htmlDoc = parser.parseFromString(this.responseText,"text/html");
           var htmlDocArticle = htmlDoc.getElementsByTagName("article")[0];
-          article_here.appendChild(htmlDocArticle.getElementsByTagName("h1")[0]);
-          for (let image of htmlDocArticle.getElementsByTagName("img")) {
-            article_here.appendChild(image);
+
+          var article_here = document.getElementById(this.episode);
+          var images = htmlDocArticle.getElementsByTagName("img");
+
+          if (images.length > 0) {
+            var h1text = htmlDocArticle.getElementsByTagName("h1")[0].innerHTML;
+
+            var htitle = document.createElement('h2');
+            htitle.innerHTML = h1text;
+            article_here.appendChild(htitle);
+
+            var image_num = 0;
+            for (let image of images) {
+              image_num++;
+
+              var title = document.createElement('p');
+              title.innerHTML = "<strong>Figure " + image_num + ".</strong> " + image.alt;
+              article_here.appendChild(title);
+
+              article_here.appendChild(image.cloneNode(false));
+
+              if (image_num < images.length) {
+                var hr = document.createElement('hr');
+                article_here.appendChild(hr);
+              }
+            }
           }
         }
       }
-      episode_url = "{{ page.root }}" + lesson_episodes[i];
+      episode_url = "{{ relative_root_path }}" + lesson_episodes[i];
       xmlHttp[i].open("GET", episode_url);
       xmlHttp[i].send(null);
     }
@@ -34,7 +62,7 @@ title: Figures
 Create anchor for each one of the episodes.
 {% endcomment %}
 {% for episode in site.episodes %}
-<article id="{{ episode.url }}"></article>
+<article id="{{ episode.url }}" class="figures"></article>
 {% endfor %}
 
 {% include links.md %}