Ett textinlägg utan bilder får 2-3 gånger mindre engagemang än en artikel med visuellt innehåll. Bilder bryter upp textmassor, håller kvar uppmärksamheten och hjälper till att förklara sådant som är svårt att förmedla med ord. Dessutom ger bilder i alt-texter och filnamn söktrafik från Google Bilder, för en teknisk blogg innebär det hundratals extra besök i månaden.

Gutenberg-redigeraren (blockredigeraren i WordPress) hanterar bilder utan ett enda plugin. Fem inbyggda block täcker alla grundläggande scenarier: från en enstaka bild till gallerier och helskärmsomslag med textlager. Men nybörjare har fortfarande frågor: vilket block ska man välja, hur justerar man en bild så att texten inte bryts sönder, hur placerar man två bilder sida vid sida, eller varför man skulle behöva ett duotone-filter.

Nedan följer en steg-för-steg-genomgång av varje block med inställningar som korta guider inte nämner. Inga plugins, bara inbyggda Gutenberg-verktyg.

💡 Snabb översikt:

• Lägg till en enstaka bild med blocket "Bild" och konfigurera justering via verktygsfältet, för en bild räcker det
• Placera en bild bredvid text med blocket "Media & Text", det bibehåller proportionerna strikt, text överlappar inte
• Sätt två eller fler bilder i rad med blocket "Galleri" och ange antal kolumner, rutnätet justeras automatiskt
• Lägg text ovanpå ett foto med blocket "Omslag" med filter, överlägg och valfri parallaxeffekt
• Aktivera lightbox i blockinställningarna för "Bild", bilden öppnas i helskärm utan att sidan laddas om

Vilka Gutenberg-block fungerar med bilder

WordPress levererar fem bildrelaterade block direkt ur lådan. Var och en löser sin egen uppgift, du ska inte blanda ihop dem.

• Bild (Image), en enstaka bild med justering, bildtext, länk, duotone-filter och lightbox-inställningar. Det grundläggande byggblocket för alla inlägg. Dokumentation
• Galleri (Gallery), ett rutnät med flera bilder och kolumninställningar. Ersätter klassiska gallerier från den gamla redigeraren och shortcoden [gallery]. Dokumentation
• Media & Text (Media & Text), ett tvåkollumnsblock: bild till vänster (eller höger), text bredvid. En fast koppling utan feljustering när upplösningen ändras. Dokumentation
• Omslag (Cover), en bakgrundsbild med ett textlager och knappar ovanpå. Du kan konfigurera färgöverlägg, opacitet och fast bakgrund. Dokumentation
• Fil (File), en nedladdningslänk med ett kort. För PDF-instruktioner och arkiv, inte för att visa en bild på sidan.

De fyra första är din huvudsakliga arsenal. Blocket "Fil" används inte för att illustrera innehåll, så vi täcker bara visuella block nedan.

Hur man lägger till en enstaka bild och konfigurerar justering

Det vanligaste scenariot: infoga en bild i text och justera dess position i förhållande till stycken.

Klicka på "+"-knappen (lägg till block) i redigeringsgränssnittet och välj "Bild". Ett uppladdningsfönster visas, du kan dra en fil från din dator, välja från WordPress mediebibliotek eller klistra in en URL. Efter uppladdning visas bilden omedelbart i redigeraren, och ett verktygsfält med justeringsknappar dyker upp ovanför den.

Tillgängliga justeringsalternativ:

• Vänsterjustera, bilden trycks till vänster, text flödar på höger sida
• Centrera, bilden i mitten, text ovanför och under
• Högerjustera, spegelversion av vänsterjustering
• Bred bredd, bilden sträcker sig utanför textblockets gränser men inte hela skärmen
• Full bredd, bilden sträcker sig kant till kant i innehållsområdet

Blå punkter i bildens hörn låter dig ändra storlek genom att dra, du behöver inte beräkna pixlar i CSS. I höger sidofält (fliken "Block") kan du konfigurera alternativ text för SEO och en länk som användare följer när de klickar på bilden.

Två tips som sparar tid. Första: aktivera lightbox (alternativet "Förstora vid klick" i blockets länkinställningar), vid klick öppnas bilden i helskärm, användaren lämnar inte sidan. Andra: duotone-filtret (cirkelikonen i blockets verktygsfält) ändrar bildens färgschema utan Photoshop, användbart när skärmdumpar från olika källor visuellt krockar. Filtret ändrar inte källfilen i mediebiblioteket, du kan alltid återställa det.

