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


comment: