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

Refactor CSS and image processing in generateSite.js to enhance responsiveness and loading behavior. Updated styles for progressive image containers and thumbnails, ensuring proper aspect ratio and centering. Added image rotation during processing to maintain orientation. This improves visual presentation and user experience across the site.

Browse Source
This commit is contained in:
Knight
2024-12-28 11:52:12 -05:00
parent 3920a68c6e
commit 2611988636
1 changed files with 7 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
generateSite.js
View File

@@ -55,8 +55,9 @@ async function generateSite() {
.progressive-image-container { .progressive-image-container {
position: relative; position: relative;
width: 100%; width: 100%;
height: 100%; max-width: 100vw;
aspect-ratio: 1; height: auto;
margin: 0 auto;
} }
.progressive-image { .progressive-image {
position: absolute; position: absolute;
@@ -65,6 +66,7 @@ async function generateSite() {
width: 100%; width: 100%;
height: 100%; height: 100%;
object-fit: contain; object-fit: contain;
max-width: 100%;
transition: opacity 0.5s ease-in-out; transition: opacity 0.5s ease-in-out;
} }
.thumbnail { .thumbnail {
@@ -163,11 +165,13 @@ async function serveStaticSite(port = 3000) {
width: originalMetadata.width, width: originalMetadata.width,
height: originalMetadata.height, height: originalMetadata.height,
size: originalMetadata.size, size: originalMetadata.size,
format: originalMetadata.format format: originalMetadata.format,
orientation: originalMetadata.orientation
}); });
// Process the image // Process the image
const processedImage = await Sharp(filePath) const processedImage = await Sharp(filePath)
.rotate()
.resize({ .resize({
width: parseInt(width), width: parseInt(width),
height: parseInt(width), height: parseInt(width),