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.
I když standardní MediaWiki má široké možnosti pro práci s obrázky, které si vysvětlíme v první části manuálu, nemá ani zdaleka tak sofistikované možnosti jako wiki TheWoodcraft.org, kde se pro vkládání ilustračních obrázků používá šablona {{Image}}
.
Omezení standardní MediaWiki ohledně vkládání obrázků
Jak si ukážeme v druhé části tohoto manuálu, lze v této wiki pomocí šablony {{Image}}
realizovat téměř nemožné. Nejenom že lze z obrázku udělat výřez, který lze natočit. Obrázky se dají kombinovat a výsledek je plně responzivní, takže výsledná stránka pak vypadá na mobilu stejně jako na počítači.
Abyste mohli plně ocenit možnosti jaké mají uživatelé této wiki, je třeba uvést, jaká omezení ohledně obrázků standardní MediaWiki má:
- Velikost vkládaného obrázku lze 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. - U standardní MediaWiki nelze na stránce zobrazit výřez z vloženého 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ší datou režii a navíc žere čas.
Práce s obrázky dle standardní MediaWiki
Šablona {{Image}}
je specifická pro tuto wiki a pochopitelně pokud editoru stránky nezáleží na tom, jakým způsobem se zobrazí, může klidně použít standardní syntaxi tak, jak se používá kupř. na Wikipedii.
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|]]
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).
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í.
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" Dynamické š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.