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

Enhance progressive image container styles in generateSite.js. Updated CSS to ensure responsive design with aspect ratio, added object-fit for images, and improved thumbnail opacity handling. This improves the visual presentation and loading behavior of images on the site.

Browse Source
This commit is contained in:
Knight 2024-12-28 11:14:35 -05:00
parent 3d845ee702
commit 840dc872df
1 changed files with 6 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
generateSite.js
View File

@ -54,7 +54,9 @@ async function generateSite() {
<style>
.progressive-image-container {
position: relative;
overflow: hidden;
width: 100%;
height: 100%;
aspect-ratio: 1; /* This will be adjusted based on the actual image */
}
.progressive-image {
position: absolute;
@ -62,11 +64,13 @@ async function generateSite() {
left: 0;
width: 100%;
height: 100%;
object-fit: contain;
transition: opacity 0.5s ease-in-out;
}
.thumbnail {
filter: blur(10px);
transform: scale(1.1);
opacity: 1;
}
.full-image {
opacity: 0;
@ -84,6 +88,7 @@ async function generateSite() {
class="progressive-image thumbnail"
src="${image.localPath}?quality=10&width=50"
alt="${image.metadata.description || ''}"
onload="this.parentElement.style.aspectRatio = this.naturalWidth + '/' + this.naturalHeight;"
>
<img
class="progressive-image full-image"