Men det finns en hake: "vänsterjustera" och "högerjustera" fungerar bra bara när texten är tillräckligt lång. Om stycket är kort "faller bilden ur" flödet och nästa rubrik överlappar den. I sådana fall är det bättre att använda blocket "Media & Text".

Blocket "Media & Text": bild och stycke i ett paket

Blocket Media & Text låser fast förhållandet: halva bredden för bild, halva för text. Ingen feljustering när skärmupplösningen ändras.

Läggs till på samma sätt: "+"-knappen, sök efter "Media & Text". Välj en bild och skriv text i den intilliggande kolumnen. I sidofältet finns dessa växlare tillgängliga:

• Byt plats (bild vänster eller höger)
• Helskärmsläge (sträck ut till full tillgänglig bredd)
• Bakgrundsfärg för texthalvan

Blocket är särskilt praktiskt för steg-för-steg-instruktioner: skärmdump av en inställning till vänster, beskrivning av vad som händer till höger. Läsaren tappar inte kopplingen mellan text och bild när de rullar.

I praktiken hjälper Media & Text också i mer vardagliga situationer. Du har till exempel infogat en skärmdump med vänsterjustering, och nästa H2 "sprang in i" bilden. Det är för sent att ändra styckestruktur, slå in bilden och texten i Media & Text, problemet försvinner på 10 sekunder.

Hur man placerar två eller fler bilder sida vid sida med galleriblocket

Om du behöver visa en serie skärmdumpar eller göra en fotosamling, använd blocket "Galleri". Till skillnad från den gamla klassiska redigeraren där galleriet levde som en separat [gallery]-shortcode, hanterar Gutenberg det visuellt.

Lägg till blocket "Galleri", ladda upp de bilder som behövs, de ordnas automatiskt i ett rutnät. I blockinställningarna (höger panel) väljer du antal kolumner: 2, 3, 4 eller fler. För två bilder sida vid sida, ställ in "2 kolumner", du får en prydlig rad utan manuell storleksjustering.

Ytterligare funktioner i galleriblocket:

• Beskärning av miniatyrer, alla bilder bringas till samma storlek, rutnätet ser jämnt ut
• Konfigurera avstånd mellan bilder
• Koppla en länk till varje bild separat

Om projektet kräver icke-standard layout (bilder av olika storlek i ett rutnät) kanske det inbyggda galleriets kapacitet inte räcker till. Då kommer blocket "Kolumner" (Columns) till undsättning, separata "Bild"-block kapslas inuti det med oberoende inställningar. Men för typiska scenarier räcker de färdiga gallerierna.

Obs: blanda inte ihop blocket "Galleri" med flera "Bild"-block ordnade i kolumner. Galleriet beskär automatiskt miniatyrer, alla bilder ser lika höga ut oavsett ursprungliga proportioner. Kolumner gör inte denna justering: en bild blir högre än en annan, och raden "flyter". För en snabb fotosamling, använd galleri, för pixelperfekt layout, använd kolumner.

Hur man lägger text ovanpå en bild med blocket "Omslag"

Blocket "Omslag" är en bakgrundsbild med ett textlager. I grunden en banner inuti inlägget. Används för att formatera artikelsektioner, citat eller viktiga slutsatser.

Välj blocket "Omslag", ladda upp en bild och skriv text direkt ovanpå den. I sidofältet kan du konfigurera:

• Överläggsfärg, halvtransparent fyllning över bilden, gör text läsbar på vilken bakgrund som helst
• Opacitet, överläggets intensitet från knappt märkbar till nästan solid
• Fast bakgrund, vid rullning av sidan stannar bilden kvar (parallaxeffekt)
• Bakgrundsupprepning, fyll blocket med ett upprepande mönster, för texturer och ornament

Fast bakgrund är en populär teknik i landningssidor och WordPress-portföljer. Ser imponerande ut, men på mobila enheter inaktiveras den ofta av webbläsaren av prestandaskäl. Räkna inte med det som huvudteknik för telefoner.

Blocket "Omslag" kapslas inuti andra block: inuti kolumner, grupper eller rader. Och du kan placera inte bara text på omslaget, utan också en knapp: lägg till ett "Knappar"-block inuti omslaget, så får du en färdig CTA-banner med bakgrund. Alla verktyg, ingen CSS eller ytterligare plugins.

