I want to display images in a github repo for people to view

Question

I'm currently creating a repository for a fangame community. This repository will feature downloadable resources people can use for modding their games. These include portraits, animations, and other such things.

I am currently in the process of switching over to Github from Gdrive, since it doesn't suit my purposes anymore. This is my repository:

https://github.com/Klokinator/Fire-Emblem-Graphics-Repository

Just as one example, if you navigate to the Portrait Repository folder, you can see all sorts of user-created images people have submitted. However, due to github's limitations, you can only click them one at a time to see the images.

https://github.com/Klokinator/Fire-Emblem-Graphics-Repository/tree/main/Portrait%20Repository/FE10%20Mugs%20(Radiant%20Dawn)

Instead of seeing a list, like so:

https://i.sstatic.net/MastL.png

I would like people to actually see and be able to browse these images at a glance, like so:

https://i.sstatic.net/J1QuA.png

Is there a github browser extension or other tool that would make this possible? Certainly, power users can clone the repo and browse the images that way, but some people live in countries where downloading the images would take a lot of bandwidth, there might be other issues, etc. I would like to offer them any possible alternatives.

I already have a few extensions that I can link which will let people download single folders or files one by one, rather than downloading the entire repo. It's only viewing images that is causing me issues.

Answer 1

You could automate a process generating a README.md Markdown file in each folder, showing all images.

The Markdown file would be automatically shown by GitHub, but after the list of files of the current folder.

Here's an example Node.js script to generate this:

#!/usr/bin/env node

const fs = require('fs');
const path = require('path');

const ROOT_DIR = './Portrait Repository/FE10 Mugs (Radiant Dawn)/';
const README_FILENAME = 'README.md';
const NB_IMAGES_PER_LINE = 4;
let nbImages = 0;
let mdContent = '<table><tr>';

fs.readdirSync(ROOT_DIR).forEach((image) => {
  if (image !== README_FILENAME) {
    if (!(nbImages % NB_IMAGES_PER_LINE)) {
      if (nbImages > 0) {
        mdContent += `
</tr>`;
      }
      mdContent += `
<tr>`;
    }
    nbImages++;
    mdContent += `
<td valign="bottom">
<img src="./${image}" width="200"><br>
${image}
</td>
`;
  }
});
mdContent += `
</tr></table>`;

fs.writeFileSync(path.join(ROOT_DIR, README_FILENAME), mdContent);

And here's an example of what it produces: https://github.com/nhoizey/nicolas-hoizey.com/tree/main/src/assets/logos#readme