Tekstijulkaisu ilman kuvia saa 2-3 kertaa vähemmän sitoutumista kuin artikkeli, jossa on visuaalista sisältöä. Kuvat katkaisevat tekstimassaa, pitävät huomion yllä ja auttavat selittämään asioita, joita on vaikea välittää sanoin. Lisäksi kuvien alt-tekstit ja tiedostonimet tuovat hakuliikennettä Google-kuvahausta, tekniselle blogille se tarkoittaa satoja ylimääräisiä käyntejä kuukaudessa.

Gutenberg-editori (WordPressin lohkoeditori) toimii kuvien kanssa ilman ainuttakaan lisäosaa. Viisi sisäänrakennettua lohkoa kattaa kaikki perusskenaariot: yksittäisestä kuvasta gallerioihin ja koko näytön kansikuviin tekstikerroksilla. Aloittelijoilla on silti kysymyksiä: mikä lohko kannattaa valita, miten kuva tasataan niin, ettei teksti hajoa, miten kaksi kuvaa asetetaan vierekkäin tai mihin duotone-suodatinta tarvitaan.

Alla on vaiheittainen erittely jokaisesta lohkosta asetuksineen, joita lyhyet oppaat eivät mainitse. Ei lisäosia, vain sisäänrakennetut Gutenberg-työkalut.

💡 Pikakatsaus:

• Lisää yksittäinen kuva "Kuva"-lohkolla ja määritä tasaus työkalupalkista, yhdelle kuvalle se riittää
• Aseta kuva tekstin viereen "Media ja teksti" -lohkolla, se pitää mittasuhteet tiukasti, teksti ei mene päällekkäin
• Laita kaksi tai useampi kuva riviin "Galleria"-lohkolla ja määritä sarakkeiden määrä, ruudukko tasautuu automaattisesti
• Lisää tekstiä valokuvan päälle "Kansi"-lohkolla, jossa on suodattimet, peittoväri ja valinnainen parallaksiefekti
• Ota valolaatikko käyttöön "Kuva"-lohkon asetuksista, kuva avautuu koko näytölle ilman sivun uudelleenlatausta

Mitkä Gutenberg-lohkot toimivat kuvien kanssa

WordPress tarjoaa vakiona viisi kuviin liittyvää lohkoa. Jokainen ratkaisee oman tehtävänsä, eikä niitä pidä sekoittaa keskenään.

• Kuva (Image), yksittäinen kuva, jossa on tasaus, kuvateksti, linkki, duotone-suodatin ja valolaatikkoasetukset. Perusrakennuspalikka mihin tahansa julkaisuun. Dokumentaatio
• Galleria (Gallery), usean kuvan ruudukko sarakeasetuksilla. Korvaa vanhan editorin perinteiset galleriat ja [gallery]-lyhytkoodin. Dokumentaatio
• Media ja teksti (Media & Text), kahden sarakkeen lohko: kuva vasemmalla (tai oikealla), teksti vieressä. Jäykkä yhteys ilman kohdistusvirheitä resoluution vaihtuessa. Dokumentaatio
• Kansi (Cover), taustakuva, jonka päällä on tekstikerros ja painikkeita. Voit määrittää väripeiton, peittävyyden ja kiinteän taustan. Dokumentaatio
• Tiedosto (File), latauslinkki kortilla. PDF-ohjeille ja arkistoille, ei kuvan näyttämiseen sivulla.

Neljä ensimmäistä ovat pääarsenaalisi. "Tiedosto"-lohkoa ei käytetä sisällön kuvittamiseen, joten käsittelemme alla vain visuaalisia lohkoja.

Yksittäisen kuvan lisääminen ja tasauksen määrittäminen

Yleisin skenaario: lisää yksi kuva tekstiin ja säädä sen sijainti suhteessa kappaleisiin.

Klikkaa editorin "+"-painiketta (lisää lohko) ja valitse "Kuva". Esiin tulee latausikkuna, voit raahata tiedoston tietokoneeltasi, valita WordPressin mediakirjastosta tai liittää URL-osoitteen. Latauksen jälkeen kuva ilmestyy heti editoriin, ja sen yläpuolelle ponnahtaa työkalupalkki tasauspainikkeineen.

