Website Gallery Template

I made a gallery template available for free on itch.io so artists can easily make their own gallery website. But what if you cannot access itch? This page is for you. This page is ALSO for anyone who needs a little bit more help in getting started with the gallery template they downloaded from itch.

What you will find on this page

This page breaks down step by step how to create your site and upload it to a hosting site such as neocities or netlify. I will use neocities as the main example as it is very accessible (and even lets you modify files in-browser!)

What you need before getting started

A computer and internet connection. Technically, you should have on your computer some built-in text editor of sorts (Notepad for Windows, Text for ChromeOS, TextEdit for MacOS) which you can use (NOT Word, LibreOffice Writer, Pages, Google Docs, etc.) If for some reason you do not have a text editor, options include Visual Studio Code or Sublime Text or Notepad++.

If you CAN download the template, great! You can skip anywhere you're instructed to make a new file or folder and can start following along with the comments in the files and editing some of the code. That said, I would recommend reading the Add Your Images and Add Your Images To Your Site Page sections provided here.

If you just want the basic template files, right click and save the HTML, the CSS, the blank GIF and the JavaScript files here. Make sure you put the GIF file inside of an images/ directory and don't forget to download and set up your icon files as shown here.

Building Your Gallery Site: From the Ground Up

Images and Assets

On your computer, create a new folder and name it WEBSITE. Inside of this folder is where all the files for your website will live. When you're ready to launch your site, we will upload all the files and subfolders within this folder to your host.

Inside of your WEBSITE folder, create two new folders and name them images and assets.

Linked here is a blank GIF which will be used in this website. Right click the link and save-as. You will save this inside of your images folder within WEBSITE.

By now, your directory structure (that is, what is inside your WEBSITE folder) should look like this:

        assets/
        images/
            blank.gif

Add Your Images

Whatever images you want to add to your site, you should copy and paste into your WEBSITE folder's images folder. For example, if you have a JPEG called yourimage.jpeg, you will copy and paste that file from wherever it is on your machine currently to your images subfolder within your WEBSITE folder. You will do this for every image. Make sure your images are named something that makes sense for ease of use.

For your ease of use, do NOT put your images in sub folders: just throw your images all in the images folder. Note: If you're hosting on neocities or another site with limited space/bandwidth, I recommend you resize your images for web. Get them as small as you can without too much loss of quality. This isn't twitter: no 5 or 8 or 10MB file sizes here.

By now, your directory structure should look like this:

        assets/
        images/
            blank.gif
            yourimage.jpeg
            yourimage2.jpeg

Add Some Icons

To make sure you have the appropriate icons, go to FontAwesome and download version 6's Free For Web. Unzip the ZIP file. Within your newly extracted folder, look for the CSS folder. In the CSS folder, find the following 2 files and move them to your website's assets folder: brands.css and fontawesome.min.css. Now look for the webfonts folder and find the following 2 files and move them to your website's assets folder: fa-brands-400.ttf and fa-brands-400.woff2

By now, your directory structure should look like this:

        assets/
            brands.css
            fa-brands-400.ttf
            fa-brands-400.woff2
            fontawesome.min.css
        images/
            blank.gif
            yourimage.jpeg
            yourimage2.jpeg

Your First Web Page

Now inside of your WEBSITE folder, create a new file and name it index.html. Make sure .html is the file extension. If you're on Windows, I would recommend you open your text editor of choice (Notepad included) and create your file there, as Windows by default turns off file extension visibility. For Notepad Users: If you're in Notepad, simply go to File > Save As and then in the Save As window, select All files under "Save as Type" dropdown. Then in your filename, write index.html, then click Save.

Your directory structure should now look like this:

        assets/
            brands.css
            fa-brands-400.ttf
            fa-brands-400.woff2
            fontawesome.min.css
        images/
            blank.gif
            yourimage.jpeg
            yourimage2.jpeg
        index.html

Copy everything in the below blue section from <!DOCTYPE html> all the way to </html> and paste it in your index.html file. Save the file.

Don't want to make the file yourself? Right click here and select "save as" to download the index.html for the template and be sure to save it in your WEBSITE folder.

<!DOCTYPE html>

