Üks tekstipostitus ilma piltideta saab 2-3 korda vähem kaasatust kui visuaalse sisuga artikkel. Pildid lõhuvad tekstimüüre, hoiavad tähelepanu ja aitavad selgitada asju, mida on sõnadega raske edasi anda. Lisaks toovad pildid alt-tekstide ja failinimede kaudu otsinguliiklust Google Images'ist, tehnilise blogi puhul tähendab see sadu lisakülastusi kuus.

Gutenbergi redaktor (plokiredaktor WordPressis) töötab piltidega ilma ühegi pluginata. Viis sisseehitatud plokki katavad kõik põhistsenaariumid: alates üksikust pildist kuni galeriide ja tekstikihtidega täisekraanikateteni. Kuid algajatel tekib endiselt küsimusi: millist plokki valida, kuidas pilti joondada nii, et tekst ei puruneks, kuidas paigutada kaks pilti kõrvuti või miks võiks vaja minna duotoonfiltrit.

Allpool on iga ploki samm-sammuline jaotus koos seadistustega, mida lühijuhendid ei maini. Ei mingeid pluginaid, ainult sisseehitatud Gutenbergi tööriistad.

💡 Kiirülevaade:

• Lisa üksik pilt plokiga „Pilt" ja seadista joondus tööriistariba kaudu, ühe pildi jaoks on sellest piisavalt
• Paiguta pilt teksti kõrvale plokiga „Meedia ja tekst", see hoiab proportsioone jäigalt, tekst ei kattu
• Pane kaks või enam pilti ritta plokiga „Galerii" ja määra veergude arv, ruudustik joondub automaatselt
• Aseta tekst fotole plokiga „Kaanepilt" koos filtrite, ülekatte ja valikulise parallaks-efektiga
• Luba valguskast ploki „Pilt" seadetes, pilt avaneb täisekraanil ilma lehte uuesti laadimata

Millised Gutenbergi plokid töötavad piltidega

WordPress pakub karbist välja võttes viit piltidega seotud plokki. Igaüks lahendab oma ülesannet, neid ei tohiks segi ajada.

• Pilt (Image), üksik pilt koos joonduse, allkirja, lingi, duotoonfiltri ja valguskasti seadetega. Iga postituse põhiline ehituskivi. Dokumentatsioon
• Galerii (Gallery), mitme pildi ruudustik veergude seadetega. Asendab klassikalisi galeriisid vanast redaktorist ja [gallery] lühikoodi. Dokumentatsioon
• Meedia ja tekst (Media & Text), kaheveeruline plokk: pilt vasakul (või paremal), tekst selle kõrval. Jäik ühendus ilma nihketa, kui resolutsioon muutub. Dokumentatsioon
• Kaanepilt (Cover), taustapilt koos tekstikihi ja nuppudega peal. Saad seadistada värviülekatet, läbipaistmatust ja fikseeritud tausta. Dokumentatsioon
• Fail (File), allalaadimislink koos kaardiga. PDF-juhiste ja arhiivide jaoks, mitte pildi lehel kuvamiseks.

Esimesed neli on sinu peamine arsenal. Plokki „Fail" ei kasutata sisu illustreerimiseks, seega käsitleme allpool ainult visuaalseid plokke.

Kuidas lisada üksikut pilti ja seadistada joondust

Kõige tavalisem stsenaarium: lisa tekstile üks pilt ja kohanda selle asukohta lõikude suhtes.

Klõpsa redaktori liideses nuppu „+" (lisa plokk) ja vali „Pilt". Ilmub üleslaadimise aken, saad lohistada faili arvutist, valida WordPressi meediateegist või kleepida URL-i. Pärast üleslaadimist ilmub pilt kohe redaktorisse ja selle kohale avaneb joondusnuppudega tööriistariba.

Saadaolevad joondusvalikud:

• Joonda vasakule, pilt lükatakse vasakule, tekst murdub paremale
• Joonda keskele, pilt keskele, tekst ülal ja all
• Joonda paremale, vasakjoonduse peegelversioon
• Lai laius, pilt ulatub tekstibloki piiridest välja, kuid mitte täisekraanile
• Täislaius, pilt venib sisuala servast servani

