Nápověda:Jak pracovat s obrázky
Aby bylo možné obrázek vložit do textu, musí být natažený do úložiště wiki na straně serveru. Tahle stránka je o tom, jak lze již natažený ilustrační obrázek vkládat do obsahu stránky.
Wiki TheWoodcraft.org k tomu používá převážně šablonu {{Image}}, která nabízí víc možností, než samotná MediaWiki. Tato šablona dovoluje místo celého obrázku na stránce použít jen výřez, který se dá škálovat a natočit. Tyhle výřezy se pak dají na stránce různým způsobem kombinovat a výsledkem je plně responzivní obsah stránky, takže výsledek pak vypadá na mobilu stejně jako na počítači.
Abyste mohli plně ocenit možnosti jaké nabízí šablona {{Image}}, je třeba nejprve zmínit, jaká má omezení při vkládání obrázků syntaxe standardní MediaWiki:
- U MediaWiki syntaxe lze velikost vkládaného obrázku nastavit pouze v pixelech
- To je největší omezení a nedostatek standardní mediawiki. Pro větší názornost se podívejte na dokumentaci k šabloně
{{Image}}, kde je na konkrétním příkladu vysvětleno proč to představuje zásadní problém. - Přes standardní MediaWiki syntaxi nelze na stránce použít výřez z obrázku
- Pokud chcete zobrazit pouze malou část z již vloženého obrázku, nemáte jinou možnost, než z něj udělat v externím grafickém editoru výřez a ten pak vložit jako nový obrázek. To sebou pochopitelně nese další datovou režii a navíc žere čas.
Příprava obrázku před natažením do wiki
Z hlediska zachování maximálních detailů, je žádoucí vkládat obrázky do wiki v takové úpravě, aby nedošlo ke ztrátě obrazové informace a zároveň aby nebyl vložený soubor příliš velký. Tzn. před vložením obrázku do wiki je třeba zvážit a realizovat následující operace:
Originální sken obrázku či fotografie
Zdrojový soubor by měl mít zachováno maximum dat, aby z něj bylo možné dělat výřezy, nebo aplikovat filtry při extrakci detailů atp. Takové soubory jsou však z hlediska objemu dat příliš velké a špatně se s nimi pak pracuje:
- generují zbytečně velké datové přenosy, což je nepříjemné obzvláště při slabším mobilním připojení, obzvláště pokud je na ně aplikován nějaký FUP
- stahují se pomalu
- po stažení zabírají hodně místa na mobilním zařízení
- je na nich houby vidět, protože u vygenerovaného náhledu se ztratí detaily a při plném zobrazení zase nestačí plocha displeje.
Takové soubory nemá smysl uploadovat do wiki
Pro takové soubory je na tomto serveru zřízen samostatný adresář – přístupný přes webdav, který má i jeden veřejně přístupný adresář určený pro materiály, které mají být veřejně dostupné ze stránek wiki.
Na takové obrázky se pak odkazuje takto:
… ukázka wiki kódu …
A kdo chce s tímto souborem dále pracovat, tak může získat soubor v maximální digitální kvalitě.
Optimalizace obrázku
Pro použití na stránkách wiki je žádoucí obrázek optimalizovat.
- Používejte výřezy
- je zbytečné uploadovat celou stránku, pokud nás z ní zajímá pouze jeden obrázek
- Rozměry obrázku zmenšujte jen v nejkrajnějším případě
- Přeškálováním obrázku v grafickém editoru nadobro ztratíte detaily. Velikost – mám tím na mysli objem dat, nikoliv rozměry – lze výrazně zmenšit omezením počtu barev (indexace barev). Předtím ale doporučuji obrázek optimalizovat.
- Optimalizace obrázku
- Optimalizací obrázku rozumím: vyrovnání barevné palety, vylepšení obrazové informace úpravou jasu a kontrastu. Aplikaci dalších obrazových filtrů. Černobílou kresbu, naskenovanou barevně či alespoň ve stupních šedi, kupř. vylepšuji tak, že ji po zvětšení na dvojnásobek, upravím tím, že aplikuji gaussovské rozostření obrazu, upravím jak a kontrast a pak ji opět zmenším na původní velikost.
- Indexace barev
- Při indexaci barev se nahradí barevně blízké pixely pixelem jedné barvy, což v konečném důsledku vede k lepší kompresi souboru => menší datový objem. Výsledek lze ovlivnit mnoha faktury – zvoleným počtem barev a nastavenou paletou. U černobílé kresby, která neobsahuje žádný barevný šum lze dosáhnout minimálního datového objemu převodem na bitonální kresbu. U barevných obrázků, ale i černobílé kresby s velkým množstvím datového šumu, dostaneme lepší výsledek použitím optimalizované palety barev (ideálně pro web).
Při optimalizaci, ještě před indexací barev se vyplatí provést ořezání a retušování hluchých ploch – obzvláště, pokud nám jde primárně o tištěný text, nebo černobílou perokresbu. U fotografií a maleb to nemá smysl. Retušovat lze (u bílého pozadí) plošným vymazáním skvrn a černých okrajů. Rozmazáním skvrny do plochy štětcem. Nebo naklonováním vzorku podobné plochy na místo skvrny.Tok textu
Pro to, abychom věděli kam vložit obrázek, je důležité porozumět tomu, jak prohlížeč v rámci HTML stránky s obrázky a textem pracuje.
U knižní sazby je plocha na kterou se má vejít obsah předem daná. Umístění a rozměry obrázků tak určuje z velikost stránek a jejich počet. U webové stránky je daný pouze výchozí bod – levý horní roh. Výška (či také délka stránky) pak vychází z mnoha dalších faktorů, které tvůrce obsahu může ovlivnit jen v omezené míře:
- množství textu na stránce
- šířky okna webového prohlížeče
- použitou velikostí písma, atd.
Webový prohlížeč, při zpracování obsah pracuje se dvěma typy elementů:
- Blokové elementy – pracují s nastavením výšky a šířky. Sem patří obrázky, které mají danou výšku i šířku.
- Řádkové elementy – přes které se řeší vizuální podoba textu, to nepotřebují, jelikož vycházejí ze zvolené velikosti písma.
Rozměry obrázků, mohou být nastaveny dvěma způsoby:
- v pixelech (standarní wiki syntaxe)
- v procentech (přes šablonu
{{Images}}
Je-li nastavena velikost obrázku v pixelech, záleží výsledek zobrazení stránky na rozlišení displeje klientského zařízení. Zatím co u mobilního telefonu se obrázek na stránku nemusí vejít, na monitorech s vysokým rozlišením může být pro změnu moc malý.
Při procentuálně nastavené velikosti obrázku se jeho velikost dynamicky mění vůči aktuální šířce stránky. Tzn. je-li šířka obrázku nastavena na 30%, bude jeho šířka v poměru šířce okna prohlížeče stále 30% bez ohledu na použité zařízení.
Vložení obrázku
V obou výše uvedených případech se ale bude měnit horizontální umístění obrázku na stránce. Proto je třeba obrázky vkládat tak, aby se zobrazovaly pokud možno poblíž textu, který mají ilustrovat.
Pokud to není možné – např. v situaci, kdy by za sebou následovalo víc obrázků najednou, je třeba obrázek vložit tak, aby se odpovídající popisek na stránce přesouval i s ním. A to lze vyřešit právě pomocí šablony {{block}}, která vytvoří blokový element, u něhož se dá nastavit procentuálně šířka vůči stránce, tak jako u obrázku.
, stejně jako obrázek se sice nemá nastavenou výšku. Teda, ne že by to nešlo, ale je nutné si uvědomit, že se s obsahem pracuje, jako by šlo o webovou stránku ve stránce. Pokud bychom nastavili pevnou výšku, tak by se při změně šíře okna prohlížeče obsah buď nezobrazil, nebo "vylil" z vymezeného bloku ven.
Použití standardní syntaxe MediaWiki pro vložení obrázku
Standardní syntaxi MediaWiki můžete použít pro vložení obrázku, pokud pro vás není důležité, aby se ilustrační obrázek na stránce zobrazoval responzivně. Stejným způsobem se vkládají obrázky do stránek i na Wikipedii.
Syntaxe je podobná jako u odkazu, jen s tím rozdílem, že před úplným názvem souboru (tj. včetně přípony) musí být uvedeno, také že patří do jmenného prostoru Soubor. Podobně, jako když se přidává kategorie. Viz níže:
[[Soubor:worker.svg]]
Obrázek jako aktivní link na jinou stránku
Možná jste si povšimli, že vložený obrázek je zároveň aktivní jako link na stránku s vloženým souborem. Pokud nechcete, aby obrázek fungoval zároveň jako aktivní odkaz na vložený soubor, můžete potlačit tohle výchozí chování prázdným parametrem link, kterým se lze jinak nastavit jiný cíl odkazu, než je původní soubor s obrázkem.
[[Soubor:worker.svg|link=]]
Obsahuje-li parametr link název jiné stránky, funguje obrázek jako hyperlink na jinou stránku. Následující ukázkový příklad funguje jako hyperlink na stránku Nápověda:Obsah
[[Soubor:worker.svg|link=Nápověda:Obsah]]
Má-li fungovat jako hyperlink obrázek vkládaný přes šablonu {{Image}} musí být naopak umístěn jako popisek příslušného odkazu. Toto je kód vloženého obrázku, který vede, stejně jako u předchozího ukázkového příkladu na stránku Nápověda:Obsah.
[[Nápověda:Obsah|{{Image|worker.svg|5|right|Odkaz na nápovědu}}]]
Úprava velikosti vloženého obrázku
Není-li při vložení obrázku uveden žádný další upřesňující parametr, kterým by byly upraveny rozměry, vygeneruje se obrázek výchozích rozměrů. To však - obzvláště v případě svg obrázků - nemusí být zrovna optimální, proto zde existuje možnost upravit tyto rozměry prostřednictvím parametrů.
Jako klíčový rozměr lze použít buď šířku..
[[Soubor:worker.svg|100px]]
..nebo výšku.
[[Soubor:worker.svg|x100px]]
Nebo, pokud chceme kupř. na jedné stránce zkombinovat více obrázků, které mají jiný poměr stran můžeme upravit rozměry oba.
[[Soubor:worker.svg|30x40px]]
U obrázků vkládaných přes šablonu {{Image}} se vždy nastavuje procentuální velikost, která se počítá vůči nadřazenému blokovému prvku. Pokud není uveden parametr width, použije se výchozí velikost obrázku. Jeho použití dává smysl, kromě výřezů, u velkých obrázků aby se netahalo po síti zbytečně velké množství dat.
{{Image|worker.svg|5|right}}
Použití náhledu
Je-li obrázek velký, nebo by jeho umístění v textu bylo na úkor srozumitelnosti, lze použít náhled, který funguje zároveň i jako odkaz na obrázek v plné velikosti. Stačí přidat parametr thumb. Není-li uvedeno jinak, tak se náhled generuje z cílového obrázku a jeho výchozí velikost, která je daná uživatelským nastavením wiki, bude taková, aby se vešel do čtverce o straně 220px.
Tuto výchozí velikost generovaného náhledu lze přenastavit stejným způsobem, jako když se mění velikost obrázku vkládaného do stránky.
[[Soubor:Nuvola apps important.svg|thumb|30px]]
Zarovnání náhledu
Výchozí umístění náhledového obrázku je při pravém okraji stránky. To lze změnit uvedením parametru center, left, případně none. Parametr none zarovná obrázek k levému okraji, stejně jako left, ovšem s tím rozdílem že text pak obrázek neobtéká.
[[Soubor:worker.svg|thumb|center]]
Popis náhledu
[[Soubor:worker.svg|thumb|none|Náhled obrázku umístěný nalevo]]
Použití jiného náhledu
|
Jako náhledový obrázek se dá použít i jiný obrázek, ovšem je třeba mít na paměti, že náhledový obrázek sám o sobě bude fungovat jako hyperlink, kdežto na původní obrázek bude mít link pouze ikona pro zvětšení obrázku. Viz níže uvedená ukázka.. |
[[Soubor:Nuvola apps important.svg|thumb=worker.svg]]
Umístění obrázku
Pozicování vůči obsahu
[[Soubor:worker.svg]]
[[Soubor:worker.svg]]
[[Soubor:worker.svg]]
[[Soubor:worker.svg]]
[[Soubor:worker.svg]]
[[Soubor:worker.svg]]
[[Soubor:worker.svg|]]
Pokročilá práce s obrázky s využitím šablony {{Image}}
Jak už bylo zmíněno výše, vkládání obrázků přes standardní wiki syntaxi má několik zásadních nedostatků:
- Není-li řečeno jinak, je obrázek do stránky vložen v plném rozlišení
- Rozměry vloženého obrázku lze měnit pouze nastavením v pixelech, což má tu nevýhodu, že zůstávají stejné bez ohledu na responzivní styl stránky.
- Z obrázku či stránky generované přes rozšíření Prooreadpage nelze udělat výřez.
Povolení použití html elementu img
Aby bylo možné šablonu {{Image}} proužívat, musí být v konfiguračním souboru LocalSettings.php povoleno použití standardního html elementu img
… $wgAllowImageTag = true ; …
thumb.php operativně vygenerován z původního zdroje, který je do ní vložen.Vkládání obrázků se pak nemusí dělat přes wikisyntaxi. Pokud je obrázek vložen do wiki lze využít takzvané magic word, kterým se vytáhne cesta k uploadovanému originálu a dál nastavit parametry jako u klasického HTML tagu:
<img src="{{filepath:obrázek.jpg|85}}">
Máme-li obrázek dostupný přes URL, můžeme použít i cestu k originálnímu digitálnímu souboru, která by vypadala takto:
<img src="https://www.thewoodcraft.org/wiki/obrázek.jpg">
Ovšem to se nedoporučuje, protože by to mohlo některé škodiče svádět k tomu aby zbytečným stahováním souborů co mají velikost v řádech megabajt zbytečně blokovali konektivitu serveru.
Použití šablony {{Image}} je v tomto směri mnohem ohleduplnější, protože se na stránce nepracuje s originálním uploadovaným souborem, ale náhledem vygenerovaným z obrázku či stránky souboru vloženého do wiki. Pokud se jeho rozměry nemění, nemá engine MediaWiki ho generovat znovu – k dalšímu zpracování, které probíhá v rámci serveru ještě před odesláním výsledku na klientský stroj, použije již hotový soubor.
|
|
Zcela zásadní je PHP skript crop.php. Bez něj šablona {{Image}}, tak jak je implementovaná zde fungovat nebude.
|
Kam se ukládají vygenerované náhledy?
Jak už bylo zmíněno, velikost obrázku lze škálovat při vkládání přes wikisyntaxi nastavením rozměru v pixelech. Pixel, neboli obrazový bod, je tzv. absolutní hodnota. Velikost obrázku na obrazovce, dipleji či monitoru je tak daná jeho rozlišením. Čím je vyšší, tím bude obrázek při zobrazení menší.
Při použití šablony {{Image}} na tom nezáleží, protože se rozměr obrázku na obrazovce nastavuje procentuálně – bez ohledu na to jaký má rozměr v pixelech má vůči stránce velikost pokaždé stejnou. Ovšem rozdíl mezi roztaženým malým a velkým obrázkem pozná i laik. Nicméně v tomto případě máme tu výhodu, že si můžeme svobodně zvolit zda-li je pro nás důležitý detail, nebo obrázek jako takový.
Na základě šířky, jakou si zvolíme, systém vygeneruje z vloženého originálu náhled, který se ukládá k originálu do speciálního podadresáře thumbs. Jeho jméno i cesta jsou pak identické s cestou k originálu obrázku, ovšem před jménem náhledu je vždy umístěn řetězec s udanou velikostí.
|
|
Při uploadu souboru obraz.jpg se nepočítá kontrolní md5 součet ze souboru, ale jeho budoucího názvu! Takže pokud chcete zvolit název obrázek.jpg, bude vypočítaný kontrolní md5 součet vypadat takto:
# echo -n "obrázek.jpg" | md5sum
cdd8847f362beee5bd4192e6e054ee5f -
Pro cestu k uložení se z něj použijí první dva znaky. Tzn. že v tomto případě bude soubor Pokud nahrajete jako novou verzi jiný soubor, zůstane jméno i cesta k souboru beze změny! |
Náhledy uploadovaného souboru se ale budou generovat jinam – do adresáře c/cd/obrázek.jpg/ a jejich název bude začínat vždy velikostí v pixelech (včetně uvedené jednotky), následovanou pomlčkou a názvem originálního souboru. Např. pro náhled o velikosti 80px bude jméno obrázku s náhledem 80px-obrázek.jpgDynamické škálování
Při dynamických změnách velikosti obrázku, které by realizovala MediaWiki by docházelo k neustálému generování nových a nových náhledů – v závislosti na tom, jakou velikost okna webového prohlížeče by měl zrovna klient nastavenou. Nejspíš to bude ten důvod, proč se u MediaWiki nepoužívá procentuální nastavení velikosti obrázku. Nicméně přes šablonu {{Image}}, která generuje náhledy zprostředkovaně přes crop.php se to dá obejít! A protože skript crop.php je na stejném stroji jako thumb.php, máme v ruce nástroj, jak snadno a rychle odhalit ty, co záměrně náš server zatěžují generováním náhledů.
Použití {{Image}} (především u fotografií) může opět znamenat významné snížení objemu dat, které se přenáší ze serveru na stranu klienta, protože se místo výchozího obrázku přenáší jen vygenerovaný náhled originálu který se procentuálně přeškáluje webovým prohlížečem na straně klientské aplikace, vůči aktuální velikosti okna, aniž by se kvůli tomu pokaždé generoval nový náhled či došlo k rozhození umístění obrázků vložených na stránce.
Použití výřezu
Šablona {{Image}} víceméně kopíruje možnosti původní wiki syntaxe. Více viz její dokumentace.
