Gutenberg og bilder

Gutenberg og bilder

En av de største forskjellene mellom Gutenberg og den «Klassiske» editoren er kanskje bildeblokkene. Med Gutenberg kom blokka som heter «Omslag» som gir mulighet for bakgrunnsbilder med tekst oppå. Og hvis du har et theme som er optimalisert for Gutenberg, så har du også mulighet for å vise alle bildeblokker i bred og full bredde.

Klikk på + tegnet og velg bilde

Nå er det ikke bare bilder som kan vises i full bredde, men det er først og fremst bilder vi skal se på i denne bloggen.

Å legge inn et vanlig bilde er veldig enkelt. Du kan klikke på + tegnet og legge inn blokka som heter «Bilde».

Da får du opp muligheten til å velge et bilde fra mediabiblioteket, eller laste opp bilde fra egen maskin.

Last opp bilde til mediagalleriet
Ser du disse to pilene, så har du et theme som er gutenberg optimalisert

Dra og slipp

Men det kan faktisk gjøres så enkelt som å dra et bilde fra en lokal mappe på din PC/Mac og slippe det rett i innlegget. Og vipps, så ligger det i mediabiblioteket ditt.


Eller, du kan dra mange bilder inn fra en lokal mappe, og det konverteres automatisk til et galleri.


Legg til bilder i galleri

Galleriet vil automatisk få en symmetrisk og fin visning, noe som ikke var en selvfølge i den klassiske editoren. Du kan la vær å beskjære bildene, men da forsvinner også noe av symmetrien


Omslag – bakgrunnsbilder

«Omslag» er en blokk som gir mulighet til å legge inn et bakgrunnsbilde med tekst over. Dette er en funksjon du kun hadde med sidebyggerplugins tidligere. Men nå kan du legge inn bakgrunnsbilder i standard WordPress editor – altså Gutenberg 🙂

Her er det bare å være kreativ. Dette kan være en dekorativ måte å starte et blogginnlegg på, eller når du skal bygge en forside i full bredde.

Omslag

Et spørsmål vi får ofte på WP Skolen er: Hvorfor vises ikke hele bildet når jeg legger inn et bakgrunnsbilde?

Et bakgrunnsbilde vil ALLTID tilpasse seg teksten som ligger oppå. Det er altså teksten som er fokus, bildet er ment å fungere som dekor. Derfor fungerer det sjelden bra med mennesker i bakgrunnsbildet, som i eksemplet over.

Innstillinger for "omslag".

Innstillinger for «omslag»

Du kan velge posisjonering av bildet du velger som bakgrunn(1).

Når du velger «Omslag» så vil det automatisk legges inn et overlegg over bildet. Du kan velge farge og gjennomsiktighetsgrad(2).

Men det er spesielt en ting du må være klar over når du bruker et bilde som bakgrunn: Det er teksten du legger oppå som bestemmer utsnitt av bildet.

Som du ser over, så fungerer det helt greit med både størrelse og utsnitt på bildet over. Men om vi kjører en forhåndsvisning på mobil, så får vi et ganske annet resultat.

Her ligger teksten under hverandre, og vi får i praksis et utsnitt av bildet i høydeformat.

«Omslag» – desktop vs mobil visning

Her ser du hvordan et «omslag» ser ut med et bakgrunnsbilde som viser meg og Ragnhild i høyre del av bildet. Slik ser det ut i full bredde:

Lær WordPress med oss

All undervisning på norsk!

På stor skjerm går det helt fint, så lenge teksten er venstrejustert. Under ser du hvordan det blir på mobil. Og her ser du hvorfor det ikke fungerer så veldig godt med ansikter og andre «kroppsdeler» i bakgrunnsbilder.

Det finnes måter å løse det på, men da må vi over på mere avanserte plugins, så i denne omgangen rekker vi ikke mer enn standardløsningen. Men i mange tilfeller er denne mere enn nok.

Bakgrunnsbilder

Nå kan det sikkert diskuteres hvem som er viktig i dette bildet, men som du ser, så er det en av oss som ikke får være med 🙂


I praksis betyr det at et bakgrunnsbilde må tåle beskjæring, og det må også fungere som bakgrunn for tekst. Derfor fungerer det ofte best med f.eks landskapsbilder eller bilder som er litt mer abstrakte.

Altså: Blokka som heter «Bilde» vil alltid vise bildet i sin helhet, og bildet skaleres automatisk til skjermstørrelsen. Mens blokka som heter «Omslag» vil vise et utsnitt av bildet, avhengig av hva du plasserer oppå bildet.

I tillegg til disse bildeblokkene har vi også blokka som heter «Media og tekst», men den gikk vi gjennom i forrige ukes blogg.

Flickr og Instagram

Å bygge inn innhold fra Flickr, Instagram, Facebook, Twitter og mange andre har vært standard i WordPress ganske lenge. Men det har ikke vært så lett tilgjengelig som det er nå. Nå kan du bygge inn bilder fra f.eks Instagram ved å søke opp…jepp…»Instagram!

View this post on Instagram

God mandag fra oss på #wpskolen

A post shared by WP Skolen (@wpskolen) on

Og med det tror jeg vi har vært gjennom alle standard blokker som inkluderer bilder. Det finnes en rekke plugins som gir mange flere valg i Gutenberg, og de skal vi komme tilbake til i en senere blogg!

WP Basis + VIP tilbud i mai!

Kjøper du WP Basis kurset før 1. juni får du VIP medlemskap gratis den første måneden, deretter kun kr 599,- ink.mva pr mnd. Prisen låses så lenge du er aktiv medlem.

Fra 1. juni går prisen opp til kr 999,- pr mnd, men kun for nye medlemmer.

4 thoughts on “Gutenberg og bilder

  1. Hei, det var hjelpsomme forklaringer.
    Det som skjer når jeg legger et bilde på forsida, er at det dukker opp på alle de andre sidene også.
    Har der tips til å bare legge bakgrunnsbilde på forsida?

    Takk for svar, hilse Gunhild

    1. Hei Gunhild! Hva heter themet du bruker? Normalt så vil f.eks et omslag vises kun på den siden du legger det inn på. Hvis et bilde vises på alle sider, så legger man det normalt inn i themeinnstillingene. Fortell hvilket theme du bruker, så er det enklere å svare deg

Skriv en kommentar

Din e-postadresse vil ikke bli publisert.

Dette nettstedet bruker Akismet for å redusere spam. Lær om hvordan dine kommentar-data prosesseres.

Ikke gå glipp av nyheter fra WP Skolen

Du vil motta e-post fra oss når vi har nye blogginnlegg, nyheter eller tilbud som vi tror vil være av interesse for deg. Du kan melde deg av når du vil!

Tilbakestill passord

Gjenopprett passordet ditt

En link for å gjenopprette passord vil bli sendt deg på e-post.

Tilbake