0

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.imgur.com/nrpZvYH.png

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

https://i.imgur.com/vEzA4vq.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.

1 Answer 1

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

9
  • 1
    And what about automatic generation with GitHub actions towardsdatascience.com/…
    – karlcow
    Apr 9, 2021 at 13:43
  • Oh wow, I thought for sure nobody would answer, but you not only answered, you provided code! That is super helpful, thank you! Is there a way to get this to auto-run whenever I activate the repo, then to make the README file for all internal folders?
    – Klokinator
    Apr 10, 2021 at 12:08
  • As @karlcow suggests, you can use a GitHub action to automate a refresh of the files every time you change something. I don't have the code for this, but the link above can help. Apr 10, 2021 at 20:52
  • Thanks! I appreciate your help! You really went above and beyond for a stranger :)
    – Klokinator
    Apr 11, 2021 at 10:50
  • That's the spirit of SO! 🙏 Apr 12, 2021 at 11:59

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.