knight/analogGallery
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Refactor CSS for progressive image handling in generateSite.js. Updated styles to utilize grid layout for image containers, ensuring better responsiveness and layering during loading. Removed fixed aspect ratio padding and adjusted image properties for improved visual presentation and loading transitions.

Browse Source
This commit is contained in:
Knight
2024-12-28 11:57:39 -05:00
parent 050af12746
commit 87604711e5
1 changed files with 3 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
generateSite.js
View File

@@ -53,20 +53,16 @@ async function generateSite() {
<link rel="icon" type="image/png" href="/favicon.png"> <link rel="icon" type="image/png" href="/favicon.png">
<style> <style>
.progressive-image-container { .progressive-image-container {
position: relative;
width: 100%; width: 100%;
max-width: 100vw; max-width: 100vw;
padding-bottom: 100%; /* Creates a 1:1 aspect ratio container */
margin: 0 auto; margin: 0 auto;
display: grid; /* Use grid for overlay */
} }
.progressive-image { .progressive-image {
position: absolute;
top: 0;
left: 0;
width: 100%; width: 100%;
height: 100%; height: auto;
object-fit: contain;
max-width: 100%; max-width: 100%;
grid-area: 1 / 1; /* Stack images in same grid cell */
transition: opacity 0.5s ease-in-out; transition: opacity 0.5s ease-in-out;
} }
.thumbnail { .thumbnail {
@@ -90,7 +86,6 @@ async function generateSite() {
class="progressive-image thumbnail" class="progressive-image thumbnail"
src="${image.localPath}?quality=10&width=100" src="${image.localPath}?quality=10&width=100"
alt="${image.metadata.description || ''}" alt="${image.metadata.description || ''}"
onload="this.parentElement.style.aspectRatio = this.naturalWidth + '/' + this.naturalHeight;"
> >
<img <img
class="progressive-image full-image" class="progressive-image full-image"