Hexo Photo Gallery
2016-09-27
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
hexo.extend.tag.register('hexoGallery', function (args) {
gallery = '<div class="flex three demo">';
this.photos.forEach(function(photo, i){
gallery += '<div><img src="/imgs/spin.gif" class="lazy" data-src="';
gallery += photo.split(",")[0];
gallery += '"';
gallery += 'data-jslghtbx="';
gallery += photo.split(",")[1];
gallery += '" data-jslghtbx-group="gallery"';
gallery += '\>';
gallery += '</div>';
});
gallery += "</div>";
return gallery;
});
The photos array needs to look like this:
photos:
-
- /2009/11/fixing-banders-xbox-360/1-150x150.jpg
- /2009/11/fixing-banders-xbox-360/1.jpg
-
- /2009/11/fixing-banders-xbox-360/2-150x150.jpg
- /2009/11/fixing-banders-xbox-360/2.jpg
-
- /2009/11/fixing-banders-xbox-360/3-150x150.jpg
- /2009/11/fixing-banders-xbox-360/3.jpg
-
- /2009/11/fixing-banders-xbox-360/4-150x150.jpg
- /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
About Me
Dev gone Ops gone DevOps. Any views expressed on this blog are mine alone and do not necessarily reflect the views of my employer.
