En tekstpost uten bilder får 2-3 ganger mindre engasjement enn en artikkel med visuelt innhold. Bilder bryter opp tekstvegger, holder på oppmerksomheten og hjelper med å forklare ting som er vanskelige å formidle med ord. I tillegg gir bilder i alt-tekster og filnavn søketrafikk fra Google Bilder, for en teknisk blogg utgjør det hundrevis av ekstra besøk per måned.

Gutenberg-editoren (blokk-editoren i WordPress) håndterer bilder uten en eneste plugin. Fem innebygde blokker dekker alle grunnleggende scenarioer: fra et enkelt bilde til gallerier og fullskjermomslag med tekstlag. Men nybegynnere har fortsatt spørsmål: hvilken blokk skal man velge, hvordan justere et bilde så teksten ikke brytes, hvordan plassere to bilder side om side, eller hvorfor man skulle trenge et duotone-filter.

Nedenfor følger en trinnvis gjennomgang av hver blokk med innstillinger som korte guider ikke nevner. Ingen plugins, bare innebygde Gutenberg-verktøy.

💡 Rask oversikt:

• Legg til et enkelt bilde med «Image»-blokken og konfigurer justering via verktøylinjen, for ett bilde er det nok
• Plasser et bilde ved siden av tekst med «Media & Text»-blokken, den opprettholder proporsjonene rigid, tekst overlapper ikke
• Sett to eller flere bilder på rad med «Gallery»-blokken og angi antall kolonner, rutenettet justeres automatisk
• Legg tekst over et foto med «Cover»-blokken med filtre, overlegg og valgfri parallakseeffekt
• Aktiver lightbox i «Image»-blokkens innstillinger, bildet åpnes i fullskjerm uten å laste siden på nytt

Hvilke Gutenberg-blokker fungerer med bilder

WordPress leverer fem blokker relatert til bilder ut av boksen. Hver løser sin egen oppgave, du bør ikke forveksle dem.

• Image (Image), et enkelt bilde med justering, bildetekst, lenke, duotone-filter og lightbox-innstillinger. Den grunnleggende byggeklossen for ethvert innlegg. Dokumentasjon
• Gallery (Gallery), et rutenett av flere bilder med kolonneinnstillinger. Erstatter klassiske gallerier fra den gamle editoren og [gallery]-shortkoden. Dokumentasjon
• Media & Text (Media & Text), en to-kolonneblokk: bilde til venstre (eller høyre), tekst ved siden av. En rigid forbindelse uten feiljustering når oppløsningen endres. Dokumentasjon
• Cover (Cover), et bakgrunnsbilde med et tekstlag og knapper oppå. Du kan konfigurere fargeoverlegg, opasitet og fast bakgrunn. Dokumentasjon
• File (File), en nedlastingslenke med et kort. For PDF-instruksjoner og arkiver, ikke for å vise et bilde på siden.

De fire første er ditt hovedarsenal. «File»-blokken brukes ikke til å illustrere innhold, så vi dekker kun visuelle blokker nedenfor.

Hvordan legge til et enkelt bilde og konfigurere justering

Det vanligste scenarioet: sett inn ett bilde i tekst og juster posisjonen i forhold til avsnitt.

Klikk på «+»-knappen (legg til blokk) i editorgrensesnittet og velg «Image». Et opplastingsvindu vises, du kan dra en fil fra datamaskinen, velge fra WordPress-mediebiblioteket eller lime inn en URL. Etter opplasting vises bildet umiddelbart i editoren, og en verktøylinje med justeringsknapper dukker opp over det.

Tilgjengelige justeringsalternativer:

• Juster venstre, bildet skyves til venstre, tekst brytes på høyre side
• Juster midten, bildet i midten, tekst over og under
• Juster høyre, speilversjon av venstrejustering
• Bred bredde, bildet strekker seg utover tekstblokkens grenser, men ikke full skjerm
• Full bredde, bildet strekker seg kant-til-kant av innholdsområdet

Blå prikker i hjørnene av bildet lar deg endre størrelse ved å dra, du trenger ikke beregne piksler i CSS. I høyre sidepanel («Block»-fanen) kan du konfigurere alternativ tekst for SEO og en lenke som brukere følger når de klikker på bildet.

To tips som sparer tid. Først: aktiver lightbox («Forstørr ved klikk»-alternativet i blokkens lenkeinnstillinger), når det klikkes åpnes bildet i fullskjerm, brukeren forlater ikke siden. Andre: duotone-filteret (sirkelikon i blokkens verktøylinje) endrer bildets fargeprofil uten Photoshop, nyttig når skjermbilder fra ulike kilder visuelt krasjer. Filteret endrer ikke kildefilen i mediebiblioteket, du kan alltid tilbakestille det.