<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="author" content="Your Name"> <!-- EDIT ME! change "Your Name" to your name/username/author name for SEO purposes-->
  <meta name="description" content="Describe your website here for SEO purposes!"> <!-- EDIT ME! only write within the quotations where it says "Describe...purposes!"-->

  <!--stylesheet-->
  <link rel="stylesheet" type="text/css" href="styles.css">
  <!--FONT FILES FOR ICON DO NOT TOUCH-->
  <link href="assets/brands.css" rel="stylesheet">
  <link href="assets/fontawesome.min.css" rel="stylesheet">

<!-- EDIT ME! Change "My Site" below to whatever you're site is!-->
  <title>My Site</title> 
<!-- EDIT ME! PUT THE LINK TO THE ICON THAT WILL SHOW UP IN YOUR BROWSER TAB BELOW -->
  <link rel="icon" type="image/x-icon" href="images/favicon.png">
</head>
<body>
  <nav> <!--Within the NAV tags, your links will live as list items within an unordered list-->
    <ul>
<!-- ***** TOP NAV BAR LINKS: Below is your navigation links!-->
        <li><a href="#about">About Me</a></li><!-- EDIT ME! Links on page DO NOT TOUCH the #about within "" but you can change the words About Me between the a tags to About, Info, etc-->
        <li><a href="#gallery">Gallery</a></li><!-- EDIT ME! Links on page DO NOT TOUCH the #gallery within "" but you can change the word Gallery between the a tags to Art, Works, etc-->
        <li><a href="#links">Links</a></li><!-- EDIT ME! Links on page DO NOT TOUCH the #links within "" but you can change the word Links between the a tags to Socials, Elsewhere, etc-->
    </ul>
  </nav>
  <main>
    <div id="gallery">
      <noscript>This site requires JavaScript to work properly. Please enable JavaScript or the gallery will not load.</noscript>
        <div id="hideshow"> <!--everything within this div is hidden by default: we use javascript to show it-->
            <img id="featureimg" src="images/blank.gif"> <!--do not modify the GIF in here-->
            <h3 id="imgtitle"></h3>
            <p id="imgdesc"></p>
        </div> <!-- end #hideshow div-->
        <div id="galleryItems">

<!-- ADD IMAGES HERE YOU WILL ADD ALL IMAGES BETWEEN THIS COMMENT LINE AND THE CAP COMMENT LINE-->
            <!-- EDIT ME! ALL IMAGES MUST BE STORED IN THE FOLDER LABELED IMAGES
            You will type the RELATIVE PATH to each image you want to put in your gallery. This means that after every src= in the "" you will type images/your-image-name-here.filetype
            
            What you type must match the image you've uploaded into your images folder. You will need the images/ in the quotes: e.g. src="images/myimage.png"

            Then you should type a title for your image in the "" following title= e.g. title="My Image"

            If you want a description, type it in the "" following data-desc, OTHERWISE MAKE SURE YOU HAVE "" in the data-desc e.g. data-desc="This is a PNG of my image! This description will show up when you click me!"

            If you're good about accessibility, you should add alt="alternative text".

            IF YOU WANT TO SECTION OFF YOUR GALLERIES with a little heading, then inbetween the image of the LAST grouping and the image of hte FIRST grouping, write <h2>Whatever You're Calling This Area</h2>. It has already been styled for you.
            -->
            <img src="images/blank.gif" title="Blank Gif" data-desc="I am a description! You can use me to write a longer description or comment about your piece. Think like a tweet!" class="clickablepic" alt="a green gradient"> <!-- EDIT ME!  If you need more images, just copy everything from the first <img all the way to the closing > (or to the end of this line!)-->
           
          
