Merge pull request #3474 from getnikola/fix-3472-baguettebox-a-img

Fix #3472 (links to images broken); limit baguetteBox to <a> with <img>

CHANGES.txt

@@ -24,6 +24,9 @@ Bugfixes
 * Windows: Also fix symlinks when installing from source with pip; if possible,
   enable Developer Mode and run ``git config --global core.symlinks true``
   before cloning the Nikola repo
+* Fix clicking on links to image files. baguetteBox now requires a
+  link (``<a>``) to have an ``<img>`` as a child in order to make the
+  link activate the lightbox. (Issue #3472)
 * Fix ``LINK_CHECK_WHITELIST`` having issues due to mixing Unicode
   and bytestrings (Issue #3466)
 * Add support for ``nbconvert>=6.0.0`` (Issue #3457)

docs/manual.rst

@@ -2000,9 +2000,7 @@ and put images there. Nikola will take care of creating thumbnails, index page,
 If you click on images on a gallery, or on images with links in post, you will
 see a bigger image, thanks to the excellent `baguetteBox
 <https://feimosi.github.io/baguetteBox.js/>`_.  If don’t want this behavior, add an
-``.islink`` class to your link. (The behavior is caused by ``<a
-class="reference">`` if you need to use it outside of galleries and reST
-thumbnails.)
+``.islink`` class to your link.
 
 The gallery pages are generated using the ``gallery.tmpl`` template, and you can
 customize it there (you could switch to another lightbox instead of baguetteBox, change

nikola/data/themes/base-jinja/templates/base.tmpl

@@ -32,9 +32,7 @@
     <script>
     baguetteBox.run('div#content', {
         ignoreClass: 'islink',
-        captions: function(element) {
-            return element.getElementsByTagName('img')[0].alt;
-    }});
+        captions: function(element){var i=element.getElementsByTagName('img')[0];return i===undefined?'':i.alt;}});
     </script>
     {{ body_end }}
     {{ template_hooks['body_end']() }}

nikola/data/themes/base/templates/base.tmpl

@@ -32,9 +32,7 @@ ${template_hooks['extra_head']()}
     <script>
     baguetteBox.run('div#content', {
         ignoreClass: 'islink',
-        captions: function(element) {
-            return element.getElementsByTagName('img')[0].alt;
-    }});
+        captions: function(element){var i=element.getElementsByTagName('img')[0];return i===undefined?'':i.alt;}});
     </script>
     ${body_end}
     ${template_hooks['body_end']()}

nikola/data/themes/bootblog4-jinja/templates/base.tmpl

@@ -96,9 +96,7 @@
     <script>
     baguetteBox.run('div#content', {
         ignoreClass: 'islink',
-        captions: function(element) {
-            return element.getElementsByTagName('img')[0].alt;
-    }});
+        captions: function(element){var i=element.getElementsByTagName('img')[0];return i===undefined?'':i.alt;}});
     </script>
 {{ body_end }}
 {{ template_hooks['body_end']() }}

nikola/data/themes/bootblog4/templates/base.tmpl

@@ -96,9 +96,7 @@ ${base.late_load_js()}
     <script>
     baguetteBox.run('div#content', {
         ignoreClass: 'islink',
-        captions: function(element) {
-            return element.getElementsByTagName('img')[0].alt;
-    }});
+        captions: function(element){var i=element.getElementsByTagName('img')[0];return i===undefined?'':i.alt;}});
     </script>
 ${body_end}
 ${template_hooks['body_end']()}

nikola/data/themes/bootstrap4-jinja/templates/base.tmpl

@@ -97,9 +97,7 @@ bg-dark
     <script>
     baguetteBox.run('div#content', {
         ignoreClass: 'islink',
-        captions: function(element) {
-            return element.getElementsByTagName('img')[0].alt;
-    }});
+        captions: function(element){var i=element.getElementsByTagName('img')[0];return i===undefined?'':i.alt;}});
     </script>
 {{ body_end }}
 {{ template_hooks['body_end']() }}

nikola/data/themes/bootstrap4/templates/base.tmpl

@@ -97,9 +97,7 @@ ${base.late_load_js()}
     <script>
     baguetteBox.run('div#content', {
         ignoreClass: 'islink',
-        captions: function(element) {
-            return element.getElementsByTagName('img')[0].alt;
-    }});
+        captions: function(element){var i=element.getElementsByTagName('img')[0];return i===undefined?'':i.alt;}});
     </script>
 ${body_end}
 ${template_hooks['body_end']()}

npm_assets/README-baguetteBox.md

@@ -0,0 +1,6 @@
+BaguetteBox requires patching to make links to image files work.
+
+To patch:
+
+1. `patch node_modules/baguettebox.js/dist/baguetteBox.js baguetteBox-links-with-images-only.patch`
+2. Use <https://skalman.github.io/UglifyJS-online/> to create `baguetteBox.min.js` (make sure the license comment is preserved)

scripts/update-npm-assets.sh

@@ -53,4 +53,7 @@ popd
 
 scripts/generate_symlinked_list.sh
 
+# Verify baguetteBox patch
+grep PATCHED npm_assets/node_modules/baguettebox.js/dist/baguetteBox.js > /dev/null || printf '%b' '\033[1;31mWARNING: baguetteBox must be manually patched (in both unminified and minified versions), see npm_assets/baguetteBox-links-with-images-only.patch\033[0m\n'
+
 # vim:tw=0