Men det er en hake: «juster venstre» og «juster høyre» fungerer bare bra når teksten er lang nok. Hvis avsnittet er kort, «faller bildet ut» av flyten og neste overskrift overlapper det. I slike tilfeller er det bedre å bruke «Media & Text»-blokken.

«Media & Text»-blokken: bilde og avsnitt i én pakke

Media & Text-blokken fikserer forholdet rigid: halv bredde for bilde, halv for tekst. Ingen feiljustering når skjermoppløsningen endres.

Legges til på samme måte: «+»-knapp, søk etter «Media & Text». Velg et bilde og skriv tekst i den tilstøtende kolonnen. I sidepanelet er disse bryterne tilgjengelige:

• Bytt plass (bilde venstre eller høyre)
• Fullskjermmodus (strekk til full tilgjengelig bredde)
• Bakgrunnsfarge for tekstdelen

Blokken er spesielt praktisk for trinnvise instruksjoner: skjermbilde av en innstilling til venstre, beskrivelse av hva som skjer til høyre. Leseren mister ikke forbindelsen mellom tekst og bilde når de ruller.

I praksis hjelper Media & Text i mer jordnære situasjoner også. For eksempel satte du inn et skjermbilde med venstrejustering, og neste H2 «løp inn i» bildet. Det er for sent å endre avsnittsstruktur, pakk bildet og teksten inn i Media & Text, problemet forsvinner på 10 sekunder.

Hvordan plassere to eller flere bilder side om side med galleriblokken

Hvis du trenger å vise en serie skjermbilder eller lage en fotosamling, bruk «Gallery»-blokken. I motsetning til den gamle klassiske editoren der galleriet levde som en separat [gallery]-shortkode, håndterer Gutenberg det visuelt.

Legg til «Gallery»-blokken, last opp de nødvendige bildene, de ordnes automatisk i et rutenett. I blokkinnstillingene (høyre panel) velger du antall kolonner: 2, 3, 4 eller flere. For to bilder side om side, sett «2 kolonner», du får en ryddig rad uten manuell størrelsesjustering.

Ytterligere galleriblokkfunksjoner:

• Beskjæring av miniatyrbilder, alle bilder bringes til samme størrelse, rutenettet ser jevnt ut
• Konfigurering av avstand mellom bilder
• Legge ved en lenke til hvert bilde separat

Hvis prosjektet krever ikke-standard layout (bilder av ulik størrelse i ett rutenett), kan det hende det innebygde galleriets kapasitet ikke er nok. Da kommer «Columns» (Columns)-blokken til unnsetning, separate «Image»-blokker nestes inni den med uavhengige innstillinger. Men for typiske scenarioer er galleriene ut av boksen tilstrekkelige.

Merk: ikke forveksle «Gallery»-blokken med flere «Image»-blokker arrangert i kolonner. Galleriet beskjærer automatisk miniatyrbilder, alle bilder ser like høye ut uavhengig av opprinnelige proporsjoner. Kolonner gjør ikke denne justeringen: ett bilde ender opp høyere enn et annet, og raden «flyter». For en rask fotosamling, bruk galleri, for pikselperfekt layout, bruk kolonner.

Hvordan legge tekst over et bilde med «Cover»-blokken

«Cover»-blokken er et bakgrunnsbilde med et tekstlag. I hovedsak en banner inne i innlegget. Brukes til formatering av artikkelseksjoner, sitater eller nøkkelkonklusjoner.

Velg «Cover»-blokken, last opp et bilde og skriv inn tekst rett oppå det. I sidepanelet kan du konfigurere:

• Overleggsfarge, semi-transparent fyll over bildet, gjør tekst lesbar på enhver bakgrunn
• Opasitet, overleggsintensitet fra knapt merkbar til nesten solid
• Fast bakgrunn, når du ruller siden forblir bildet på plass (parallakseeffekt)
• Bakgrunnsgjentakelse, flis blokken med et repeterende mønster, for teksturer og ornamenter

Fast bakgrunn er en populær teknikk i landingssider og WordPress-porteføljer. Ser imponerende ut, men på mobile enheter er det ofte deaktivert av nettleseren av ytelseshensyn. Ikke stol på det som hovedteknikk for telefoner.

«Cover»-blokken nestes inni andre blokker: inni kolonner, grupper eller rader. Og du kan plassere ikke bare tekst på omslaget, men også en knapp: legg til en «Buttons»-blokk inni omslaget, så får du en ferdig CTA-banner med bakgrunn. Alle verktøyene, ingen CSS eller ekstra plugins.

