fix: optimize vehicle photo URLs and update HTML preconnect and stylesheet links

This commit is contained in:
Lago
2026-05-09 23:51:40 +02:00
parent b4258edb91
commit db4001aaa5
2 changed files with 17 additions and 10 deletions
+12 -3
View File
@@ -156,11 +156,12 @@ function renderGrid() {
emptyState.style.display = state.filtered.length ? "none" : "block";
for (const v of state.filtered) {
const photoUrl = optimizedVehiclePhotoUrl(v.photo_url);
const card = document.createElement("article");
card.className = "vehicle-card";
card.innerHTML = `
<div class="vehicle-photo">
<img src="${escapeAttr(v.photo_url)}" alt="${escapeAttr(v.brand)} ${escapeAttr(v.model)}" loading="lazy" decoding="async" />
<img src="${escapeAttr(photoUrl)}" alt="${escapeAttr(v.brand)} ${escapeAttr(v.model)}" loading="lazy" decoding="async" />
<span class="badge" aria-hidden="true">${escapeHtml(v.brand)}</span>
</div>
<div class="vehicle-body">
@@ -198,12 +199,13 @@ function renderGrid() {
function openDetails(id) {
const v = state.vehicles.find(x => x.id === id);
if (!v) return;
const photoUrl = optimizedVehiclePhotoUrl(v.photo_url);
const lang = getLang();
const desc = lang === "en" ? v.description_en : v.description_de;
dialogTitle.textContent = `${v.brand} ${v.model}`;
dialogBody.innerHTML = `
<img src="${escapeAttr(v.photo_url)}" alt="${escapeAttr(v.brand + ' ' + v.model)}" />
<img src="${escapeAttr(photoUrl)}" alt="${escapeAttr(v.brand + ' ' + v.model)}" />
<p>${escapeHtml(desc || "")}</p>
<div class="spec-row" style="margin:1rem 0;">
<div><strong>${v.power_hp}</strong><span>${t("hp")}</span></div>
@@ -399,6 +401,7 @@ async function updateSidebar() {
const kmPerWeekday = price.max_daily_km;
const kmPerWeekendDay = price.max_km_weekend;
const includedKm = (weekdays * kmPerWeekday) + (weekendDays * kmPerWeekendDay);
const photoUrl = optimizedVehiclePhotoUrl(v.photo_url);
bpfSidebarPlaceholder.style.display = "none";
bpfSidebarContent.style.display = "block";
@@ -413,7 +416,7 @@ async function updateSidebar() {
<div class="bpf-price-row muted" style="margin-top:0.8rem;"><span>${t("bpfDeposit")}</span><span>€ ${deposit.toLocaleString("de-DE")}</span></div>
<div class="bpf-price-row muted"><span>${t("bpfIncludedKm")}</span><span>${includedKm} km</span></div>
<div class="bpf-price-row muted"><span>${t("bpfExtraKm")}</span><span>€ 1,50${t("bpfPerKm")}</span></div>
<div class="bpf-car-preview" style="background-image:url('${escapeAttr(v.photo_url)}');"></div>
<div class="bpf-car-preview" style="background-image:url('${escapeAttr(photoUrl)}');"></div>
<p class="bpf-car-name">${escapeHtml(v.brand)} ${escapeHtml(v.model)}</p>
<p class="bpf-car-specs">${v.power_hp} ${t("hp")}${v.top_speed_kmh} ${t("kmh")}${escapeHtml(v.acceleration)}</p>
`;
@@ -533,6 +536,12 @@ function escapeHtml(s) {
}
function escapeAttr(s) { return escapeHtml(s); }
function optimizedVehiclePhotoUrl(url) {
const raw = String(url ?? "");
if (!raw) return raw;
return raw.replace("/images/ferrari-main-car.png", "/images/ferrari-main-car-mobile.jpg");
}
// ---------------- Boot ----------------
langToggle.textContent = getLang() === "de" ? "EN" : "DE";
applyI18n();