Sinised täpid pildi nurkades võimaldavad lohistades suurust muuta, pole vaja CSS-is piksleid arvutada. Parempoolses külgribal (vahekaart „Plokk") saad seadistada alternatiivteksti SEO jaoks ja lingi, mida kasutajad pildil klõpsates järgivad.

Kaks nõuannet, mis säästavad aega. Esiteks: luba valguskast (valik „Suurenda klõpsamisel" ploki lingiseadetes), klõpsamisel avaneb pilt täisekraanil, kasutaja ei lahku lehelt. Teiseks: duotoonfilter (ringiikoon ploki tööriistaribal) muudab pildi värviskeemi ilma Photoshopita, kasulik, kui erinevatest allikatest pärit ekraanipildid visuaalselt põrkavad. Filter ei muuda lähtefaili meediateegis, saad selle alati lähtestada.

Kuid siin on konks: „joonda vasakule" ja „joonda paremale" töötavad hästi ainult siis, kui tekst on piisavalt pikk. Kui lõik on lühike, „kukub" pilt voost välja ja järgmine pealkiri kattub sellega. Sellistel juhtudel on parem kasutada plokki „Meedia ja tekst".

Plokk „Meedia ja tekst": pilt ja lõik ühes komplektis

Plokk Media & Text fikseerib suhte jäigalt: pool laiusest pildile, pool tekstile. Ei mingit nihkumist ekraani resolutsiooni muutumisel.

Lisatakse samamoodi: nupp „+", otsi „Meedia ja tekst". Vali pilt ja kirjuta tekst kõrvalasuvasse veergu. Külgribal on saadaval järgmised lülitid:

• Vaheta kohad (pilt vasakule või paremale)
• Täisekraanirežiim (venita kogu saadaolevale laiusele)
• Taustavärv teksti poolele

Plokk on eriti mugav samm-sammuliste juhiste jaoks: vasakul seadistuse ekraanipilt, paremal toimuva kirjeldus. Lugeja ei kaota kerimisel teksti ja pildi vahelist seost.

Praktikas aitab Media & Text ka argisemates olukordades. Näiteks lisasid vasakjoondusega ekraanipildi ja järgmine H2 „jooksis pildile otsa". Lõikude struktuuri muutmiseks on liiga hilja, mässi pilt ja tekst Media & Text sisse, probleem kaob 10 sekundiga.

Kuidas paigutada kaks või enam pilti kõrvuti galeriiplokiga

Kui sul on vaja näidata ekraanipiltide seeriat või teha fotokogu, kasuta plokki „Galerii". Erinevalt vanast klassikalisest redaktorist, kus galerii elas eraldi [gallery] lühikoodina, haldab Gutenberg seda visuaalselt.

Lisa plokk „Galerii", laadi vajalikud pildid üles, need paigutuvad automaatselt ruudustikku. Ploki seadetes (parempoolne paneel) vali veergude arv: 2, 3, 4 või rohkem. Kahe kõrvutise pildi jaoks määra „2 veergu", saad korraliku rea ilma käsitsi suuruse reguleerimiseta.

Galeriiploki lisafunktsioonid:

• Pisipiltide kärpimine, kõik pildid viiakse samale suurusele, ruudustik näeb ühtlane välja
• Piltide vahelise vahe seadistamine
• Lingi lisamine igale pildile eraldi

Kui projekt nõuab mittestandardset paigutust (erineva suurusega pildid ühes ruudustikus), ei pruugi sisseehitatud galerii võimalustest piisata. Siis tuleb appi plokk „Veerud" (Columns), mille sisse pesitsetakse eraldi plokid „Pilt" sõltumatute seadetega. Kuid tüüpiliste stsenaariumide jaoks piisab karbist välja tulevatest galeriidest.

Märkus: ära aja plokki „Galerii" segi mitme veergudesse paigutatud plokiga „Pilt". Galerii kärbib pisipilte automaatselt, kõik pildid näevad välja sama kõrged olenemata algsest proportsioonist. Veerud seda kohandust ei tee: üks pilt osutub teisest kõrgemaks ja rida „ujub". Kiire fotokogu jaoks kasuta galeriid, pikslitäpse paigutuse jaoks veerge.

Kuidas asetada tekst pildile plokiga „Kaanepilt"

Plokk „Kaanepilt" on taustapilt koos tekstikihiga. Sisuliselt bänner postituse sees. Kasutatakse artikli osade, tsitaatide või peamiste järelduste vormindamiseks.

Vali plokk „Kaanepilt", laadi pilt üles ja sisesta tekst otse selle peale. Külgribal saad seadistada:

• Ülekatte värv, poolläbipaistev täidis pildi kohal, muudab teksti loetavaks igal taustal
• Läbipaistmatus, ülekatte intensiivsus vaevumärgatavast peaaegu ühtlaseni
• Fikseeritud taust, lehte kerides pilt püsib paigal (parallaks-efekt)
• Tausta kordamine, ploki täitmine korduva mustriga, tekstuuride ja ornamentide jaoks

Fikseeritud taust on populaarne tehnika sihtlehtedel ja WordPressi portfooliodes. Näeb muljetavaldav välja, kuid mobiilseadmetes lülitab brauser selle jõudluse huvides sageli välja. Ära arvesta sellega kui peamise tehnikaga telefonide puhul.

Plokk „Kaanepilt" pesitseb teiste plokkide sees: veergude, gruppide või ridade sees. Ja kaanepildile saad paigutada mitte ainult teksti, vaid ka nupu: lisa ploki „Kaanepilt" sisse plokk „Nupud" ja saad valmis CTA-bänneri koos taustaga. Kõik tööriistad, ei mingit CSS-i ega lisaprogramme.

Kui kaanepilt aeglustab laadimist mobiilis, keela fikseeritud taust ja tihenda pilt 200-250 KB-ni. WordPress alates versioonist 5.8 teisendab PNG ja JPEG üleslaadimisel automaatselt WebP-vormingusse, kuid parem on lähtefail eelnevalt ette valmistada TinyPNG või AVIF-iks teisendamise kaudu.

⁉️🤔 Korduma kippuvad küsimused

Miks tekst „hüppab" ja jookseb pärast pildi lisamist külgnevatesse plokkidesse?

See juhtub siis, kui pilt on joondatud vasakule või paremale ja selle ümber on liiga vähe teksti. Gutenberg ei „toesta" automaatselt ploki kõrgust pildi all, see tugineb ümbritseva teksti mahule. Lahendus: mässi pilt ja tekst plokki „Meedia ja tekst", see hoiab proportsioone jäigalt. Või lisa veel 2-3 rida teksti, et murdumine töötaks õigesti.

Mille poolest erineb plokk „Galerii" mitmest veergudesse paigutatud plokist „Pilt"?

Galerii pakub ühtset ruudustikku automaatse pisipiltide kärpimisega, kõik pildid näevad välja sama suured olenemata algsest proportsioonist. Eraldi piltidega veerud seda kohandust ei tee: üks pilt võib osutuda teisest kõrgemaks ja rida „ujub". Kiire fotokogu jaoks võta galerii, täpse pikslitäpse paigutuse jaoks kasuta veerge.

Kas ma saan lisada alt-teksti mitmele galeriipildile korraga?

Ei, plokk „Galerii" ei toeta alt-tekstide hulgiredigeerimist. Iga pilt galeriis on eraldi meediafail ja alt määratakse individuaalselt: klõpsa galeriis konkreetsel pildil, mine külgribale ja täida väli „Alternatiivtekst". Või kirjuta alt eelnevalt WordPressi meediateeki, siis tõmmatakse see sisestamisel automaatselt.

Plokk „Kaanepilt" aeglustab lehe laadimist mobiilis. Kuidas seda parandada?

Peamine süüdlane on fikseeritud taust (parallaks). Keela ploki seadetes valik „Fikseeritud taust" ja brauser lõpetab kerimise ajal raske efekti renderdamise. Teine samm, tihenda kaanepilt 200-250 KB-ni: teenused nagu TinyPNG või teisendamine WebP/AVIF-vormingusse vähendavad mahtu ilma nähtava kvaliteedikaota. WordPress 5.8+ teisendab PNG ja JPEG üleslaadimisel automaatselt WebP-ks, kuid parem on lähtefail eelnevalt ette valmistada.

Kas plokil „Fail" on mõtet, kui tahan lihtsalt pilti näidata?

Ei. Plokk „Fail" kuvab allalaadimisnuppu ja failinime, mitte pilti ennast. Seda on vaja PDF-juhiste, ZIP-arhiivide, CSV-failide ja muude dokumentide jaoks, mille kasutaja peaks oma seadmesse salvestama. Pildi näitamiseks kasuta alati plokki „Pilt".

Mille poolest erineb Gutenbergi valguskast valguskasti pluginatest nagu FooBox või Meow Lightbox?

Sisseehitatud valguskast (valik „Suurenda klõpsamisel" ploki „Pilt" lingiseadetes) töötab ilma lisakoodita ega lähe teemadega vastuollu, see ilmus WordPress 6.4-s 2023. aasta lõpus. Pluginad pakuvad rohkem seadeid: galerii vaatamine pühkimisega, hämardusefektid, pildiloendur. Kui paigutad 2-3 pilti postituse kohta, piisab sisseehitatust. Fotogaleriide ja portfoolio jaoks paigalda plugin.

Millist plokki oma ülesande jaoks võtta: lühikokkuvõte

Gutenberg katab kõik põhilised piltidega töötamise stsenaariumid ilma ühegi pluginata. Lisa üksik pilt plokiga „Pilt" ja ära unusta alt-teksti, see on sinu peamine SEO-vara Google Images'i jaoks. Luba valguskast: see funktsioon on tasuta ja mobiililugejad tänavad sind.

Vajad jäika „pilt + tekst" komplekti, võta „Meedia ja tekst", see ei lagune ühelgi ekraanil. Pildiseeria, „Galerii" koos veergude seadetega, automaatne kärpimine joondab kõik ritta. Tekst foto peal, „Kaanepilt" koos ülekatte ja valikulise parallaksiga ning sisse saad lisada nupu, et saada CTA-bänner.

Nende nelja ploki valdamine on reaalne 10-15 minutiga testpostituses. Ava mustand, lohista plokke lõuendil ringi, Gutenbergi liides on loodud visuaalseks tööks, mitte koodiks. Kui järgmine postitus tuleb välja piltidega, mitte tekstimüürina, oled juba ees.