Käytettävissä olevat tasausvaihtoehdot:

• Tasaa vasemmalle, kuva työnnetään vasemmalle, teksti kiertää oikealla
• Tasaa keskelle, kuva keskellä, teksti ylä- ja alapuolella
• Tasaa oikealle, peiliversio vasemmasta tasauksesta
• Leveä, kuva ulottuu tekstilohkon rajojen yli, mutta ei koko näytön levyiseksi
• Täysi leveys, kuva venyy sisältöalueen reunasta reunaan

Kuvan kulmissa olevat siniset pisteet mahdollistavat koon muuttamisen raahaamalla, pikseleitä ei tarvitse laskea CSS:ssä. Oikeassa sivupalkissa ("Lohko"-välilehti) voit määrittää vaihtoehtoisen tekstin hakukoneoptimointia varten ja linkin, jota käyttäjät seuraavat kuvaa klikatessaan.

Kaksi aikaa säästävää vinkkiä. Ensimmäinen: ota valolaatikko käyttöön ("Suurenna klikattaessa" -vaihtoehto lohkon linkkiasetuksissa), klikattaessa kuva avautuu koko näytölle, eikä käyttäjä poistu sivulta. Toinen: duotone-suodatin (ympyräkuvake lohkon työkalupalkissa) muuttaa kuvan värimaailmaa ilman Photoshopia, hyödyllinen, kun eri lähteistä peräisin olevat kuvakaappaukset riitelevät visuaalisesti. Suodatin ei muuta lähdetiedostoa mediakirjastossa, voit aina palauttaa sen.

Mutta tässä on sudenkuoppa: "tasaa vasemmalle" ja "tasaa oikealle" toimivat hyvin vain, kun teksti on riittävän pitkää. Jos kappale on lyhyt, kuva "putoaa" ulos tekstivirrasta ja seuraava otsikko menee sen päälle. Tällaisissa tapauksissa on parempi käyttää "Media ja teksti" -lohkoa.

"Media ja teksti" -lohko: kuva ja kappale yhtenä pakettina

Media ja teksti -lohko lukitsee suhteen tiukasti: puolet leveydestä kuvalle, puolet tekstille. Ei kohdistusvirheitä näytön resoluution vaihtuessa.

Lisätään samalla tavalla: "+"-painike, hae "Media ja teksti". Valitse kuva ja kirjoita teksti viereiseen sarakkeeseen. Sivupalkissa on käytettävissä seuraavat valintakytkimet:

• Vaihda paikkoja (kuva vasemmalle tai oikealle)
• Koko näytön tila (venytä koko käytettävissä olevaan leveyteen)
• Taustaväri tekstipuoliskolle

Lohko on erityisen kätevä vaiheittaisiin ohjeisiin: kuvakaappaus asetuksesta vasemmalla, kuvaus siitä, mitä tapahtuu, oikealla. Lukija ei menetä tekstin ja kuvan välistä yhteyttä selatessaan.

Käytännössä Media ja teksti auttaa myös arkisemmissa tilanteissa. Lisäsit esimerkiksi kuvakaappauksen vasemmalla tasauksella, ja seuraava H2 "törmäsi" kuvaan. On liian myöhäistä muuttaa kappalerakennetta, kääri kuva ja teksti Media ja teksti -lohkoon, ja ongelma katoaa 10 sekunnissa.

Kahden tai useamman kuvan asettaminen vierekkäin gallerialohkolla

Jos haluat näyttää sarjan kuvakaappauksia tai tehdä valokuvakokoelman, käytä "Galleria"-lohkoa. Toisin kuin vanhassa klassisessa editorissa, jossa galleria eli erillisenä [gallery]-lyhytkoodina, Gutenberg hallitsee sitä visuaalisesti.

Lisää "Galleria"-lohko, lataa tarvittavat kuvat, ne järjestyvät automaattisesti ruudukoksi. Lohkon asetuksissa (oikea paneeli) valitse sarakkeiden määrä: 2, 3, 4 tai enemmän. Kahdelle vierekkäiselle kuvalle aseta "2 saraketta", saat siistin rivin ilman manuaalista koon säätöä.

Gallerialohkon lisäominaisuudet:

