Obrázky v listingu

Jste-li autorem cache, můžete její listing pro ostatní zatraktivnit mimo jiné tím, že do něj vložíte vhodné obrázky. Editační formulář bohužel zatím nemá funkce, které by autorům usnadnily práci při tvorbě listingu. Pokud chcete mít v listingu své cache obrázky (a zároveň více než prostý, neformátovaný text), je třeba znát základy práce s formátem HTML. Zde najdete základní postupy práce s obrázky.

Při editaci listingu se nejprve ujistěte, že jste zaškrtli volbu The descriptions below are in HTML (níže uvedené popisky jsou ve formátu HTML). Nyní tedy můžete formátovat text pomocí značek (tagů) HTML a vkládat do něj obrázky.

Stručný postup:

1) Založit listing bez obrázků

2) Nahrát k němu obrázky do galerie v listingu

3) Vložení obrázků do listingu pomocí tagu pro obrázky

Tag pro vložení obrázku

K vložení obrázku do stránky HTML slouží značka <IMG>. Do špičatých závorek se kromě textu IMG (který znamená image neboli obrázek) zapisují další parametry, které popisují parametry obrázky. Parametry se udávají tak, že se za název parametru přidá znak = a do uvozovek se uvede hodnota parametru (viz příklady níže).

Umístění souboru s obrázkem

Nejdůležitějším parametrem je internetová adresa (URL), která odkazuje na umístění obrázku. Udává se jako hodnota parametru SRC (source neboli zdroj). Odkaz na obrázek tedy bude vypadat například takto:

<IMG SRC="http://img.geocaching.com/cache/359d7d93-44ba-4745-95de-f7263e050e9a.jpg" />

Takto můžete odkázat jak na obrázek, který je uložen na serveru Geocaching.com (viz příklad výše), tak i na obrázek, který je dostupný kdekoliv jinde na internetu.

Velikost obrázku

Dalším parametrem, který je nepovinný, ale často se používá, je šířka obrázku. Zadává se pomocí parametru WIDTH a zpravidla se udává v bodech. Je možné také udat výšku obrázku (parametr HEIGHT), například když chceme mít stejně vysoké obrázky vedle sebe. Parametry WIDTH a HEIGHT se zpravidla nepoužívají současně, není-li k tomu zvláštní důvod.

Pokud šířku nebo výšku neuvedeme, vloží se do textu stránky obrázek o skutečné velikosti. Šířku nebo výšku udáváme v případě, že chceme obrázek zvětšit (obvykle nevypadá výsledek hezky) nebo zmenšit. Obrázek je vhodné zmenšit, pokud je širší než 600 bodů, protože jinak rozhodí formátování listingu a při tisku dojde k oříznutí. Příklad obrázku, který má nastavenou šířku na 400 bodů:

<IMG SRC="http://img.geocaching.com/cache/359d7d93-44ba-4745-95de-f7263e050e9a.jpg" WIDTH="400" />

Pokud zadáme pouze šířku obrázku, výška se dopočítá automaticky podle poměru stran. Funguje to samozřejmě i obráceně, pokud zadáme výšku. Výšku i šířku zadáme zároveń v případě, že chceme změnit poměr stran obrázku, a tak ho vlastně zdeformovat.

Server geocaching.com si automaticky ukládá i náhled na vložený obrázek. Toho můžeme využít i v listingu, pokud chceme zobrazit jen zmenšený obrázek, nebo (asi pravděpodobněji) chceme mít v listingu náhled a po kliknutí ne něj chceme ukázat původní velikost obrázku. Pouze zmenšený náhled vložíme do listingu pomocí:

<IMG SRC="http://img.geocaching.com/cache/small/359d7d93-44ba-4745-95de-f7263e050e9a.jpg" />

Miniaturu s odkazem na původní obrázek vložíme takto:

<A HREF="http://img.geocaching.com/cache/359d7d93-44ba-4745-95de-f7263e050e9a.jpg"><IMG SRC="http://img.geocaching.com/cache/small/359d7d93-44ba-4745-95de-f7263e050e9a.jpg" /></A>

Pokud chceme otevírat originál do nové záložky/okna:

<A HREF="http://img.geocaching.com/cache/359d7d93-44ba-4745-95de-f7263e050e9a.jpg" TARGET="_blank"><IMG SRC="http://img.geocaching.com/cache/small/359d7d93-44ba-4745-95de-f7263e050e9a.jpg" /></A>

Umístění obrázku v textu

Ukázka použití parametru ALIGN

Pomocí parametr ALIGN můžeme ovlivňovat umístění obrázku v textu. Zadáme-li například ALIGN="right", obrázek bude umístěn na pravé straně listingu.

Parametr ALIGN může nabývat těchto hodnot:

• left: obrázek je umístěn k levému okraji a text ho obtéká bezprostředně zprava (odshora);
• right: obrázek je umístěn k pravému okraji a text ho obtéká bezprostředně zleva (odshora);
• top: zarovná horní okraj obrázku s prvním řádkem textu, obrázek je umístěn vlevo;
• middle: zarovná základnu prvního řádku textu s prostředkem obrázku (svisle), obrázek je umístěn vlevo;
• absmiddle: zarovná prostředek prvního řádku textu s prostředkem obrázku (svisle), obrázek je umístěn vlevo;
• baseline: zarovná základnu prvního řádku textu se spodním okrajem obrázku (svisle), obrázek je umístěn vlevo.

