====== Práce s obrázky a médii ======

https://www.dokuwiki.org/images

Do stránek [[dokuwiki|DokuWiki]] můžete nahrávat a vkládat soubory pomocí [[wiki:syntax#images_and_other_files|syntaxe pro obrázky]]. Zatímco obrázky, zvuková a [[doku>video]] média se [[wiki:syntax#supported_media_formats|zobrazují přímo]] na stránce, na ostatní soubory (např. PDF dokumenty) se pouze odkazuje. Podrobnosti najdete v sekci [[mime]].

===== Nahrávání =====

{{:dokuwiki:mediamanager.png?200 |Vyskakovací okno správce médií}}

Nahrávání nových souborů se provádí pomocí [[media-manager|vyskakovacího správce médií]], který se otevře tlačítkem {{https://www.dokuwiki.org/lib/images/toolbar/image.png}} na [[toolbar|panelu nástrojů liště]] [[edit-window|okna úpravy]].

Pro nahrání souboru stačí použít formulář v pravém horním rohu. Volitelně můžete zadat nový název souboru. Ujistěte se, že přípona souboru zůstane správná! Pokud v názvu použijete nové [[namespaces|jmenné prostory]], pak budou automaticky vytvořeny.

[[fullscreen-mediamanager|Správce médií na celé obrazovce]] umožňuje také nahrávat obrázky a [[doku>video|videa]]. Navíc zobrazuje revize médií a umožňuje upravovat metadata obrázků.

Poznámka: Pokud administrátor povolil [[acl]], nahrávání může být omezeno na určité uživatele. Uživatelé bez odpovídajících oprávnění formulář pro nahrávání neuvidí.

===== Vkládání =====

Pro vložení média použijte „dvojité složené závorky“ ''{{}}''

  {{wiki:dokuwiki-128.png}}
  {{wiki:text2html.rc}}

Obrázek {{wiki:dokuwiki-128.png?30}} se zobrazí, zatímco jiné médium {{https://www.dokuwiki.org/_media/wiki:text2html.rc}} se zobrazí jako odkaz s odpovídající ikonou.

Pomocí „svislé čáry“ ''|'' můžete k obrázku přidat titulek:

  {{wiki:dokuwiki-128.png|Logo DokuWiki}}

{{wiki:dokuwiki-128.png?30|Logo DokuWiki}} Zkuste najet myší na obrázek – titulek se zobrazí jako tooltip.

//Při přidávání titulku by před znakem ''|'' neměla být mezera. Jinak může při exportu stránky do PDF pomocí pluginu DW2PDF dojít k vytvoření náhodných odkazů v předchozím textu.//

Vkládání obrázků lze ovlivnit různými parametry. Parametry se přidávají ve stylu URL pomocí otazníku (''?'') a oddělují se ampersandem (''&'').

===== Zarovnání =====

Pomocí mezer vlevo nebo vpravo můžete nastavit zarovnání vlevo, vpravo nebo na střed.

{{ wiki:dokuwiki-128.png}}

{{wiki:dokuwiki-128.png }}

{{ wiki:dokuwiki-128.png }}

  {{ wiki:dokuwiki-128.png}}
  {{wiki:dokuwiki-128.png }}
  {{ wiki:dokuwiki-128.png }}

===== Změna velikosti =====

DokuWiki umí měnit velikost obrázků dvěma způsoby. Ve výchozím nastavení používá PHP knihovnu libGD, pokud je nainstalována. Lepších výsledků lze dosáhnout pomocí nástroje příkazového řádku [[doku>config:im_convert|ImageMagick]].

Při použití knihovny libGD může změna velikosti selhat, pokud není dostatek paměti nebo formát obrázku není podporován nainstalovanou verzí libGD.

Pro změnu velikosti externích obrázků je třeba je nejprve uložit do mezipaměti na serveru. Toho dosáhnete povolením stahování externích souborů v nastavení [[doku>config:fetchsize]].

Pro proporcionální změnu velikosti zadejte požadovanou šířku v pixelech:

  {{wiki:dokuwiki-128.png?20}}

{{wiki:dokuwiki-128.png?20 }} Tento obrázek je zmenšen na šířku 20 pixelů.

Pro proporcionální změnu výšky zadejte výšku v pixelech a šířku nastavte na 0:

  {{wiki:dokuwiki-128.png?0x20}}

{{wiki:dokuwiki-128.png?0x20 }} Tento obrázek je zmenšen na výšku 20 pixelů.

Při zadání šířky i výšky DokuWiki obrázek ořízne před změnou velikosti, aby nedošlo ke zkreslení:

  {{wiki:dokuwiki-128.png?20x50}}

{{wiki:dokuwiki-128.png?20x50 }} Tento obrázek má šířku 20 pixelů a výšku 50 pixelů.

===== Odkazování =====

[[dokuwiki|DokuWiki]] umožňuje vložit obrázek na stránku tak, aby vedl na stránku s podrobnostmi o obrázku nebo na stránku s plnou verzí obrázku. Také umožňuje vložit obrázek bez odkazu.

Ve výchozím nastavení kliknutí na obrázek otevře stránku s podrobnostmi. Tato stránka je vykreslena pomocí šablony ''detail.php''. Standardní ''detail.php'' zobrazí větší verzi obrázku spolu s EXIF a IPTC metadaty (např. popisek, autor, datum pořízení) a dalšími informacemi.

Následující syntaxe vloží obrázek v plné velikosti, a kliknutím na něj se zobrazí stránka s podrobnostmi (metadaty):

  {{wiki:dokuwiki-128.png}}

{{wiki:dokuwiki-128.png?25}} Klikněte na tento zmenšený obrázek pro zobrazení stránky s podrobnostmi.

Na stránce s podrobnostmi můžete kliknout na obrázek a zobrazit ho v plné velikosti. Často se obrázek vkládá na stránku v malé velikosti a na stránce s podrobnostmi ve střední velikosti, takže plná velikost je dostupná až přes přímý odkaz.

Obrázek můžete vložit tak, aby kliknutí vedlo přímo na plnou verzi obrázku. To se označuje jako „přímý“ odkaz a nastavuje se pomocí volby ''direct'':

  {{wiki:dokuwiki-128.png?direct}}

{{wiki:dokuwiki-128.png?20&direct }} Klikněte na tento zmenšený obrázek pro přímý odkaz.

Obrázek lze vložit i bez jakéhokoliv odkazu pomocí volby ''nolink'':

  {{wiki:dokuwiki-128.png?nolink}}

{{wiki:dokuwiki-128.png?20&nolink }} Zkuste kliknout – nepůjde to, že?

Volby ''nolink'' a změnu velikosti lze kombinovat pomocí ampersandu (&):

  {{wiki:dokuwiki-128.png?nolink&100}}

{{wiki:dokuwiki-128.png?nolink&100}}

Pokud chcete pouze odkaz na obrázek bez jeho zobrazení, použijte volbu ''linkonly'':

  {{wiki:dokuwiki-128.png?linkonly}}

{{wiki:dokuwiki-128.png?linkonly}} Toto je pouze odkaz na obrázek.

==== Odkazování mimo syntaxi DokuWiki ====

To se hodí například při použití tagů ''%%<HTML>%%'' pro vizuální úpravy stránky, kdy chcete mít obrázek na pozadí ''<DIV>'' z úložiště médií DokuWiki.

Stačí zkopírovat adresu URL generovanou DokuWiki, ale //nemůžete použít změnu velikosti//. Generovaná URL obvykle obsahuje tři parametry: ''media'', ''w'' a ''tok''. Změna velikosti pomocí ''w'' nefunguje bez parametru ''tok''. Jinými slovy, lze použít pouze parametr ''media''.

I když byste mohli zkopírovat ''tok'' z vygenerovaného kódu, URL přestane fungovat, jakmile bude obrázek aktualizován.

Příklad:

<code>
DIV.personal_info {
  ...
  background-image:  url('{/install_dir}/lib/exe/fetch.php?media=name:space:mypic.png');
}
</code>

===== Dynamické obrázky =====

Někdy můžete chtít vložit dynamický obrázek jako [[http://kalsey.com/tools/buttonmaker/button.php?barPosition=50&leftText=Dynamic&leftTextColor=ffffff&rightText=IMG&rightTextPosition=54|tento]]

Použití běžné metody:

  {{http://kalsey.com/tools/buttonmaker/button.php?barPosition=50&leftText=Dynamic&leftTextColor=ffffff&rightText=IMG&rightTextPosition=54}}

nefunguje:

{{http://kalsey.com/tools/buttonmaker/button.php?barPosition=50&leftText=Dynamic&leftTextColor=ffffff&rightText=IMG&rightTextPosition=54}}

Je to proto, že [[dokuwiki|DokuWiki]] předpokládá, že obrázek končí na ''.gif'', ''.jpg'' nebo ''.png'', ale tento soubor končí na ''.php''. Trik spočívá v přidání dalšího CGI parametru jako ''&.png'' – CGI tento neznámý parametr ignoruje, ale DokuWiki si bude myslet, že jde o obrázek.

Je také nutné přidat na úplný konec otazník, jinak si DokuWiki bude myslet, že CGI parametry jsou volby pro cache((Pro ukládání do mezipaměti.)).

Pro použití znaků ''{'' nebo ''}'' v adrese URL obrázku je třeba tyto znaky URL-kódovat jako ''%7B'' a ''%7C'' (jinak kolidují se syntaxí odkazů na média).

Příklad použití syntaxe ''&.png?'':

{{http://kalsey.com/tools/buttonmaker/button.php?barPosition=50&leftText=Dynamic&leftTextColor=ffffff&rightText=IMG&rightTextPosition=54&.png?}}

  {{http://kalsey.com/tools/buttonmaker/button.php?barPosition=50&leftText=Dynamic&leftTextColor=ffffff&rightText=IMG&rightTextPosition=54&.png?}}

Mimochodem: Webové rozhraní buttonmakeru najdete na

  * http://kalsey.com/tools/buttonmaker/

===== Odstraňování médií =====

Někdy je potřeba odstranit mediální soubor, který byl dříve nahrán. K tomu musí být povolena funkce [[acl|ACL]] a uživatel, který chce soubor smazat, musí mít oprávnění ''DELETE''. Soubory lze pak smazat pomocí ikony koše.

Viz také: [[doku>faq:deletemedia|mazání mediálních souborů]]

===== Odkazy na obrázky =====

Pro vytvoření odkazu z obrázku na jiný zdroj stačí vložit odkaz jako u běžného textu.

Příklad: [[http://www.google.com|{{wiki:dokuwiki-128.png}}]]

  Příklad: [[http://www.google.com|{{wiki:dokuwiki-128.png}}]]

Pokud odkazujete na lokální médium (např. .pdf), můžete použít následující syntaxi:

Příklad:   [[this>_media/wiki:dokuwiki-128.png|{{wiki:dokuwiki-128.png}}]]

   Příklad:   [[this>_media/wiki:dokuwiki-128.png|{{wiki:dokuwiki-128.png}}]]

===== Ukládání do mezipaměti =====

Pro zlepšení výkonu se DokuWiki snaží ukládat externí obrázky do mezipaměti. Pokud chcete použít externí obrázek bez ukládání do mezipaměti, přidejte parametr ''nocache'':

  {{http://de3.php.net/images/php.gif?nocache}}

Tento parametr lze kombinovat i se změnou velikosti:

  {{http://de3.php.net/images/php.gif?300x50&nocache}}

Zatěžovat externí server při každém načtení stránky není příliš ohleduplné. Místo toho můžete použít parametr ''recache'', který umožní DokuWiki znovu ukládat obrázek do mezipaměti podle intervalu nastaveného v [[doku>config:cachetime|konfiguraci cachetime]]:

  {{http://de3.php.net/images/php.gif?recache}}