Hvis omslaget bremser lasting på mobil, deaktiver fast bakgrunn og komprimer bildet til 200-250 KB. WordPress fra versjon 5.8 konverterer automatisk PNG og JPEG til WebP under opplasting, men det er bedre å forberede kilden på forhånd via TinyPNG eller konvertering til AVIF.

⁉️🤔 Ofte stilte spørsmål

Hvorfor «hopper» tekst og løper inn i tilstøtende blokker etter å ha lagt til et bilde?

Dette skjer når bildet er justert venstre eller høyre og det er for lite tekst rundt det. Gutenberg «støtter» ikke automatisk blokkhøyden under bildet, den er avhengig av volumet av omkringliggende tekst. Løsning: pakk bildet og teksten inn i en «Media & Text»-blokk, den opprettholder proporsjonene rigid. Eller legg til ytterligere 2-3 linjer med tekst slik at bryting fungerer korrekt.

Hvordan skiller «Gallery»-blokken seg fra flere «Image»-blokker plassert i kolonner?

Galleri gir et enhetlig rutenett med automatisk miniatyrbeskjæring, alle bilder ser like store ut uavhengig av opprinnelige proporsjoner. Kolonner med separate bilder gjør ikke denne justeringen: ett bilde kan ende opp høyere enn et annet, og raden «flyter». For en rask fotosamling, ta galleri, for presis pikselperfekt layout, bruk kolonner.

Kan jeg legge til alt-tekst for flere bilder i et galleri samtidig?

Nei, «Gallery»-blokken støtter ikke masseredigering av alt-tekster. Hvert bilde i galleriet er en separat mediefil, og alt settes individuelt: klikk på et spesifikt bilde i galleriet, gå til sidepanelet og fyll ut «Alternativ tekst»-feltet. Eller skriv alt på forhånd i WordPress-mediebiblioteket, da hentes det automatisk ved innsetting.

«Cover»-blokken bremser sidelasting på mobil. Hvordan fikser jeg det?

Fast bakgrunn (parallakse) er hovedsynderen. Deaktiver «Fast bakgrunn»-alternativet i blokkinnstillingene, så slutter nettleseren å rendere den tunge effekten under rulling. Andre steg, komprimer omslagsbildet til 200-250 KB: tjenester som TinyPNG eller konvertering til WebP/AVIF reduserer størrelse uten synlig kvalitetstap. WordPress 5.8+ konverterer automatisk PNG og JPEG til WebP under opplasting, men det er bedre å forberede kilden på forhånd.

Gir «File»-blokken mening hvis jeg bare vil vise et bilde?

Nei. «File»-blokken viser en nedlastingsknapp og filnavn, ikke selve bildet. Den er nødvendig for PDF-instruksjoner, ZIP-arkiver, CSV-filer og andre dokumenter som brukeren skal lagre på enheten sin. For å vise et bilde, bruk alltid «Image»-blokken.

Hvordan skiller Gutenberg-lightboxen seg fra lightbox-plugins som FooBox eller Meow Lightbox?

Den innebygde lightboxen («Forstørr ved klikk»-alternativet i «Image»-blokkens lenkeinnstillinger) fungerer uten ekstra kode og kommer ikke i konflikt med temaer, den dukket opp i WordPress 6.4 på slutten av 2023. Plugins gir flere innstillinger: gallerivisning med sveiping, dimmeeffekter, bildeteller. Hvis du plasserer 2-3 bilder per innlegg, er den innebygde nok. For fotogallerier og porteføljer, installer en plugin.

Hvilken blokk du skal ta for oppgaven din: kort oppsummering

Gutenberg dekker alle grunnleggende scenarier for bildearbeid uten en eneste plugin. Sett inn et enkelt bilde med «Image»-blokken og ikke glem alt-tekst, det er din viktigste SEO-ressurs for Google Bilder. Aktiver lightbox: funksjonen er gratis, og mobillesere vil takke deg.

Trenger du en rigid «bilde + tekst»-pakke, ta «Media & Text», den faller ikke fra hverandre på noen skjerm. Serie med bilder, «Gallery» med kolonneinnstillinger, automatisk beskjæring vil justere alt på linje. Tekst over foto, «Cover» med overlegg og valgfri parallakse, og du kan legge til en knapp inni for å få en CTA-banner.

Å mestre disse fire blokkene er realistisk på 10-15 minutter i et testinnlegg. Åpne et utkast, dra blokker rundt på lerretet, Gutenberg-grensesnittet er designet for visuelt arbeid, ikke kode. Hvis neste innlegg kommer ut med bilder i stedet for en tekstvegg, er du allerede foran.