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

Add description overlay to images in generateSite.js. Updated CSS to position a description text overlay on images, enhancing visual presentation and user engagement. This change improves the overall aesthetics and provides context for displayed images.

Browse Source
This commit is contained in:
Knight
2024-12-28 12:04:42 -05:00
parent 12beff5ded
commit 7d2b74001c
1 changed files with 16 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
generateSite.js
View File

@@ -58,6 +58,7 @@ async function generateSite() {
max-height: 100vh; max-height: 100vh;
margin: 0 auto; margin: 0 auto;
display: grid; /* Use grid for overlay */ display: grid; /* Use grid for overlay */
position: relative; /* Add this to contain the description */
} }
.progressive-image { .progressive-image {
width: 100%; width: 100%;
@@ -79,6 +80,20 @@ async function generateSite() {
.full-image.loaded { .full-image.loaded {
opacity: 1; opacity: 1;
} }
.description {
position: absolute;
bottom: 20px;
left: 20px;
max-width: 80%;
z-index: 2;
color: #cccccc;
opacity: 0.8;
mix-blend-mode: hard-light;
margin: 0;
font-size: 16px;
letter-spacing: 0.5px;
line-height: 1.4;
}
</style> </style>
</head> </head>
<body> <body>
@@ -96,9 +111,9 @@ async function generateSite() {
alt="${image.metadata.description || ''}" alt="${image.metadata.description || ''}"
onload="this.classList.add('loaded')" onload="this.classList.add('loaded')"
> >
${image.description ? `<p class="description">${image.description}</p>` : ''}
</div> </div>
` : '<p>Image not available</p>'} ` : '<p>Image not available</p>'}
${image.description ? `<p class="description">${image.description}</p>` : ''}
<div class="navigation"> <div class="navigation">
<a href="${prevFileName}">←</a> <a href="${prevFileName}">←</a>
<a href="${nextFileName}">→</a> <a href="${nextFileName}">→</a>