From 91a45297679d2ba17055e2db1106d1d325c9ef23 Mon Sep 17 00:00:00 2001
From: Roberto Alsina <ralsina@onapsis.com>
Date: Wed, 7 Jun 2017 11:04:28 -0300
Subject: [PATCH] image captions (Part of #2777)

---
 CHANGES.txt                                    | 2 ++
 nikola/data/themes/base/templates/base.tmpl    | 5 ++++-
 nikola/data/themes/base/templates/gallery.tmpl | 7 +++++--
 3 files changed, 11 insertions(+), 3 deletions(-)

diff --git a/CHANGES.txt b/CHANGES.txt
index f727c07b75..9d0d277b9e 100644
--- 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
index 3a23b9dcfd..910e21de69 100644
--- 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
index 2370795b15..a937f28e7a 100644
--- 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>
-