Hexo Photo Gallery
So while I was migrating my data over from wordpress there were a few posts with photo galleries. The options I had were to write each photo gallery by hand or use the photos array in the front matter. What I did was change the photos array a bit and added the following code as a module
1hexo.extend.tag.register('hexoGallery', function (args) {
2 gallery = '<div class="flex three demo">';
3 this.photos.forEach(function(photo, i){
4 gallery += '<div><img src="/imgs/spin.gif" class="lazy" data-src="';
5 gallery += photo.split(",")[0];
6 gallery += '"';
7 gallery += 'data-jslghtbx="';
8 gallery += photo.split(",")[1];
9 gallery += '" data-jslghtbx-group="gallery"';
10 gallery += '\>';
11
12 gallery += '</div>';
13 });
14 gallery += "</div>";
15 return gallery;
16});
The photos array needs to look like this:
1photos:
2 -
3 - /2009/11/fixing-banders-xbox-360/1-150x150.jpg
4 - /2009/11/fixing-banders-xbox-360/1.jpg
5 -
6 - /2009/11/fixing-banders-xbox-360/2-150x150.jpg
7 - /2009/11/fixing-banders-xbox-360/2.jpg
8 -
9 - /2009/11/fixing-banders-xbox-360/3-150x150.jpg
10 - /2009/11/fixing-banders-xbox-360/3.jpg
11 -
12 - /2009/11/fixing-banders-xbox-360/4-150x150.jpg
13 - /2009/11/fixing-banders-xbox-360/4.jpg
The items ending with -150x150.jpg in the code above are the thumbnails and the files without that are the full size images. This will create a 3xN photo gallery.
Note that the code above uses the Picnic CSS framework for aligning the thumbnails and uses lazy loading. You can change to fit the libraries you use
