Postavke usklađivanja slike WordPressa – objašnjeno!

Predmet poravnanja slika je onaj koji WordPress novorođenčadi obično pogrešno shvaća. Kada dodate sliku svom sadržaju (bilo u postovima ili na stranicama), WordPress vam nudi četiri zadana načina za poravnanje navedene slike: poravnati “Lijevo”, poravnati “Središte”, poravnati “Desno” i poravnati “Nema” *.


Pogledajmo svako od njih zauzvrat:

1. Poravnajte lijevo

Slika kojoj je dodijeljeno poravnanje ulijevo efektivno će se gurnuti s lijeve strane dijela stranice unutar koje sjedi (poput lijeve granice vašeg WordPress posta sadržaja stranice), a bilo koji drugi sadržaj (poput teksta) omotajte se oko ostale tri njegove granice – ispunjavajući područje desno od mjesta na kojem se nalazi slika.

Primjer:

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Poravnajte lijevo Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Izvrsni sint occaecat cupidatat non proident, sunt in culpa qui officiala deserunt mollit anim id est Laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minimal veniam, quis nostrud Exeritation ullamco Laboris nisi ut aliquip ex ea commodo posljedično. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

2. Usklađivanje središta

Ako želite da se slika centralizira unutar dijela stranice unutar koje sjedi (tj. S jednakim razmakom između ruba područja sadržaja i njegove lijeve i desne granice), odaberite “Središnje” poravnanje. Za razliku od gore spomenutog poravnanja s lijeve strane, bilo koji susjedni sadržaj (poput teksta) neće se omotavati oko slike – već će biti postavljen iznad ili ispod slike (ovisno o tome u kojem je tekstu odabran za umetanje rečena slika).

Primjer:

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Poravnati centar Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Izvrsni sint occaecat cupidatat non proident, sunt in culpa qui officiala deserunt mollit anim id est Laborum.

3. Poravnajte udesno

Desno poravnavanje slike je, kao što ste i očekivali, u velikoj mjeri točan preokret lijeve strane poravnanja slike – slika će biti gurnuta udesno od dijela stranice unutar kojeg sjedi (tj. Desna granica vašeg WordPress objava sadržaja stranice) i bilo koji drugi sadržaj (poput teksta, itd.) Omotavat će se oko ostala tri obruba: na taj način ispunjava područje s lijeve strane.

Primjer:

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ispravno poravnana slika Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Izvrsni sint occaecat cupidatat non proident, sunt in culpa qui officiala deserunt mollit anim id est Laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minimal veniam, quis nostrud Exeritation ullamco Laboris nisi ut aliquip ex ea commodo posljedično. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

4. Poravnaj nijednog

Slike koje im nisu dodijeljene poravnanja (dodijelivši im poravnanje ‘Ništa’) sjede točno na mjestu na koje ih locirate – tj. Ako odlučite pozicionirati sliku dodijeljenu poravnanju ‘Ništa’ u stavu teksta (vidi sljedeći primjer u nastavku), postaviće se linijski s tim tekstom, što će rezultirati time da tekst bude s lijeve i desne strane slike (pod pretpostavkom da slika nije iste širine – ili šire – od područja u kojem sjedi **). Međutim, zbunjujuće, slika kojoj je BOTH dodijeljeno poravnanje ‘None’ i nalazi se unutar vlastitog stavka (tj. Na novom retku u WordPress uređivaču i / ili posebno unutar HTML ‘p’ oznake) bit će smještena na lijevoj strani područja unutar kojeg boravi (na sličan način kao da je ostavljen poravnat), ali bez ikakvog teksta s desne strane. Zašto? Budući da slika nema određeno usklađivanje (ili, tehnički gledano: nema posebnog lijevog ili desnog “plutanja”) koja sjedi unutar svog vlastitog stavka (bez ostalih elemenata u istom odlomku) bit će odvojena od oba prethodna i slijedite sadržaj linijama unaprijed definiranog bijelog prostora – na gotovo jednak način na koji će to činiti bilo koji drugi odlomak!

Primjer:

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Poravnaj nijednog Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Izvrsni sint occaecat cupidatat non proident, sunt in culpa qui officiala deserunt mollit anim id est Laborum.

Što se zapravo događa ovdje?

Zašto se sve to događa? To je zapravo zbog računalnog jezika koji se koristi za izražavanje prezentacije (izgleda, dimenzija, boja itd.) Web elemenata, poznatih kao kaskadni listovi stila – ili ukratko „CSS“. U osnovi, na primjer, svaki put kada dodijelite, recimo, lijevo poravnavanje slici u postu ili stranici, na primjer, WordPress dodaje naziv HTML klase „alignleft” navedenoj slici, što zatim učinkovito prisiljava sliku da referencira određeni skup unaprijed definiranih CSS naredbi koje govore gdje treba sjediti na stranici – jednostavno! Slično tome, za svako spomenuto poravnavanje, WordPress dodjeljuje drugačija imena klase – kao što su ‘poravnanje’ (za slike u središnjem poravnanju), ‘poravnanje’ (za slike koje su poravnane desno) i ‘poravnanje’ (za slike koje su da mu nije dodijeljeno određeno poravnanje) – da se svaki referenca odnosi na različite CSS naredbe.

Nažalost (ideja) o omotavanju glave oko svijeta CSS naredbi prosječnom korisniku WordPress-a može biti malo zastrašujuća; međutim, ako imate interes saznati više o njima, brzo će vam omogućiti da dobijete potpuno novi stupanj slobode kada je u pitanju oblikovanje vašeg sadržaja – ili čak cijele vaše web stranice! Ako ste zainteresirani za učenje, pogledajte naš prethodni post o tome gdje je najbolje započeti učenje CSS-a na mreži – ili, jednostavno, prijeđite na dobar Google i idite divlji! )

Sažetak

Dakle, tu je: objašnjenje usklađivanja slike! Ukratko: koristite poravnanje ulijevo kad želite da slika sjedi lijevo, a ostale elemente (poput teksta itd.) Da biste je omotali s desne strane; koristite središnje poravnanje kada želite da slika sjedi u sredini / u središtu vašeg sadržaja, a da na bilo kojoj strani nije bilo drugih elemenata; koristite poravnavanje u desno kad želite da slika sjedi desno, a druge susjedne web elemente da biste je omotali s lijeve strane; i koristite poravnanje s ‘none’ ako želite da vaša slika sjedi točno tamo gdje želite da je postavite u odnosu na susjedne elemente (tj. tekst itd.) – I na kraju, ako želite da se slika nalazi s lijeve strane sadržaja -u području u kojem se nalazi, ali ne želite da se bilo koji tekst itd. pojavljuje s desne strane, dodijelite slici poravnanje s „nijedno“ i osigurajte da sjedi u svom privatnom stavu!

* putem padajućeg izbornika koji se nalazi u donjem desnom kutu prozora WordPressa “Media Library”, ispod podnaslova “Prilozi postavki prikaza”.

** u tom slučaju tekst koji bi inače sjedio na obje strane neće imati nigdje drugo osim iznad ili ispod slike – imajte na umu da takvi slučajevi često mogu dovesti do zbrke između sva četiri poravnanja, jer nema mjesta za bilo koju drugu teksta / elemenata s obje strane slike, to u osnovi neće značiti koje poravnanje odlučite koristiti!

Koristan?

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me