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.

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.

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.

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.

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”

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.

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!

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!