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
Show Stats 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;
margin: 0 auto;
display: grid; /* Use grid for overlay */
position: relative; /* Add this to contain the description */
}
.progressive-image {
width: 100%;
@ -79,6 +80,20 @@ async function generateSite() {
.full-image.loaded {
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>
</head>
<body>
@ -96,9 +111,9 @@ async function generateSite() {
alt="${image.metadata.description || ''}"
onload="this.classList.add('loaded')"
>
${image.description ? `<p class="description">${image.description}</p>` : ''}
</div>
` : '<p>Image not available</p>'}
${image.description ? `<p class="description">${image.description}</p>` : ''}
<div class="navigation">
<a href="${prevFileName}">←</a>
<a href="${nextFileName}">→</a>