gallery.js alt text? - ☔︎ ∙ I need Help!

Okay, here's how I'd do it! (Very basic for now, but I'm happy to turn this into a page with a demo and everything if you want.)

Try it out

I've hacked-together a demo of what I think you want, at: https://dan-q.codeberg.page/buggle-gallery/. Go there, and:

1. Try using the "Artist" dropdown to filter to which artist made a particular picture. Note that if two artists are credits, it still shows up if you select one of them.
2. Try searching for a keyword in the box like "color", "animals", or "rain".
3. Try sorting by title or rating.
4. Note that the change happens instantly (no page refresh), but the address bar still gets updated (so you can share or link to pre-filtered/sorted lists)

Use it!

Full instructions on using it can be found here, but the important bit is:

1. Download this JS file and put it on your site; I'd suggest calling it 'buggle-gallery.js'.
2. Include it with a line like <script type="module" src="buggle-gallery.js"></script> (ideally in your <head>)
3. Add some basic CSS to lay it out nicely: here's a starter.
4. Add your gallery like this:

Code

<buggle-gallery>
  <form>
    <!-- if you want FILTERS, add a <form> with elements whose name="..." says what to filter on -->
    <label for="artist">Artist:</label>
    <select id="artist" name="artist">
      <option value="">All</option>
      <option value="Alice">Alice</option>
      <option value="Bob">Bob</option>
    </select>

    <!-- FILTERS can be any field type, including free text: -->
    <label for="subject">Subject:</label>
    <input type="text" id="subject" name="subject" placeholder="animals,colors,spiders,rain,philosophy...">

    <!-- if you want SORTING, add a <select name="sort"> whose <option value="..."> specifies the attribute to sort by -->
    <label for="sort">Sort by:</label>
    <select id="sort" name="sort">
      <option value="">Unsorted</option>
      <option value="title">Title (A-Z)</option>
      <!-- for reverse-sorting, use data-sort-direction="desc" -->
      <option value="title" data-sort-direction="desc">Title (Z-A)</option>
      <option value="artist">Artist</option>
      <!-- for numeric sorting, use data-sort-as="number" -->
      <option value="rating" data-sort-as="number" data-sort-direction="desc">Rating</option>
    </select>
  </form>

  <!-- you MUST have a <ul> or <ol> to list your gallery items (you can CSS style it to not look "like a list") -->
  <ul>

    <!-- each <li> has data-... attributes to show what it can be FILTERED or SORTED on -->
    <li data-artist="Alice" data-subject="colors" data-rating="5" data-title="Image One">
      <!-- if you're using <img>s, be sure to set loading="lazy" so you don't burn visitor bandwidth preloading all the hidden ones! -->
      <img loading="lazy" src="https://placehold.co/300x200/pink/blue?text=Image+One" alt="First image">
      <h3>Image One</h3>
      <p>Artist: Alice</p>
      <p>Pink and blue will never do. Maybe this one should have been yellow?</p>
    </li>

    <!-- a data-... attribute can have multiple values separated by commas: -->
    <li data-artist="Bob,Alice" data-subject="philosophy,colors" data-rating="2" data-title="Image Four">
      <img loading="lazy" src="https://placehold.co/300x200/orange/cyan?text=Image+Four" alt="Fourth image">
      <h3>Image Four</h3>
      <p>Artist: Bob</p>
      <p>This picture speaks to me of the fundamental nature of the universe. Or the orange bits, at least. One of my two least-favorite images.</p>
    </li>

    <!-- just keep adding items until your gallery's complete! -->
  </ul>
</buggle-gallery>

Hopefully that's useful to you (and maybe to others: I could turn it into something more-generic quite easily). Good luck!