Hexo galleries

As mentioned in a previous post, I moved to hexo partly because I wanted to make image galleries work.

As it turns out, the landscape theme has already laid the groundwork by including fancybox so you can conveniently add something like this to your front matter:

1
2
3
4
photos:
- /images/IMG_20170125_160347.jpg
- /images/IMG_20170125_082923.jpg
- /images/IMG_20170125_082915.jpg

and place the relevant photos in /source/images/. Now if you click on the first image on the top of the post you will get a default fancybox gallery. However, this does not allow you to add annotations or captions.

What would be preferable would be a gallery with thumbnails and captions:

Studio BellStudio Bell Downtown CalgaryDowntown Calgary The Rocky mountainsThe Rocky mountains

This should looks something like this:

1
2
3
{% fancybox "/images/IMG_20170125_160347.jpg" "Studio Bell" %} 
{% fancybox "/images/IMG_20170125_082923.jpg" "Downtown Calgary" %}
{% fancybox "/images/IMG_20170125_082915.jpg" "The Rocky mountains" %}

What I also wanted to achieve was to separate the images into multiple galleries, be it on the same page or on the home page. Using the fancybox tag as above leads to the unexpected result that all images on the page will end up in a single gallery. This is a side effect of the theme trying to ensure that the galleries from individual posts are in separate galleries on the home page. It does this in themes/landscape/js/script.js by iterating over all images in each article and setting their rel link to a unique id for each article, overwriting any pre-existing rel links in the process. The fix looks like this:

1 Copy the themes/landscape/scripts/fancybox.js to create a new tag. Let’s call it fancybox2

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
var rUrl = /((([A-Za-z]{3,9}:(?:\/\/)?)(?:[-;:&=\+\$,\w]+@)?[A-Za-z0-9.-]+|(?:www.|[-;:&=\+\$,\w]+@)[A-Za-z0-9.-]+)((?:\/[\+~%\/.\w-_]*)?\??(?:[-\+=&;%@.\w_]*)#?(?:[.\!\/\\w]*))?)/;
/**
* Fancybox tag
*
* Syntax:
*   {% fancybox2 galleryname /path/to/image [/path/to/thumbnail] [title] %}
*/
hexo.extend.tag.register('rpgallery', function(args){
  var reltag = args.shift(),
    original = args.shift(),
    thumbnail = '';
  if (args.length && rUrl.test(args[0])){
    thumbnail = args.shift();
  }
  var title = args.join(' ');
  return '<a class="fancybox" href="' + original + '" title="' + title + '" rel="' + reltag + '">' +
    '<img src="' + (thumbnail || original) + '" alt="' + title + '">' +
    '</a>' + 
    (title ? '<span class="caption">' + title + '</span>' : '');
});

2 Modify themes/landscape/source/js/script.js to append to the existing rel link instead of overwriting it. 

1
2
3
4
5
6
7
8
9
10
11
12
diff --git a/themes/landscape/source/js/script.js b/themes/landscape/source/js/script.js
index 1e58767..58d9fa8 100644
--- a/themes/landscape/source/js/script.js
+++ b/themes/landscape/source/js/script.js
@@ -98,7 +98,7 @@
     });
 
     $(this).find('.fancybox').each(function(){
-      $(this).attr('rel', 'article' + i);
+      $(this).attr('rel', $(this).attr('rel') + '-article-' + i);
     });
   });

And voila, we can have another separate gallery …

Frozen water in SeattleFrozen water in Seattle Foggy cold in SeattleFoggy cold in Seattle