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, což se dělá úplně stejně jako u každého jiného souboru viz - Nápověda:Jak vkládat do wiki soubory
Základní operace s obrázky
Vložení obrázku do stránky
Syntaxe pro vložení obrázku do obsahu stránky je podobná jako u odkazu, jen s tím rozdílem, že před jeho úplným názvem (tj. včetně přípony) musí být uvedeno, že patří do jmenného prostoru Soubor
, podobně, jako když se přidává kategorie. Viz níže:
[[Soubor:worker.svg]]
Obrázek jako odkaz na jinou stránku
Možná jste si povšimli, že vložený obrázek je zároveň aktivní jako link, a odkazuje na stránku s vloženým souborem. Pokud nechcete, aby obrázek fungoval zároveň jako aktivní odkaz, tak můžete obejít toto výchozí chování prázdným parametrem link
, kterým se jinak nastavuje jiný cíl odkazu, než původní soubor s obrázkem.
Můžete si to vyzkoušet klikem na obrázek vložený v rámci předchozího odstavce a ten následující..
[[Soubor:worker.svg|link=]]
Obsahuje-li parametr název jiné stránky, tak může obrázek fungovat jako hyperlink na jinou stránku. Toho je využito kupř. u šablony next. Následující příklad funguje jako hyperlink na Nápovědu..
[[Soubor:worker.svg|link=Nápověda:Obsah]]
Ú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]]
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]]
Použití jiného náhledu
[[Soubor:Nuvola apps important.svg|thumb=worker.svg]]
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]]
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
Vkládání obrázků přes 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í
- u vloženého obrázku lze velikost změnit – Bohužel pouze nastavením velikosti v pixelech. To má tu nevýhodu, že velikost vloženého obrázku zůstává stejná bez ohledu na responzivní nastavení stránky.
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 …
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).
Umístění obrázku
Jak už bylo zmíněno, velikost obrázku lze škálovat při vkládání přes wikisyntaxi pouze nastavením rozměru v pixelech.
Systém pak pro takový obrázek generuje z vloženého originálu (neplést s digitálním originálem!) náhled udané velikosti, který je uložen ve speciálním adresáři k obrázku v podadresáři thumbs, je 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í.
obraz.jpg
pod názvem obrázek.jpg
se z budoucího jména obrázku spočítá kontrolní md5 součet:
# echo -n "obrázek.jpg" Při dynamických změnách velikosti obrázku by docházelo k neustálému generování nových a nových náhledů – v závislosti na tom, jak by měl zrovna nastavenou velikost okna klient. Nejspíš proto se u mediawiki nepoužívá procentuální nastavení velikosti obrázku. Existuje ale způsob jak to obejít!
Dynamické škálování
Stačí v konfiguračním souboru LocalSettings.php
povolit použití standardního html elementu img
… $wgAllowImageTag = true ; …
Vložení obrázku se pak neprovádí přímo přes wikisyntaxi – ideální je vytvořit vlastní šablonu, jako je {{Image}}
. Základem je použití takzvaného magic word, kterým se vytáhne cesta k uploadovanému originálu:
<img src="{{filepath:obrázek.jpg|85}}">
Pochopitelně bychom mohli 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 za určitých okolností může vést k tomu, že by si tak každý návštěvník stránky k sobě zbytečně stahoval soubory které mají velikost až několika megabajt.
Použití šablony {{Image}}
je mnohem ohleduplnější, protože se na stránce nepracuje s originálním uploadovaným souborem, ale s obrázkem vloženým do wiki.
Navíc je možné místo něj (především u fotografií) použít místo výchozího obrázku vygenerovaný náhled procentuálně zmenšeného originálu. Což může opět znamenat významné snížení objemu dat, které se přenáší ze serveru na stranu klienta.
Takto vložené obrázky jsou procentuálně škálovány webovým prohlížečem na straně klientské aplikace, vůči aktuální velikosti okna, aniž by se kvůli tomu generoval nový náhled či došlo k rozhození umístění obrázků vložených na stránce.
Šablona {{Image}}
víceméně kopíruje možnosti původní wiki syntaxe. Více viz její dokumentace.