Jak pracovat s obrázky

Z thewoodcraft.org
Stránka byla naposledy editována ..

U této wiki se při vkládání obrázků kromě standardní wiki syntaxe využívá šablona {{Images}}. Ta umožňuje vkládat obrázky s procentuálně nastavenou velikostí. Původní kód z léta 2018 byl zhruba po dvou letech rozšířen tak, že u této wiki je možné vložit výřez z obrázku a v případně potřeby ho také otočit. Šablonu {{Images}} lze aplikovat na libovolný obrázek či náhled DjVu stránky v rámci této wiki. Díky tomu lze vkládat do wiki i obrázky obtékané textem, aniž by je bylo nutné předem upravit v grafickém editoru.

A pomocí šablony {{block}}, která ještě víc rozšiřuje možnosti pozicování obrázku či textového bloku na stránce, k nim lze snadno přidat popisek, se kterým lze dál pracovat.

Vkládání obrázků přes {{Images}} je velmi podobné běžné wiki syntaxi, které je dost podrobně popsané ve zdejší nápovědě, ovšem pro dobrý výsledek je důležité porozumět tomu, jak prohlížeč v rámci HTML stránky s obrázky a textem pracuje.

Tok textu

U knižní sazby se pracuje s pevně daným rámcem, jehož umístění a rozměry vychází z rozměru stránky a jejich počtu. Plocha, vymezená obsahu je tedy předem daná.

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.