Predložak:Skaliranje slike
Uvod
[uredi kôd]Na Wikipediji se obeshrabruje korišćenje apsolutnih jedinica za veličinu slika. Međutim, u Mediawiki softveru parametar za veličinu slike može se iskazati samo apsolutnom jedinicom px, na primjer [[Datoteka:primjer.jpg|220px]], sve ostale jedinice nemaju nikakav učinak.
Među relativnim jedinicama nalaze se i jedinice vw, vh, vmin i vmax koje predstavljaju 1 % širine ili visine viewporta.
Predložak skalira (odnosno povećava ili smanjuje) sliku prema širini viewporta rabeći jedinicu vw.
Uporaba
[uredi kôd]{{skaliranje slike|slika|veličina|ravnanje}}
Parametri su neimenovani, što znači da se navodi samo vrijednost.
- slika - navodi se samo ime, bez datoteka:, npr. primjer.jpg. Ovaj parametar mora se navesti.
- veličina - je postotak (broj jedinica vw), navodi se samo broj, koji može biti i decimalni, ali s decimalnom točkom umjesto zareza, npr. 34.5 (iako za tim nema realne potrebe, jednostavno treba odbaciti decimalni dio). Ako je broj negativan, slika će biti u punoj širini. Ako se parametar izostavi (vidjeti napomenu), podrazumijevana veličina je 50 %, ali mu se mora zadržati pozicija, npr. {{skaliranje slike|primjer.jpg||lijevo}}. Iako u principu nema ograničenja, za najveću vrijednost pogledati donje napomene.
- ravnanje - dopuštene vrijednosti su lijevo, sredina, desno. Ako se parametar izostavi, slika će biti na sredini (centrirana). Ako se kao parametar navede inline, slika će se prikazati u liniji teksta (pogledati primjer).
Napomene i ograničenja
[uredi kôd]Viewport (pojednostavljeno) predstavlja širinu prozora preglednika. Stranice na Wikipediji slijeva imaju fiksni okvir (sidebar) koji je kod sučelja monobook širine 175px, a kod sučelja vector 180px. Dodatno, s obje strane "članka" su margine po 15px na sučelju monobook i po 25px na sučelju vector. Na širini prozora od 1024px (osnovna vrijednost*) "aktivna" širina je 1024px - 205px = 819px na sučelju monobook i 1024px - 230px = 794px na sučelju vector. (* Izračun se vrši na 1024px iako širina prozora može biti mnogo veća.)
- Prema navedenom, preporučene najveće vrijednosti za skaliranje su 818 / 1024 = 0,799 tj. 79.9 na sučelju monobook i 794 / 1024 = 0,775 tj. 77.5 na sučelju vector. Veće skaliranje povećava širinu stranice (slika izlazi udesno, pa se mora skrolati).
- Predložak ne povećava slike, odnosno ako je slika na poslužitelju mala, predložak će je prikazati do njene najveće širine. Na primjer, ako je na poslužitelju slika primjer.jpg širine 355px, {{skaliranje slike|primjer.jpg|200}} prikazat će širinu 355px, a neće je udvostručiti.
- Ravnanje ne funkcionira kod užih slika ako je skaliranje veće od širine slike. Najveća vrijednost skaliranja može se odrediti formulom veličina / 1024, za navedeni primjer bilo bi 355 / 1024 = 0,346, odnosno {{skaliranje slike|primjer.jpg|34.6|ravnanje}}. Kao veličina za slike u SVG formatu uzima se nominalna širina.
- Ako se predložak koristi u kontejneru (npr. <div>...</div>) mora se navesti parametar veličina, inače će slika biti širine prozora preglednika, pomaknuta udesno za širinu sidebara.
Primjeri
[uredi kôd]Za djelovanje primjera povećajte ili smanjite širinu prozora preglednika.
Slika male širine
[uredi kôd]Ravnanje je ispravno do granične vrijednosti (34,6 po gornjem izračunu): {{skaliranje slike|primjer.jpg|30}}
Odstupanje ravnanja kod prevelikog skaliranja: {{skaliranje slike|primjer.jpg|60}}
Ravnanje lijevo
[uredi kôd]{{skaliranje slike|Rovinj by night.jpg|50|lijevo}}
Ravnanje desno
[uredi kôd]{{skaliranje slike|Rovinj by night.jpg|50|desno}}
Usporedba veličine skaliranja
[uredi kôd]{{skaliranje slike|Rovinj by night.jpg|10}}
{{skaliranje slike|Rovinj by night.jpg|30}}
{{skaliranje slike|Rovinj by night.jpg|50}}
{{skaliranje slike|Rovinj by night.jpg|70}}
Puna širina
[uredi kôd]Puna širina dobije se ako se navede bilo koji negativan broj: {{skaliranje slike|Rovinj by night.jpg|-1}}
Preveliko skaliranje
[uredi kôd]Primjer je izostavljen jer se neće rabiti u praksi, a narušio bi izgled predloška, ali ga možete probati na svojoj SZV:
- {{skaliranje slike|Rovinj by night.jpg|100}} - slika izlazi na desno za vrijednost sidebara.
Skaliranje teksta i slike
[uredi kôd]Parametrom inline slika se može umetnuti u red teksta. U ovom primjeru se promjenom veličine viewporta mijenjaju veličina i slike i teksta.
- <div style="font-family:Arial; font-size: 1.3vw; ">Ova se sličica {{skaliranje slike|Hr logo c.png|2|inline}} koristi kao logo Wikipedije na hrvatskome jeziku. </div>
- Da vidite djelovanje ovog primjera povećajte ili smanjite širinu vašeg preglednika.