Nápověda:Jak pracovat s obrázky

Z thewoodcraft.org

Šablona:Přejít na

Přehled nápovědy
Editace obsahu
Pro thewoodcraft.org
Knihy
Systém wiki
Zabezpečení stránek
Zásady

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:

Příklad
[[Soubor:worker.svg]]

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í..

Příklad
[[Soubor:worker.svg|link=]]

worker.svg

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..

Příklad
[[Soubor:worker.svg|link=Nápověda:Obsah]]

worker.svg

Ú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..

Příklad
[[Soubor:worker.svg|100px]]

worker.svg

..nebo výšku.

Příklad
[[Soubor:worker.svg|x100px]]

worker.svg

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.

Příklad
[[Soubor:worker.svg|30x40px]]

worker.svg

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.

Příklad
[[Soubor:Nuvola apps important.svg|thumb|30px]]
Nuvola apps important.svg

Použití jiného náhledu

Upozornění 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..
Příklad
[[Soubor:Nuvola apps important.svg|thumb=worker.svg]]
Nuvola apps important.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á.

Příklad
[[Soubor:worker.svg|thumb|center]]
worker.svg

Popis náhledu

Příklad
[[Soubor:worker.svg|thumb|none|Náhled obrázku umístěný nalevo]]
Náhled obrázku umístěný nalevo

Umístění obrázku

Pozicování vůči obsahu

Příklad
[[Soubor:worker.svg]]
[[Soubor:worker.svg]]
[[Soubor:worker.svg]]

worker.svg worker.svg worker.svg

Příklad
[[Soubor:worker.svg]]

[[Soubor:worker.svg]]

[[Soubor:worker.svg]]

worker.svg

worker.svg

worker.svg


Příklad
[[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).
PoznámkaPř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.

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 ;
…
Standardně to u MediaWiki povoleno není, protože by tak mohli do wiki uživatelé vkládat i obrázky ze kteréhokoliv jiného webu. To by jednak mohlo vést k diskreditaci ze strany trollujících uživatelů (vkládání nežádoucí reklamy, obscénních obrázků, aj.), ale hlavně se tím taková wiki stane závoslou na externích datových zdrojích a nebude jednoduše přenositelná.
U wiki, kterou nemohou editovat nepřihlášení (a neprověření) uživatelé, jako je např. tato je riziko takového chování minimální – trollujícího uživatele lze zablokovat. A pokud uživatel využívá šablonu Parameter missing! výsledný kód na statickém URL závislý není, protože pokud náhled o zvolené velikosti k dispozici není, je skriptem 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.

Upozornění 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říkladPři uploadu obrázku 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.

Skládání obtékaných obrázků z výřezů na stránce