Shami's Blog

Sysadmin, Because Even Developers Need Heroes

Hexo Photo Gallery

2016-09-27 by Mohammad H. Al-Shami

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">';, 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:

    - /2009/11/fixing-banders-xbox-3601-150x150.jpg
    - /2009/11/fixing-banders-xbox-3601.jpg
    - /2009/11/fixing-banders-xbox-3602-150x150.jpg
    - /2009/11/fixing-banders-xbox-3602.jpg
    - /2009/11/fixing-banders-xbox-3603-150x150.jpg
    - /2009/11/fixing-banders-xbox-3603.jpg
    - /2009/11/fixing-banders-xbox-3604-150x150.jpg
    - /2009/11/fixing-banders-xbox-3604.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