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