Minimalist Gallery Code Generator

To see a sample of what the gallery looks like, go here or visit my GitHub for further information. Scroll down to the bottom of this page for installation instructions.

Basic information

Your Name:

Webpage Title:

Your Homepage:
(will be linked in the footer at the bottom of the page "© Images belong to _")

Socials

Please tick or untick the socials you would like included on your page:

Instagram

Bluesky

Facebook

YouTube

TikTok

Image URLs & their captions

Please upload your files to an image host/your webserver first and then get the URLs to copy and paste into here. I recommend you do—at the very minimum—8 photos as at its widest resolution the grid accomodates 4 photos across—there is no maximum. Caption is optional.

Add another

Remove

Appearance

Rounded Corners? Yes No

Colour schemes. Leave blank if you wish to keep the default. Please start all hex colour codes with #.
Main colour scheme (default is light mode):
Primary colour (text colour):
Secondary colour (link hover colour):
Background colour:
Alternative colour scheme (default is dark mode):
Primary colour (text colour):
Secondary colour (link hover colour):
Background colour:

Submit

Output

The Goods

HTML CSS JS
If the HTML textarea box has not been generated with text, you may need to check your social media usernames or image URLs. The red text will alert you to which area is the issue.

Installation instructions

HTML: Okay, so! You want to copy and paste the HTML contents into a new file and save it as "index.html" (you can change index to whatever you want, I just suggest index since that's typically the default landing page webservers look for).

Next: CSS! Make another new file but this time copy and paste the CSS contents into it and save it as "style.css". Keep this file in the same folder as index.html and do not change this filename to something else unless you know what you're doing.

Lastly, JS. Make your final new file and copy and paste the JS contents into it. Save it as "script.js" in the same folder as index.html and style.css are in. Do not change this filename to something else unless you know what you're doing.

Voila! And there you have it! To preview your page, open "index.html" (or whatever you named it) in your web browser and you're good to go. Need further help? Email me.