feat: display only one main poster per film under the title, remove image from sources

This commit is contained in:
SansGuidon 2025-05-25 01:15:43 +02:00
parent 41a4ea5837
commit 36e52afc93

View File

@ -40,7 +40,6 @@
</div> </div>
<div id="films"></div> <div id="films"></div>
</div> </div>
<script> <script>
// Age color logic // Age color logic
function getAgeColor(age) { function getAgeColor(age) {
@ -111,16 +110,24 @@
<tbody>`; <tbody>`;
films.forEach(film => { films.forEach(film => {
// Get first non-empty image from sources
const allImgs = film.results.map(r => r.img).filter(Boolean);
const mainImg = allImgs.length ? allImgs[0] : null;
html += `<tr> html += `<tr>
<td>${film.title || 'Unknown title'}</td> <td style="vertical-align:top;">
<td class="year">${film.year || 'N/A'}</td> <div style="text-align:center;">
<div style="font-weight:bold;margin-bottom:0.7em;">${film.title || 'Unknown title'}</div>
${mainImg ? `<img src="${mainImg}" alt="Poster for ${film.title}" style="display:block;margin:auto;max-width:100px;max-height:150px;border-radius:5px;box-shadow:0 2px 8px #0003;margin-bottom:10px;">` : ''}
</div>
</td>
<td class="year" style="vertical-align:top;">${film.year || 'N/A'}</td>
<td>`; <td>`;
film.results.forEach(r => { film.results.forEach(r => {
html += `<div class="source-block">`; html += `<div class="source-block">`;
html += `<p class="source-name">${r.source.charAt(0).toUpperCase() + r.source.slice(1)}</p>`; html += `<p class="source-name">${r.source.charAt(0).toUpperCase() + r.source.slice(1)}</p>`;
if (r.img) { // (No image here anymore)
html += `<img src="${r.img}" alt="Poster for ${film.title}">`;
}
if (r.link) { if (r.link) {
html += `<p><a href="${r.link}" target="_blank">View details</a></p>`; html += `<p><a href="${r.link}" target="_blank">View details</a></p>`;
} }