Plan to Fix Duplicate Categories and Refactor Gallery

This plan outlines the steps to resolve the duplicate category issue and refactor the gallery page.

Part 1: Fix Duplicate Categories (Completed)

  • Status: Done.
  • Summary: Created .custom versions of _includes/posts-taxonomy.html and _layouts/categories.html, and updated categories.md to use the new layout. This ensures the category list is generated from a unique, sorted list of categories.

Part 2: Refactor the Gallery Page

1. Analysis and Strategy

  • Issue: The current gallery at /gallery/ is described as “extremely bad”. The user wants a responsive, Pinterest-like waterfall layout with a feature-rich lightbox (including image descriptions and download/like buttons).
  • Current State: The page uses Masonry.js combined with a significant amount of custom JavaScript for loading logic and a basic lightbox. This solution is complex and lacks the desired features.
  • Strategy: Replace the custom implementation with lightGallery.js, a powerful all-in-one library that provides both a masonry grid layout (via a plugin) and a highly customizable lightbox with features like zoom, thumbnails, and download buttons. This will result in a more robust, feature-rich, and easier-to-maintain solution.

2. Detailed Implementation Plan

Step 2.1: Clean Up Existing Implementation

  • File: _layouts/gallery.html
    • Action: Remove the <script> tag for masonry.pkgd.min.js.
    • Action: Remove the custom lightbox HTML (<div class="gallery-lightbox" ...>).
  • File: assets/js/gallery.js
    • Action: Delete the entire content of this file, as all its logic will be replaced.
  • File: _sass/minimal-mistakes/_gallery.scss
    • Action: Remove the styles related to the custom lightbox (.gallery-lightbox, .lightbox-overlay, etc.). The grid styles can be partially reused.

Step 2.2: Enhance Data Structure

  • File: _data/gallery.yml
    • Action: Propose and document a slightly extended data structure to support new lightbox features. The new structure will include fields for a detailed description and a download link.
    • Example New Entry: ```yaml
      • url: /assets/images/gallery/thumb.jpg full_url: /assets/images/gallery/full.jpg alt: “Image Alt Text” caption: “Short Caption” description: “This is a longer, more detailed description for the lightbox.” download_url: /assets/images/gallery/full.jpg ```
  • File: _layouts/gallery.html
    • Action: Since this file has the ‘gallery’ keyword, I will modify it directly.
    • Action: Add the CDN links for lightGallery.js CSS, JS, and required plugins (like masonry, zoom, thumbnails, download) in the <head> or at the bottom of the file.
    • Action: Rewrite the for loop to generate the HTML structure required by lightGallery. This involves wrapping each image in an <a> tag and using data- attributes for the full image URL and the description.

Step 2.4: Implement JavaScript Initialization

  • File: assets/js/gallery.custom.js (New File)
    • Action: Create this new file.
    • Action: Write the JavaScript code to initialize lightGallery on the gallery container. This will include enabling the masonry, zoom, thumbnails, and download plugins.
  • File: _layouts/gallery.html
    • Action: Add a <script> tag to load the new assets/js/gallery.custom.js.
  • File: _sass/minimal-mistakes/_gallery.scss
    • Action: Modify the existing styles to work with the new lightGallery structure. Ensure the gallery is responsive and visually appealing, matching the “Pinterest-like” aesthetic. The file name contains “gallery”, so I can modify it directly.

3. Verification

  • Action: After implementing the changes, run bundle exec jekyll serve and check the /gallery/ page.
  • Expected Outcome:
    • The gallery displays as a responsive, waterfall grid.
    • Clicking an image opens a modern lightbox.
    • The lightbox displays the image, a detailed description, thumbnails for navigation, and a download button.
    • The gallery is easy to update by simply adding new entries to _data/gallery.yml.