Skapa ett bildgalleri utan plugin

Kortfattat: Bygg ett lätt och expanderbart bildgalleri med HTML, CSS och en liten mängd JavaScript.

Vill du skapa ett stilrent och expanderbart bildgalleri utan att installera ytterligare ett WordPress-plugin? I den här guiden får du den kompletta lösningen från det tidigare inlägget: en förhandsvisning, färdig HTML och JavaScript samt all CSS som behövs.

1. Välj plats och lägg till HTML-redigerare

Öppna sidan där galleriet ska visas och lägg till ett block för Anpassad HTML. I andra sidbyggare kan blocket heta HTML, kod eller HTML-redigerare.

2. Lägg till HTML och JavaScript

Klistra in koden nedan i HTML-blocket. Byt därefter ut platshållarna bild1, bild2 och så vidare mot adresserna till dina egna bilder.

<div class="galleri" id="galleri">
  <img src="bild1" alt="Bild 1">
  <img src="bild2" alt="Bild 2">
  <img src="bild3" alt="Bild 3">
  <img src="bild4" alt="Bild 4">
  <img src="bild5" alt="Bild 5">
  <div class="image-overlay" id="loadMore1">
    <img src="bild6" alt="Bild 6">
    <div class="overlay">+6 bilder</div>
  </div>
</div>

<div class="galleri hidden" id="extraImages1">
  <img src="bild7" alt="Bild 7">
  <img src="bild8" alt="Bild 8">
  <img src="bild9" alt="Bild 9">
  <img src="bild10" alt="Bild 10">
  <img src="bild11" alt="Bild 11">
  <div class="image-overlay" id="loadMore2">
    <img src="bild12" alt="Bild 12">
    <div class="overlay">+6 bilder</div>
  </div>
</div>

<div class="galleri hidden" id="extraImages2">
  <img src="bild13" alt="Bild 13">
  <img src="bild14" alt="Bild 14">
  <img src="bild15" alt="Bild 15">
  <img src="bild16" alt="Bild 16">
  <img src="bild17" alt="Bild 17">
  <img src="bild18" alt="Bild 18">
</div>

<script>
document.getElementById("loadMore1").addEventListener("click", function() {
  document.getElementById("extraImages1").classList.remove("hidden");
  this.querySelector(".overlay").style.display = "none";
});

document.getElementById("loadMore2").addEventListener("click", function() {
  document.getElementById("extraImages2").classList.remove("hidden");
  this.querySelector(".overlay").style.display = "none";
});
</script>

3. Lägg till dina egna bildadresser

Ladda upp bilderna i WordPress mediebibliotek, kopiera varje bilds filadress och ersätt respektive platshållare. Skriv även beskrivande alt-texter i stället för generiska texter som ”Bild 1”.

4. Lägg till CSS för utseende och mobilanpassning

Lägg CSS-koden i temats fält för anpassad CSS, i ett barntema eller i ett eget kodplugin. Koden skapar tre kolumner och anpassar bildhöjden för dator, surfplatta och mobil.

.galleri {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  max-width: 100%;
  transition: all 0.3s ease-in-out;
  margin-top: 10px;
}

.galleri img, .image-overlay img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  object-position: center;
  border-radius: 5px;
}

.image-overlay {
  position: relative;
}

.image-overlay .overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: 400;
  cursor: pointer;
  border-radius: 5px;
}

.hidden {
  display: none;
}

@media (min-width: 1025px) {
  .galleri img, .image-overlay img { height: 190px !important; }
  .image-overlay .overlay { font-size: 20px; }
}

@media (max-width: 1024px) and (min-width: 769px) {
  .galleri img, .image-overlay img { height: 150px !important; }
  .image-overlay .overlay { font-size: 18px; }
}

@media (max-width: 768px) {
  .galleri { margin-top: 5px; gap: 5px; }
  .galleri img, .image-overlay img { height: 100px !important; }
  .image-overlay .overlay { font-size: 14px; }
}

Så fungerar den expanderbara delen

De första sex bilderna visas direkt. När besökaren klickar på rutan med texten +6 bilder visas nästa grupp. Samma princip används en gång till för den sista bildgruppen.

Viktigt innan du publicerar

Komprimera bilderna, använd gärna WebP eller AVIF och ange riktiga alt-texter. Kontrollera även att bildadresserna använder HTTPS och att galleriet fungerar på mobil. Om flera gallerier ska finnas på samma sida behöver varje galleri få unika ID-värden.

Relaterade guider

Läs även om hur du komprimerar bilder, vad WebP är och hur lazy loading fungerar. Det hjälper dig att hålla galleriet snabbt även när antalet bilder ökar.

Sammanfattning

Med HTML, CSS och en liten mängd JavaScript kan du skapa ett snabbt expanderbart bildgalleri utan ett separat plugin. Lösningen är lätt att anpassa och den fullständiga koden ovan kan klistras in direkt.