• Pikkukuvien rajaaminen, kaikki kuvat tuodaan samaan kokoon, ruudukko näyttää tasaiselta
• Kuvien välisten etäisyyksien määrittäminen
• Linkin liittäminen jokaiseen kuvaan erikseen

Jos projekti vaatii epästandardia asettelua (erikokoisia kuvia samassa ruudukossa), sisäänrakennetun gallerian ominaisuudet eivät ehkä riitä. Silloin apuun tulee "Sarakkeet" (Columns)-lohko, jonka sisään asetetaan erillisiä "Kuva"-lohkoja itsenäisine asetuksineen. Mutta tyypillisiin skenaarioihin vakiona tulevat galleriat riittävät.

Huomio: älä sekoita "Galleria"-lohkoa useisiin sarakkeisiin järjestettyihin "Kuva"-lohkoihin. Galleria rajaa pikkukuvat automaattisesti, kaikki kuvat näyttävät samankorkuisilta alkuperäisistä mittasuhteista riippumatta. Sarakkeet eivät tee tätä säätöä: yksi kuva päätyy toista korkeammaksi, ja rivi "leijuu". Nopeaan valokuvakokoelmaan käytä galleriaa, pikselintarkkaan asetteluun sarakkeita.

Tekstin lisääminen kuvan päälle "Kansi"-lohkolla

"Kansi"-lohko on taustakuva, jossa on tekstikerros. Käytännössä banneri julkaisun sisällä. Käytetään artikkelin osioiden, lainausten tai keskeisten johtopäätösten muotoiluun.

Valitse "Kansi"-lohko, lataa kuva ja kirjoita teksti suoraan sen päälle. Sivupalkissa voit määrittää:

• Peittovärin, puoliläpinäkyvän täytön kuvan päälle, tekee tekstistä luettavaa millä tahansa taustalla
• Peittävyyden, peiton voimakkuuden hädin tuskin havaittavasta lähes peittävään
• Kiinteän taustan, sivua selattaessa kuva pysyy paikallaan (parallaksiefekti)
• Taustan toiston, lohkon täyttämisen toistuvalla kuviolla, tekstuureille ja ornamenteille

Kiinteä tausta on suosittu tekniikka laskeutumissivuilla ja WordPress-portfolioissa. Näyttää vaikuttavalta, mutta mobiililaitteilla selain usein poistaa sen käytöstä suorituskyvyn vuoksi. Älä laske sen varaan päätekniikkana puhelimilla.

"Kansi"-lohko asettuu muiden lohkojen sisään: sarakkeisiin, ryhmiin tai riveihin. Ja kannen päälle voit sijoittaa muutakin kuin tekstiä, myös painikkeen: lisää "Painikkeet"-lohko kannen sisään, ja saat valmiin CTA-bannerin taustalla. Kaikki työkalut, ei CSS:ää eikä lisäosia.

Jos kansi hidastaa latautumista mobiilissa, poista kiinteä tausta käytöstä ja pakkaa kuva 200-250 kilotavuun. WordPress versiosta 5.8 alkaen muuntaa PNG- ja JPEG-tiedostot automaattisesti WebP-muotoon latauksen yhteydessä, mutta lähdekuva on parempi valmistella etukäteen TinyPNG:n kautta tai muuntamalla AVIF-muotoon.

⁉️🤔 Usein kysytyt kysymykset

Miksi teksti "hyppii" ja törmää viereisiin lohkoihin kuvan lisäämisen jälkeen?

Näin tapahtuu, kun kuva on tasattu vasemmalle tai oikealle ja sen ympärillä on liian vähän tekstiä. Gutenberg ei automaattisesti "tue" lohkon korkeutta kuvan alla, vaan se nojaa ympäröivän tekstin määrään. Ratkaisu: kääri kuva ja teksti "Media ja teksti" -lohkoon, se pitää mittasuhteet tiukasti. Tai lisää 2-3 riviä tekstiä, jotta tekstin kierto toimii oikein.

Miten "Galleria"-lohko eroaa useista sarakkeisiin sijoitetuista "Kuva"-lohkoista?