<!-- DON'T ADD ANY IMAGES BEYOND THIS LINE!!!!--->   
        </div> <!--end small galleryItems image listing-->
      </div>
  </main>
  <footer>
    <section id="about">
        <h1>About Me</h1> <!-- EDIT ME! -->
        <!-- Whatever you want to write about yourself, put below!-->
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vitae enim ornare, venenatis sapien vitae, varius nibh. Donec nec magna eu metus ultrices tempor. Proin sed leo nibh. Ut sit amet blandit arcu, a consectetur magna. Interdum et malesuada fames ac ante ipsum primis in faucibus. Proin ut imperdiet nulla. Maecenas finibus purus et pretium ultricies. Nullam ut lorem a metus volutpat tempor non at velit. Aliquam id odio nec nisl imperdiet ultricies id at nulla. Maecenas iaculis nisi et risus lacinia, aliquam feugiat turpis cursus. Sed turpis mauris, dictum vel metus quis, accumsan malesuada risus. Vivamus eu diam id lacus pharetra aliquam at sit amet orci. Etiam magna justo, condimentum auctor porttitor vitae, venenatis vitae mauris. Praesent auctor eros dictum nunc pulvinar, eget porttitor neque dignissim. Quisque vulputate sagittis elit mattis luctus.</p> <!-- EDIT ME! If you want more paragraphs, wrap the sentences within <p></p> e.g. <p>Hello! I am a new paragraph!</p> -->
    </section>
    <section id="links">
        <h2>Links and Social Media</h2>
        <!-- EDIT ME! On the "" after each href= you should replace the # with the URL to your appropriate social media page. If you don't have one or don't want it, delete the entire line from opening <a> to closing </a> -->
        <a href="#"><i class="fa-brands fa-twitter"></i></a> <!-- EDIT ME! -->
        <a href="#"><i class="fa-brands fa-instagram"></i></a> <!-- EDIT ME! -->
        <a href="#"><i class="fa-brands fa-tumblr"></i></a> <!-- EDIT ME! -->
        <a href="#"><i class="fa-brands fa-facebook"></i></a> <!-- EDIT ME! -->
        <a href="#"><i class="fa-brands fa-tiktok"></i></a> <!-- EDIT ME! -->
        <a href="#"><i class="fa-brands fa-twitch"></i></a> <!-- EDIT ME! -->
       
        <!-- any other social media links you want an icon for, go to https://fontawesome.com/search?o=a&f=brands and click on the icon, then copy the i class code they give -- the set up files already have the brand fontawesome icons in the asset folder. You'll type <a href="your url here"> and then COPY the i class code from the website followed by </a>
        
        You can also include any of the free solid icons: https://fontawesome.com/search?o=r&m=free just do same as above
        -->

    <!-- OTHER EXTERNAL LINKS -->
        <!-- If you want to add any external links, you put the URL (http://blahblahblah...) in the "" following href= and where it says External Link 1 between the a tags, you put whatever text you want to show up -- e.g. <a href="https://www.google.com">Google Search</a> will show up as Google Search on your webpage. Put as many as you like.-->
        <h3>Other Websites</h3> <!-- EDIT ME! Call this section whatever you want OR get rid of it by deleting this whole line. -->
        <ul>
            <li><a href="#">External Link 1</a></li> <!-- EDIT ME! -->
            <li><a href="#">External Link 2</a></li> <!-- EDIT ME! -->
            <!--if you want more pages to your website you could also make them here or make another section or something. This site it bare bones and geared more towards Basic Artist Gallery Functionality. If you do not want this part, delete from <ul> to </ul> -->
        </ul>
<!-- Don't Type or Delete Beyond This Point!-->
    </section>
  </footer>
  <script src="script.js"></script> <!-- Don't touch! -->
</body>
</html>

Add Your Images To Your Site Page

In your index.html, do you see a line that looks like this? <img src="images/blank.gif" title="Blank Gif" data-desc="I am a description! You can use me to write a longer description or comment about your piece. Think like a tweet!" class="clickablepic" alt="a green gradient">

For each of your images, you will need to make sure there is a corresponding img tag with a src that points to your file inside of images/. What that looks like in practice is this:

    <img src="images/yourimage.jpeg" title="Your Image" data-desc="This is your image!" class="clickablepic" alt="an image">
    <img src="images/yourimage2.jpeg" title="Your Second Image" data-desc="I am a description! You can use me to write a longer description or comment about your piece. Think like a tweet!" class="clickablepic" alt="alt text yay">

Simply copy and paste the img tag and change the filename to whatever your file is called. You can add a title by changing what is in the quotation marks after title and a description by changing what is in the quotation marks after data-desc (or leave them empty!)

Make sure at the very least you have both a class=clickablepic so the JavaScript will work to display a larger version of the gallery and a src value pointing to the file in your images folder. What you type must match the image file you uploaded. This src points to a relative path to your image, which is why you need to include the images/ before your filename.

Once the file is saved, you should be able to view it in your default browser by navigating to the index.html file on your computer and double clicking it. It probably looks a little bare, so now we need to add our CSS file!

Make It Look Nice

Similar to above, inside of your WEBSITE folder, create a new file and name it styles.css. This will be your stylesheet. Make sure .css is the file extension.

Your directory structure should now look like this:

        assets/
            brands.css
            fa-brands-400.ttf
            fa-brands-400.woff2
            fontawesome.min.css
        images/
            blank.gif
            yourimage.jpeg
            yourimage2.jpeg
        index.html
        styles.css

Copy everything in the below blue section from /*DO YOU WANT... all the way to }} and paste it in your styles.css file. Save the file.

Don't want to make the file yourself? Right click here and select "save as" to download the stylesheet for the template and be sure to save it in your WEBSITE folder.

/* DO YOU WANT TO EDIT THE COLORS?

THEN HIT CTRL+F (CMD+F ON MACS) OR WHATEVER KEYBINDING YOU HAVE TO OPEN YOUR FIND TOOL! THEN, TYPE THE BELOW:

EDIT ME!

ALL EDITABLE COLORS SHOULD LIGHT UP AND YOU CAN SEE WHAT YOU CAN CHANGE WITH HEX VALUES OR WEB-SAFE COLOR NAMES!

*/

* {
    margin: 0;
    padding: 0;
    border: 0;
    box-sizing: border-box;
}

body {
    background-color:#363636; /* EDIT ME! CHanges bg color of entire page */
    color: lightgrey; /* EDIT ME! Changes text color of entire page */
    font-family: Arial, Helvetica, sans-serif;
}

nav {
    background-color: #272727; /* EDIT ME! */
    text-align: center;
    width: 100%;
    position: sticky;
    top: 0;
}

nav ul li {
    list-style: none;
    display: inline-block;
    padding: 0.75rem 0.5rem;
    margin: 0;
}

a {
    color: lightcoral; /* EDIT ME! - colors the links in your page NOT in your nav or footer, assuming any are there*/
    text-decoration: none; /* get rid of this entire line if you want all links to have an underline*/
}

nav a {
    color: lightcoral; /* EDIT ME! - colors the links in your navbar*/
    text-decoration: none;
    margin: 0;
    font-size: 1.25em;
}

main {
    padding: 4rem;
    min-height: 80vh; /* EDIT ME if and ONLY if you don't have a lot in your about me -- you may need to up this to 90vh */
}

#gallery{
    max-width: 90vw;
    margin: 0 auto;
    text-align: center;
}