Om omslaget saktar ner laddningen på mobil, inaktivera fast bakgrund och komprimera bilden till 200-250 KB. WordPress från och med version 5.8 konverterar automatiskt PNG och JPEG till WebP vid uppladdning, men det är bättre att förbereda källan i förväg via TinyPNG eller konvertering till AVIF.

⁉️🤔 Vanliga frågor

Varför "hoppar" text och krockar med intilliggande block efter att jag lagt till en bild?

Detta händer när bilden är vänster- eller högerjusterad och det finns för lite text runt den. Gutenberg "stöttar" inte automatiskt blockhöjden under bilden, den förlitar sig på volymen av omgivande text. Lösning: slå in bilden och texten i ett "Media & Text"-block, det bibehåller proportionerna strikt. Eller lägg till ytterligare 2-3 rader text så att flödet fungerar korrekt.

Hur skiljer sig blocket "Galleri" från flera "Bild"-block placerade i kolumner?

Galleri ger ett enhetligt rutnät med automatisk miniatyrbeskärning, alla bilder ser lika stora ut oavsett ursprungliga proportioner. Kolumner med separata bilder gör inte denna justering: en bild kan bli högre än en annan, och raden "flyter". För en snabb fotosamling, ta galleri, för exakt pixelperfekt layout, använd kolumner.

Kan jag lägga till alt-text för flera bilder i ett galleri på en gång?

Nej, blocket "Galleri" stöder inte massredigering av alt-texter. Varje bild i galleriet är en separat mediafil, och alt ställs in individuellt: klicka på en specifik bild i galleriet, gå till sidofältet och fyll i fältet "Alternativ text". Eller skriv alt i förväg i WordPress mediebibliotek, då hämtas den automatiskt vid infogning.

Blocket "Omslag" saktar ner sidladdningen på mobil. Hur fixar jag det?

Fast bakgrund (parallax) är den främsta boven. Inaktivera alternativet "Fast bakgrund" i blockinställningarna, så slutar webbläsaren rendera den tunga effekten vid rullning. Andra steget, komprimera omslagsbilden till 200-250 KB: tjänster som TinyPNG eller konvertering till WebP/AVIF minskar storleken utan synlig kvalitetsförlust. WordPress 5.8+ konverterar automatiskt PNG och JPEG till WebP vid uppladdning, men det är bättre att förbereda källan i förväg.

Är blocket "Fil" meningsfullt om jag bara vill visa en bild?

Nej. Blocket "Fil" visar en nedladdningsknapp och filnamn, inte själva bilden. Det behövs för PDF-instruktioner, ZIP-arkiv, CSV-filer och andra dokument som användaren ska spara till sin enhet. För att visa en bild, använd alltid blocket "Bild".

Hur skiljer sig Gutenbergs lightbox från lightbox-plugins som FooBox eller Meow Lightbox?

Den inbyggda lightboxen (alternativet "Förstora vid klick" i blocket "Bilds" länkinställningar) fungerar utan extra kod och krockar inte med teman, den dök upp i WordPress 6.4 i slutet av 2023. Plugins ger fler inställningar: gallerivisning med svep, dimningseffekter, bildräknare. Om du placerar 2-3 bilder per inlägg räcker den inbyggda. För fotogallerier och portföljer, installera ett plugin.

Vilket block du ska ta för din uppgift: kort sammanfattning

Gutenberg täcker alla grundläggande bildarbetsscenarier utan ett enda plugin. Infoga en enstaka bild med blocket "Bild" och glöm inte alt-text, det är din främsta SEO-tillgång för Google Bilder. Aktivera lightbox: funktionen är gratis, och mobilläsare kommer att tacka dig.

Behöver du ett fast "bild + text"-paket, ta "Media & Text", det faller inte isär på någon skärm. Serie av bilder, "Galleri" med kolumninställningar, automatisk beskärning kommer att justera allt i en linje. Text över foto, "Omslag" med överlägg och valfri parallax, och du kan lägga till en knapp inuti för att få en CTA-banner.

Att bemästra dessa fyra block är realistiskt på 10-15 minuter i ett testinlägg. Öppna ett utkast, dra block runt på arbetsytan, Gutenbergs gränssnitt är designat för visuellt arbete, inte kod. Om nästa inlägg kommer ut med bilder istället för en vägg av text, ligger du redan steget före.