PTS/SkyArtShop
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Fix: Portfolio page layout and image loading - use featuredimage field

Browse Source
This commit is contained in:
Local Server
2026-01-14 07:33:38 -06:00
parent 0f20c3df7d
commit 80b80329bc
1 changed files with 15 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
website/public/portfolio.html
View File

@@ -325,8 +325,9 @@
// Safe template with validated data // Safe template with validated data
modalContent.innerHTML = ` modalContent.innerHTML = `
<div class="project-image" style="width: 100%; height: 450px; overflow: hidden; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); flex-shrink: 0;"> <div class="project-image" style="width: 100%; height: 450px; overflow: hidden; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); flex-shrink: 0;">
<img src="${project.imageurl || "/assets/images/placeholder.svg"}" <img src="${project.featuredimage || project.imageurl || "/assets/images/placeholder.svg"}"
alt="${project.title}" alt="${project.title}"
onerror="this.src='/assets/images/placeholder.svg'"
style="width: 100%; height: 100%; object-fit: cover;" /> style="width: 100%; height: 100%; object-fit: cover;" />
</div> </div>
<div style="padding: 40px; background: white;"> <div style="padding: 40px; background: white;">
@@ -341,7 +342,9 @@
<div style="color: #555; font-size: 17px; line-height: 1.9; margin-bottom: 32px; font-weight: 400;"> <div style="color: #555; font-size: 17px; line-height: 1.9; margin-bottom: 32px; font-weight: 400;">
${project.description || "No description available."} ${project.description || "No description available."}
</div> </div>
<div style="padding-top: 24px; border-top: 2px solid #f0f0f0; color: #888; font-size: 15px; display: flex; align-items: center; gap: 8px;"> ${
project.createdat
? `<div style="padding-top: 24px; border-top: 2px solid #f0f0f0; color: #888; font-size: 15px; display: flex; align-items: center; gap: 8px;">
<i class="bi bi-calendar3" style="font-size: 18px;"></i> <i class="bi bi-calendar3" style="font-size: 18px;"></i>
<span style="font-weight: 500;">Created on ${new Date( <span style="font-weight: 500;">Created on ${new Date(
project.createdat project.createdat
@@ -350,7 +353,9 @@
month: "long", month: "long",
day: "numeric", day: "numeric",
})}</span> })}</span>
</div> </div>`
: ""
}
</div> </div>
`; `;
modal.style.display = "block"; modal.style.display = "block";
@@ -416,11 +421,12 @@
}')" style="background: white; border-radius: 12px; overflow: hidden; box-shadow: 0 2px 8px rgba(0,0,0,0.1); transition: all 0.3s; cursor: pointer;"> }')" style="background: white; border-radius: 12px; overflow: hidden; box-shadow: 0 2px 8px rgba(0,0,0,0.1); transition: all 0.3s; cursor: pointer;">
<div class="product-image" style="position: relative; padding-top: 100%; overflow: hidden; background: #f5f5f5;"> <div class="product-image" style="position: relative; padding-top: 100%; overflow: hidden; background: #f5f5f5;">
<img src="${ <img src="${
project.imageurl || "/assets/images/placeholder.svg" project.featuredimage || project.imageurl || "/assets/images/placeholder.svg"
}" }"
alt="${project.title}" alt="${project.title}"
style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s;" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s;"
loading="lazy" loading="lazy"
onerror="this.src='/assets/images/placeholder.svg'"
onmouseover="this.style.transform='scale(1.05)'" onmouseover="this.style.transform='scale(1.05)'"
onmouseout="this.style.transform='scale(1)'" /> onmouseout="this.style.transform='scale(1)'" />
${ ${
@@ -433,6 +439,11 @@
<h3 style="font-size: 18px; font-weight: 600; margin: 0; color: #333;">${ <h3 style="font-size: 18px; font-weight: 600; margin: 0; color: #333;">${
project.title project.title
}</h3> }</h3>
${
project.description && project.description.replace(/<[^>]*>/g, '').trim()
? `<p style="font-size: 14px; color: #666; margin: 8px 0 0 0; line-height: 1.5;">${project.description.replace(/<[^>]*>/g, '').substring(0, 80)}${project.description.length > 80 ? '...' : ''}</p>`
: ""
}
</div> </div>
</div> </div>
` `