#gallery p, #gallery h3, #gallery h2 {
    margin: 1.25rem auto;
}

#hideshow{
   display:none; 
}

#featureimg {
    max-width: 100%;
}

/* changing the WIDTH and HEIGHT in the below will change how big your galelry item thumbnails appear. NOTE - due to styling, the 120 width has minus 10 pixels on either side due to margin; same to height.*/
#galleryItems img {
    width: 120px;
    height: 120px;
    object-fit: cover;
    cursor: pointer;
    margin: 10px;
    border: 3px #f5f5f5 solid; /* EDIT ME - color of the border around each gallery image */
}

footer {
    width: 100%;
    background-color: #272727; /* EDIT ME! - background color of the footer (aka where your About Me and social links are!) */
    padding: 2rem 4rem;
    margin: 0 auto;
    color: lightgray; /* EDIT ME! - font color of the text within the footer */
}

footer ul li {
    list-style: none;
    display: inline-block;
}

#about * {
    padding: 0.25rem;
}

#links h2, #links h3 {
    padding: 1rem 0;
}

#links a {
    padding-right: 1rem;
    color: lightcoral; /* EDIT ME! - colors the links in your link area of the footer */
    text-decoration: none;
}

i {
    font-size: xx-large;
}

a:hover {
    color:#f5f5f5; /* EDIT ME! - will change the hover on all links within the body*/
}

nav a:hover {
    color:#f5f5f5; /* EDIT ME! - will change the hover on all links within the nav*/
}

