När ett eget galleri passar
Ett kodbaserat galleri passar när du vill ha full kontroll och undvika ett tungt plugin. Det bör vara responsivt, tangentbordsstyrt och fungera även om JavaScript inte laddas.
HTML-strukturen
Använd länkar runt miniatyrbilder så att originalbilden fortfarande går att öppna. Varje bild behöver en tydlig alt-text och gärna bildtext när sammanhanget kräver det.
CSS för rutnätet
CSS Grid kan skapa kolumner som automatiskt anpassas efter skärmbredden. Använd aspect-ratio och object-fit för jämna rutor utan att förvränga bilderna.
Lightbox med JavaScript
JavaScript kan öppna bilden i ett dialoglager, lägga fokus rätt och stänga med Escape. Undvik att låsa användaren och se till att stängknappen har en begriplig etikett.
En liten galleri-komponent kan räcka långt
För ett måleriföretag kan behovet vara tre kolumner med projektbilder på desktop och en kolumn på mobil. Då kan en enkel grid med klickbara länkar till fullstor bild vara mer robust än ett avancerat galleri-plugin med femton inställningar. WordPress genererar miniatyrerna, CSS styr rutnätet och webbläsarens egna funktioner sköter mycket av laddningen.
Om företaget senare behöver filtrera bilder efter rumstyp eller projekt kan funktionaliteten byggas ut. Börja med den faktiska uppgiften och undvik att installera en stor komponent bara för att få en effekt som modern CSS redan löser på några få regler. På en företagswebbplats är underhållbarhet en del av designkvaliteten.
WordPress har redan block för enkla gallerier
För många webbplatser behövs inget separat galleri-plugin. Gutenberg har ett Galleri-block där flera bilder kan väljas, ordnas och visas i kolumner. Fördelen är att lösningen följer WordPress kärnfunktioner och inte lägger till ett extra tillägg som ska uppdateras. Om behovet bara är en snygg översikt av projektbilder eller referenser är det ofta den enklaste vägen.
Mer avancerade funktioner som filtrering, bildtaggar eller specialbyggda lightboxar kan däremot motivera en egen lösning.
CSS Grid ger stor kontroll med väldigt lite kod
I en egen mall kan ett galleri byggas med vanlig HTML och CSS Grid. Genom `grid-template-columns` kan webbläsaren automatiskt skapa så många kolumner som får plats, och `gap` styr avståndet mellan bilderna. Med `aspect-ratio` och `object-fit: cover` kan rutorna få en jämn form även om originalbilderna har olika proportioner. Det är ofta enklare och stabilare än äldre lösningar med floats eller JavaScript som beräknar varje bilds position.
Tänk på laddning och tillgänglighet när många bilder visas
Ett galleri med 30 högupplösta bilder kan bli tungt även om själva layouten är enkel. Skapa flera bildstorlekar, låt webbläsaren använda `srcset` och lazy-loada bilder som ligger längre ned på sidan. Om en bild öppnas större i en dialog behöver tangentbordsnavigation, fokus och stängningsknapp fungera för fler än musanvändare. Ett rent galleri behöver alltså inte ett stort plugin, men det behöver fortfarande byggas med prestanda och tillgänglighet i åtanke.
Behöver företaget en bättre hemsida?
Få ett tydligt förslag och fast pris
Vi bygger och förbättrar WordPress-hemsidor med fokus på tydlighet, prestanda, SEO och enkel förvaltning.
Snabb återkoppling
Hjälpte den här artikeln dig?
Din röst sparas anonymt och hjälper oss att förbättra guiderna.