I'm relatively new to all this. I want so be able to host some images on my raspberry pi on my local webserver instead of having to look through folders, but I am having trouble with pretty much everything regarding making the site.
My first goal is to just get images to properly display on the screen, which is what I am doing now with HTML, CSS and, Javascript. I would like to emulate the layout and responsiveness of Google Photos, but that's maybe a bit too ambitious.
I am using code from a bunch of different stackoverflow questions and other sites, but am having trouble.
I want to display a bunch of images, many of which have different aspect ratios, and resize them all down to 1:1 (edges can be cut off, as long as the majority of the images is mostly in frame). Then I would like them to resize with the screen, but I would also like to increase or decrease the amount of columns the images are displayed in depending on the screen size, although that is outside of the scope of this question.
Of course I would like to use as many relative values as possible, so it is more easily scalable.
First I tried this as just using <img> in divs, but then resizing was troublesome, so now I am trying background image in a div in a div (I still append an image which I hide because I want to be able to download the images from the page). Resizing seems to work now, but the aspect ratios on the images are all different and some images don't get resized to 1:1 at all. I have used the aspect-ratio CSS property, but that ends up ruining the layout and staggers all the images.
I would be happy to try and do this with Jquery, or any other JS framework, but I am not sure how to get JQuery into my project.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Imagehost</title>
</head>
<body>
<h1>My imagehost site</h1>
<nav>
<h2 class="hidden">Navigation</h2>
<a href="index.html">Home</a>
<a href="html/about.html">About</a>
</nav>
<main>
<div class="main-content">
<h2 class="hidden">Main content</h2>
<p>Here you can upload your images and share them with the world!</p>
<p>Click the button below to upload an image.</p>
<label for="files">Select multiple files</label>
<input id="files" type="file" multiple="multiple" accept="image/jpeg, image/png, image/jpg">
<script src="js/image_load.js"></script>
<div class="images-container">
<output id="result"></output>
</div>
</div>
</main>
</body>
</html>
Javascript
document.querySelector("#files").addEventListener("change", (e) => { // When the user selects a file
if (window.File && window.FileReader && window.FileList && window.Blob) { // Check if the browser supports the File API
const files = e.target.files; // Get the files from input
const output = document.querySelector("#result"); // Get the output element
output.innerHTML = ""; // Clear the output element
for (let i = 0; i < files.length; i++) { // Loop through the files
if (!files[i].type.match("image")) continue; // If not an image, skip to the next file
const picReader = new FileReader(); // Create a FileReader
picReader.addEventListener("load", function (event) { // Add an event listener to wait for the file to load
const picFile = event.target; // Get the file from the event
const div = document.createElement("div"); // Create a div element
div.className = "image-container"; // Add the class name
const div2 = document.createElement("div"); // Create a div element
div2.className = "imagediv"; // Add the class name
div.appendChild(div2); // Add the div to the div
div2.innerHTML = `<img class="image" src="${picFile.result}" title="${picFile.name}"/>`; // Add the image to the div
div2.style.backgroundImage = `url(${picFile.result})`; // Add the image to the div
output.appendChild(div); // Add the div to the output element
});
picReader.readAsDataURL(files[i]); // Read the file
}
} else {
alert("Your browser does not support File API");
}
});
CSS
#result {
border: 1px solid black;
width: 100%;
}
.image-container {
display: inline-block;
max-width: 30rem;
min-width: 5rem;
max-height: 30rem;
min-height: 5rem;
}
.image {
max-width: 100%;
max-height: 100%;
opacity: 0;
}
.imagediv {
max-width: 100%;
max-height: 100%;
background-position: 50% 50%;
background-repeat: no-repeat;
background-size: cover;
aspect-ratio: 1/1;
}
These are the images I use, although in the future I would like to be able to have all images from a folder on the server side load on the page automatically. (also outside of the scope of this question)
Sorry for the info dump