#links a:hover {
    color:#f5f5f5; /* EDIT ME! - will change the hover on all links within the section with an id of links */
}

/* For large horizontal viewports, to reign in that gallery... */

@media screen and (min-width: 768px) 
{
    #gallery {
        max-width: 75vw;
    }

    #gallery p {
        max-width: 60%;
    }

    footer section {
       max-width: 75vw;
       margin: 0 auto;
    }
}

Once the file is saved, you should be able to view it in your default browser by navigating to the index.html file on your computer and double clicking it. You should now see a number of colors, formatting fixes, and social media icons showing up. You can now start editing some of the colors to fit your vibe by opening up your styles.css file in your text editor and following the comments (that is, what is written /* in between these symbols */)

Add Interactivity

Third time's the charm! Similar to above, inside of your WEBSITE folder, create a new file and name it script.js. This will be your JavaScript code. Make sure .js is the file extension.

Your directory structure should now look like this:

        assets/
            brands.css
            fa-brands-400.ttf
            fa-brands-400.woff2
            fontawesome.min.css
        images/
            blank.gif
            yourimage.jpeg
            yourimage2.jpeg
        index.html
        script.js
        styles.css

Copy everything in the below blue section from const featImg all the way to }} and paste it in your script.js file. Save the file.

Don't want to make the file yourself? Right click here and select "save as" to download the JavaScript file for the template and be sure to save it in your WEBSITE folder.

const featImg = document.getElementById('featureimg');
const imgTitle = document.getElementById('imgtitle');
const imgDesc = document.getElementById('imgdesc');
const hideShow = document.getElementById('hideshow');

//select nodelist of elements with classes bc all my gallery images will have a class of clickablepic

const clickPic = document.querySelectorAll('.clickablepic'); //creates a nodelist

for(let i=0; i < clickPic.length; i++){
    clickPic[i].addEventListener('click', changePic);
}

//fxn to click and change the title and description
function changePic(e) {
    //test if class isa pic type else make it blank (Default)
    if (e.target.className === 'clickablepic'){
        featImg.src = e.target.src; 
        imgTitle.innerText = e.target.title;
        imgDesc.innerText = e.target.dataset.desc;
        featImg.style.border="3px white solid";
        hideShow.style.display="block";
    } else {
        featImg.src = "images/blank.gif"
        imgTitle.innerText = "";
        imgDesc.innerText = "";
        featImg.style.border="none";
    }
}

Once the file is saved, you should be able to view it in your default browser by navigating to the index.html file on your computer and double clicking it. You should now be able to click on your small image thumbnails and see them pop up along with their title and description.

Editing Your Site Content

In both the index.html file and the styles.css file, you will see a number of comments. If you press CTRL+F on Windows/Linux or CMD+F on MacOS, you should be prompted with the FIND or FIND/REPLACE function of your text editor/the in-browser editor. In the FIND prompt box, type in EDIT ME! which will bring you to all instances of editable content. In your styles.css file, the editable content is basically for the colors.

In your index.html file, the editable content is one of the below:

Don't worry if it seems like a lot -- just know your edits will either be inside quotations or between opening and closing HTML tags.

Publishing Your Site

Now that you got all your images added, files situated, and maybe even done some editing, it's time to go live! What you do exactly will depend on your host (i.e. the site whose server your website will live on -- similar to bsky, tumblr, twitter being the host for your accounts), but many hosts have an easy drag-and-drop method of uploading files. That said, different hosts have different methods of upload. Netlify, for example, wants you to take your entire site folder -- that is, the folder you made at the beginning called WEBSITE -- and upload it. Neocities wants you to upload whatever is INSIDE your WEBSITE folder -- that is, your index.html file, styles.css file, script.js file, images/ directory and assets/ directory.

There are many hosts out there with varying idiosyncracies and costs. Neocities is currently free and you get a subdomain (i.e. an address on their address, almost like an apartment or office in their building). Something you CAN do is buy your own domain name (i.e. your own address) through a domain registrar for like $12 USD a year and redirect the domain to your neocities site (if you're a paid supporter of neocities, you can actually use your domain name there as opposed to redirect it, but that's beyond the scope of this article.) That way, if you ever change your host, you can point your domain name elsewhere.