Bildverzeichnis (Thumbnail) mit Javascript erzeugen

[Jonathan Harker]

Hallo Linuchs,

Moin,

ich habe HTML-Seiten (nicht PHP) mit Bildern <img src=...> und möchte ein Bildverzeichnis dieser Seite erstellen, also die Bilder im Kleinformat zeigen.

Bei reinen HTML-Seiten würde ich nicht bei jedem Neuladen mit JavaScript Bitmap-Miniaturansichten generieren. Ich würde dabei zwei Fälle unterscheiden:

1. Du willst lediglich eine kleine Bildübersicht

Dann verwende einfach die vorhandenen Bilder und skaliere diese mit CSS:

<div class="bildverzeichnis">
  <a href="#bild1"><img src="bilder/haus.jpg" alt="Haus"></a>
  <a href="#bild2"><img src="bilder/garten.jpg" alt="Garten"></a>
  <a href="#bild3"><img src="bilder/zaun.jpg" alt="Zaun"></a>
</div>

.bildverzeichnis {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
  gap: 1rem;
}

.bildverzeichnis img {
  display: block;
  width: 100%;
  height: 8rem;
  object-fit: contain;
}

2. Du willst thumbnails

Dann würde ich das 1x

a. manuell beim Upload

b. mit PHP machen.

Bis bald!
Jonathan