Nanfeng

Notes on software development, code, and curious ideas

Adding a Portable Photo Gallery to Hexo NexT

In
Build a theme-independent HTML photo gallery and embed it in a Hexo NexT page.

Rather than tightly coupling a gallery to one Hexo theme, this approach builds it as standalone HTML and embeds it in a normal page.

Create the page:

1
hexo new page photos

Add a menu entry in the theme configuration:

1
2
menu:
  photos: /photos/ || fa fa-camera

Embed the standalone gallery in source/photos/index.md:

1
<iframe style="max-width:100%" frameborder="0" width="100%" height="750" src="/net/photos/index.html"></iframe>

Place the gallery under the theme or site source directory, for example source/net/photos/. Its primary index.html links to individual album pages. Each album displays thumbnails and a modal:

1
2
3
4
5
6
7
8
<div class="gallery">
  <img src="photo.jpg" alt="Photo caption" class="thumbnail">
</div>
<div id="modal" class="modal">
  <span class="close">&times;</span>
  <img class="modal-content" id="modal-img">
  <div id="caption"></div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
document.addEventListener('DOMContentLoaded', () => {
  const modal = document.querySelector('#modal');
  const modalImg = document.querySelector('#modal-img');
  const caption = document.querySelector('#caption');

  document.querySelectorAll('.thumbnail').forEach(image => {
    image.addEventListener('click', () => {
      modal.style.display = 'block';
      modalImg.src = image.src;
      caption.textContent = image.alt;
    });
  });

  document.querySelector('.close').addEventListener('click', () => {
    modal.style.display = 'none';
  });
});

Use CSS grid or flexbox for covers and thumbnails, object-fit: cover for consistent cropping, and a fixed full-screen overlay for the modal. Because the gallery is standalone, it can be moved when the Hexo theme changes.

+