Galleria tarjoaa yhtenäisen ruudukon automaattisella pikkukuvien rajauksella, kaikki kuvat näyttävät samankokoisilta alkuperäisistä mittasuhteista riippumatta. Sarakkeet erillisillä kuvilla eivät tee tätä säätöä: yksi kuva voi päätyä toista korkeammaksi, ja rivi "leijuu". Nopeaan valokuvakokoelmaan ota galleria, tarkkaan pikselintarkkaan asetteluun käytä sarakkeita.

Voinko lisätä alt-tekstin usealle gallerian kuvalle kerralla?

Et, "Galleria"-lohko ei tue alt-tekstien massamuokkausta. Jokainen gallerian kuva on erillinen mediatiedosto, ja alt-teksti asetetaan yksitellen: klikkaa tiettyä kuvaa galleriassa, siirry sivupalkkiin ja täytä "Vaihtoehtoinen teksti" -kenttä. Tai kirjoita alt-teksti etukäteen WordPressin mediakirjastossa, silloin se tulee automaattisesti mukaan kuvaa lisättäessä.

"Kansi"-lohko hidastaa sivun latautumista mobiilissa. Miten korjata?

Kiinteä tausta (parallaksi) on pääsyyllinen. Poista "Kiinteä tausta" -valinta käytöstä lohkon asetuksista, niin selain lopettaa raskaan efektin renderöinnin selauksen aikana. Toinen vaihe: pakkaa kansikuva 200-250 kilotavuun, palvelut kuten TinyPNG tai muunto WebP/AVIF-muotoon pienentävät kokoa ilman näkyvää laadun heikkenemistä. WordPress 5.8+ muuntaa PNG- ja JPEG-tiedostot automaattisesti WebP-muotoon latauksen yhteydessä, mutta lähdekuva on parempi valmistella etukäteen.

Onko "Tiedosto"-lohkossa järkeä, jos haluan vain näyttää kuvan?

Ei. "Tiedosto"-lohko näyttää latauspainikkeen ja tiedostonimen, ei itse kuvaa. Sitä tarvitaan PDF-ohjeille, ZIP-arkistoille, CSV-tiedostoille ja muille dokumenteille, jotka käyttäjän on tarkoitus tallentaa laitteelleen. Kuvan näyttämiseen käytä aina "Kuva"-lohkoa.

Miten Gutenbergin valolaatikko eroaa valolaatikkolisäosista, kuten FooBox tai Meow Lightbox?

Sisäänrakennettu valolaatikko ("Suurenna klikattaessa" -vaihtoehto "Kuva"-lohkon linkkiasetuksissa) toimii ilman lisäkoodia eikä aiheuta ristiriitoja teemojen kanssa, se ilmestyi WordPress 6.4:ään vuoden 2023 lopulla. Lisäosat tarjoavat enemmän asetuksia: gallerian katselun pyyhkäisemällä, himmennys-efektejä, kuvalaskurin. Jos sijoitat 2-3 kuvaa per julkaisu, sisäänrakennettu riittää. Kuvagallerioihin ja portfolioihin asenna lisäosa.

Mikä lohko kannattaa valita omaan tehtävään: lyhyt yhteenveto

Gutenberg kattaa kaikki peruskuvankäyttöskenaariot ilman ainuttakaan lisäosaa. Lisää yksittäinen kuva "Kuva"-lohkolla äläkä unohda alt-tekstiä, se on tärkein hakukoneoptimointivalttisi Google-kuvahaussa. Ota valolaatikko käyttöön: ominaisuus on ilmainen, ja mobiililukijat kiittävät sinua.

Tarvitset jäykän "kuva + teksti" -paketin, ota "Media ja teksti", se ei hajoa millään näytöllä. Kuvasarjat, "Galleria" sarakeasetuksilla, automaattinen rajaus linjaa kaiken riviin. Tekstiä valokuvan päälle, "Kansi" peittovärillä ja valinnaisella parallaksilla, ja voit lisätä painikkeen sisälle saadaksesi CTA-bannerin.

Näiden neljän lohkon hallinta on realistista 10-15 minuutissa testijulkaisussa. Avaa luonnos, raahaa lohkoja ympäri työtilaa, Gutenbergin käyttöliittymä on suunniteltu visuaaliseen työhön, ei koodaamiseen. Jos seuraava julkaisusi ilmestyy kuvien kera tekstimassan sijaan, olet jo edellä.