image captions (Part of #2777)

getnikola · Jun 7, 2017 · 91a4529 · 91a4529
1 parent dd38b45
commit 91a4529
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 3 deletions.
diff --git a/CHANGES.txt b/CHANGES.txt
@@ -9,10 +9,12 @@ Features
 * Extract metadata from HTML meta and title tags like Pelican (Issue #1923)
 * Update assets in the ``base`` and ``base-jinja`` themes and clean
   up code (Issue #2744)
+* Show captions in the base theme gallery (Part of issue #2777)
 
 Bugfixes
 --------
 
+* Add alt attribute to images in galleries in base theme (Part of issue #2777)
 * Support empty lines in YAML/TOML metadata (Part of issue #2801)
 * Tests run on macOS.
 

diff --git a/nikola/data/themes/base/templates/base.tmpl b/nikola/data/themes/base/templates/base.tmpl
@@ -26,7 +26,10 @@ ${template_hooks['extra_head']()}
         <script src="/assets/js/baguetteBox.min.js"></script>
     % endif
     <%block name="extra_js"></%block>
-    <script>baguetteBox.run('a.reference');</script>
+    <script>baguetteBox.run('a.reference', {
+        captions: function(element) {
+            return element.getElementsByTagName('img')[0].alt;
+    }});</script>
     ${body_end}
     ${template_hooks['body_end']()}
 </body>

diff --git a/nikola/data/themes/base/templates/gallery.tmpl b/nikola/data/themes/base/templates/gallery.tmpl
@@ -75,6 +75,7 @@ flowr(document.querySelectorAll("#gallery_container")[0], {
             img.setAttribute('src', params.itemData.url_thumb);
             img.setAttribute('width', params.width);
             img.setAttribute('height', params.height);
+            img.setAttribute('alt', params.itemData.title);
             img.style.maxWidth = '100%';
             link = document.createElement("a");
             link.setAttribute('href', params.itemData.url);
@@ -96,7 +97,9 @@ flowr(document.querySelectorAll("#gallery_container")[0], {
             }
         }
     });
-    baguetteBox.run('#gallery_container');
+    baguetteBox.run('#gallery_container', {
+        captions: function(element) {
+            return element.getElementsByTagName('img')[0].alt;
+    }});
 </script>
 </%block>
-