figures.md: fixes and improvements

Pull Request carpentries/styles#330
Closes carpentries/styles#343

1. Fix the script so that all figures are displayed.
2. Add image numbers.
3. Don't add headers for episodes without images.
4. Add horizontal rulers to better separate adjacent images.
   Don't add a ruler after the last image in the episode.
5. Add empty lines to `figures.md` to improve code readability.
6. Use classes for styling text and figures

diff --git a/assets/css/lesson.scss b/assets/css/lesson.scss
index bf93bfbb22081856ab6f9e76e2a5fb60e80cae9e..0e0ab1e180d258ed53731495e5f308f7034cece8 100644 (file)
--- a/assets/css/lesson.scss
+++ b/assets/css/lesson.scss
@@ -163,6 +163,8 @@ article h3 { margin: 40px 0 16px; }
 // Miscellaneous.
 //----------------------------------------
 
+.figures h2 { margin-top: 100px; }
+
 .maintitle {
   text-align: center;
 }

diff --git a/bin/boilerplate/_extras/figures.md b/bin/boilerplate/_extras/figures.md
index c1511e8ca174c9a2da451276c86e9864f87e1e82..02ceff6f0ae9409866d73c6d40c7cfc0adb3b5b7 100644 (file)
--- a/bin/boilerplate/_extras/figures.md
+++ b/bin/boilerplate/_extras/figures.md
@@ -5,22 +5,49 @@ title: Figures
   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);
+
+              var img = document.createElement('img');
+              img.src = image.src;
+              article_here.appendChild(img);
+
+              if (image_num < images.length) {
+                var hr = document.createElement('hr');
+                article_here.appendChild(hr);
+              }
+            }
           }
         }
       }
@@ -34,7 +61,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 %}