Nejvíce zřejmě využijete parametry left a right.

Pokud chcete obrázek vycentrovat mezi levým a pravým okrajem, umístěte ho mezi párové značky <CENTER> a </CENTER>, například:

<CENTER>

<IMG SRC="http://img.geocaching.com/cache/359d7d93-44ba-4745-95de-f7263e050e9a.jpg" WIDTH="400" />

</CENTER>

Alternativní text

Bývá také vhodné přidat k obrázku tzv. alternativní text, který obsahuje nějaký slovní komentář k obrázku. Tento text se zobrazí, pokud uživatel najede ukazatelem myši na zobrazený obrázek, případně také když se obrázek z nějakého důvodu na stránce nevykreslí.

Alternativní text zadává pomocí parametru ALT, např. ALT="Hrad Karlštejn".

Nahrání obrázku k listingu

Jak bylo uvedeno výše, lze v HTML kódu odkázat na soubor s obrázkem, který se nachází na libovolném serveru kdekoliv na internetu. Pravděpodobně nejčastěji však budete odkazovat na obrázkové soubory, které nahrajete do galerie příslušné cache. V pravém horním rohu listingu cache najdete rámeček nazvaný Navigation. V něm najdete odkaz upload images (nahrát obrázky). Po kliknutí na tento odkaz je postup nahrávání stejný jako při nahrávání obrázků k logům.

Po klinutí na odkaz upload images se objeví formulář obsahující tři pole:

1. Pole File (soubor) slouží k vyplnění cesty k souboru s obrázkem (obvykle ve vašem počítači), který má být nahrán na server. Vpravo od něj je tlačítko, které se může jmenovat různě dle internetového prohlížeče, např. Procházet. Po kliknutí na něj můžete pomocí Průzkumíku vyhledat příslušný soubor. Potvrďte volbu souboru. Do políčka se automaticky vloží cesta k tomuto souboru.
2. Pole File Caption (titulek obrázku): zvolte název, který se bude zobrazovat spolu s obrázkem. Ponecháte-li toto pole prázdné, použije se název souboru.
3. Pole File Description (popis obrázku): sem můžete napsat libovolný text, který popíše, co je na obrázku.

Klikněte na tlačítko Upload (nahrát). Nyní je potřeba chvíli počkat, než dojde k nahrání souboru na server.

Povolené formáty souborů jsou JPG, GIF a TIF. Jiné typy souboru nelze nahrát. Pokud nahrajete obrázky ve formátu GIF nebo TIF, automaticky budou převedeny na JPG. Velké soubory, které mají více než 125 kB nebo jsou širší než 600 bodů, budou automaticky zmenšeny.

Po nahrání se obrázek zobrazí. Pokud chcete nahrát další obrázek, klikněte na odkaz Upload another image (nahrát další obrázek). Pokud chcete provádět úpravy obrázku (změna popisku nebo data, otočení, smazání aj.), klikněte na odkaz Edit.

Obrázky, které jste nahráli k listingu, se jednak ukazují v galerii příslušné cache a zároveň se nacházejí v seznamu obrázků, který se nachází na konci listingu. Na rozdíl od ostatních uživatelů serveru u každého názvu obrázku vidíte také odkaz Edit, kterým můžete obrázek kdykoliv upravit nebo smazat.

Jak zjistím URL adresu souboru

Aby mohl být obrázek na stránce zobrazen, je potřeba správně zadat jeho URL adresu, kterou zadáváme jako hodnotu parametru SRC. U obrázků, které jste nahráli přímo do galerie dané cache (viz výše), vypadá adresa nějak takto:

http://img.geocaching.com/cache/359d7d93-44ba-4745-95de-f7263e050e9a.jpg

Část, která je v příkladu označena kurzivou, je jméno souboru, pod kterým je obrázek na serveru uložen. Toto jméno je vygenerováno automaticky při nahrání souboru na server. Ostatní části adresy jsou vždy stejné.

Způsobů, jak lze zjistit přesnou URL adresu daného obrázku, je více. Ne všechny však fungují ve všech prohlížečích. Postup, který by měl fungovat ve většině prohlížečů, je následující:

1. Klikněte na odkaz Edit u titulku příslušného obrázku v seznamu na konci listingu (viz výše).
2. Kliknětě přímo na obrázek, který se otevře v samostatném okně či záložce prohlížeče.
3. Zkopírujte (CTRL C) adresu v adresním řádku okna prohlížeče a zkopírujte ji (CTRL V) do hodnoty parametru SRC tagu IMG ve zdrojovém kódu listingu.

Tip: Po smazání obrázku z listingu je na této adrese obrázek pořád ještě dostupný.

Neporušujte autorská práva

Při nahrávání obrázku na server Geocaching.com či odkazování z listingu na obrázky umístěné jinde nezapomínejte na autorská práva. Pokud se nejedná o Vaše vlastní dílo (např. vlastní kresba či fotografie), musíte si být jisti, že použitím obrázku neporušujete práva jeho autora. Až na výjimky (např. když je autor už více než 70 let po smrti) je potřeba mít jeho souhlas s užitím díla. Pokud tento souhlas nemáte, obrázek na server nenahrávejte ani na něj z listingu neodkazujte.

Vhodným zdrojem obrázků je například Wikipedie, kam autoři vkládají svá díla s tím, že dávají souhlas s volným užitím. Podmínkou (a taky slušností) je pouze to, že uvedete, odkud obrázek pochází.