Creating a gallery
Welcome to my simple guide on how to create a gallery page!
Our gallery will be composed with a JavaScript code, and information about each piece will be written on a XML document.
But first we'll need a basic webpage to display our gallery!
Basic gallery HTML page
To create a gallery, we start with a simple HTML page as our foundation.
This page will include a container for the gallery images and a script to append images to the container
Here's a little example to get you started:
<![CDATA[
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Gallery page</title>
</head>
<body>
<h1>Welcome to my gallery!</h1>
<div class="gallery"></div> <!-- container where all images will be placed -->
<script src="scripts/gallery.js"></script> <!-- gallery script, CHANGE FILE PATH AS NEEDED -->
</body>
</html>
]]>
Gallery building script
Your gallery needs a script to fetch image data and display it. Below is an example script that uses an XML file to define your gallery items. Let's break it down:
<![CDATA[
document.addEventListener("DOMContentLoaded", function () {
const xmlFilePath = "resources/gallery.xml"; // specifies the path to the XML file containing gallery data, CHANGE FILE PATH AS NEEDED
const documentContainer = document.querySelector(".gallery"); // selects the HTML element with the class "gallery", where gallery items will be shown
// sends a request to fetch the XML file
fetch(xmlFilePath)
.then(response => {
// throws an error if it fails to load the xml file. if you see it, verify your file path on 'xmlFilePath'
if (!response.ok) {
throw new Error("Failed to load gallery xml! Check xmlFilePath!!");
}
return response.text();
})
.then(xmlText => {
// creates an instance of DOMParser to parse the XML string into a DOM (Document Object Model) object
const parser = new DOMParser();
const xmlDoc = parser.parseFromString(xmlText, "application/xml");
// retrieves all <art> elements from the parsed XML document
const arts = xmlDoc.getElementsByTagName("art");
// converts the <art> elements into an array and iterates over each one.
Array.from(arts).forEach(art => {
const title = art.querySelector("title").textContent; // Extracts the text content of the <title> element.
const releasedate = art.querySelector("release-date").textContent; // Extracts the text content of the <release-date> element.
const isNSFW = art.querySelector("nsfw").textContent === "true"; // Checks if the <nsfw> element has the value "true".
const url = art.querySelector("url").textContent; // Extracts the text content of the <url> element.
// creates an image (<img>) element and sets its attributes.
const img = document.createElement("img");
img.src = url; // sets the image source to the URL from the XML
img.alt = title; // sets the alt text to the title
img.title = title + "\n" + releasedate; // combines title and release date as the tooltip text
img.className = isNSFW ? "nsfw" : ""; // adds a CSS class if the image is marked as NSFW, change as needed
// creates a hyperlink (<a>) element to wrap the <img> element
const link = document.createElement("a");
link.href = url; // sets the hyperlink to the image URL
link.appendChild(img); // appends the <img> element inside the <a> element
// appends the <a> element (with the image) to the gallery container
documentContainer.appendChild(link);
});
})
.catch(error => {
// logs an error message if the XML file couldn't be processed.
console.error("Failed to process gallery.xml!:", error);
});
});
]]>
This script dynamically creates a gallery based on your XML data.
You can mostly leave the script as is. The only things that might be important are on the first lines: the value of 'xmlFilePath' and 'documentContainer'.
Now the only thing left is the XML document with information about your pieces!
Gallery info XML example
This is an example code of your gallery, change the values from the tags title, release-date, nsfw and url as needed, you can repeat the art tag as many times as you want
<![CDATA[
<gallery>
<art>
<title>My seccond piece</title> <!-- Title of the art, can be any string, will be shown as alt text and image tooltip -->
<release-date>3/1/2025</release-date> <!-- Date of creation, can be any string -->
<nsfw>true</nsfw> <!-- "Is NSFW" switch, use 'true' or 'false', pieces marked as 'true' will be shown with 'class="nsfw"' -->
<url>resources/drawings/seccond.png</url> <!-- File path to reach image, starting from the root directory -->
</art>
<art>
<title>A drawing my friend made!</title>
<release-date>2/1/2025</release-date>
<nsfw>false</nsfw>
<url>https://friend-website.com/art/12.png</url> <!-- File path can be also a link from another website. Make sure you have rights to use this image! -->
</art>
<art>
<title>My first piece</title>
<release-date>1/1/2025</release-date>
<nsfw>false</nsfw>
<url>resources/drawings/first.png</url>
</art>
</gallery>
]]>
It's recommended that you place your latest pieces by the top of the list, to keep everything in a chronological form.
When finished, your page will look something like my gallery page