Obrázky v listingu: Porovnání verzí

Z GeoWiki
Přejít na: navigace, hledání
(Nahrání obrázku k listingu: změna upload)
(Velikost obrázku)
(Není zobrazeno 5 mezilehlých verzí od 1 uživatele.)
Řádka 1: Řádka 1:
Jste-li autorem [[cache]], můžete její [[listing]] pro ostatní zatraktivnit mimo jiné tím, že do něj vložíte vhodné obrázky. [[Založení cache#Jak správně vyplnit formulář|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 v listingu|HTML]]. Zde najdete základní postupy práce s obrázky.
+
Jste-li autorem (ownerem) [[cache]], můžete její [[listing]] pro ostatní zatraktivnit mimo jiné tím, že do něj vložíte vhodné obrázky. Obecně je možné říci, že čistě textové listingy nikoho moc nezaujmou. [[Založení cache#Jak správně vyplnit formulář|Editační formulář]] nedisponuje zatím funkcí, která by autorům usnadnila práci při tvorbě listingu s obrázky. Pokud chcete mít v listingu své kešky 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 v listingu|HTML]].
  
Při [[Založení cache#Jak správně vyplnit formulář|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.
+
Při [[Založení cache#Jak správně vyplnit formulář|editaci]] listingu se nejprve ujistěte, že je zaškrtnutá volba ''The description below is in HTML'' (v překladu: ''níže uvedený popis je ve formátu HTML''). Pokud je tato kolonka zaškrtnuta, je možné formátovat text listingu pomocí značek (tagů) HTML a vkládat do něj obrázky.
  
 
Stručný postup:
 
Stručný postup:
  
1) Založit listing bez obrázků
+
1) Založit listing bez obrázků.
  
2) Nahrát k němu obrázky do galerie v listingu
+
2) Nahrát k němu obrázky do galerie v listingu.
  
 
3) Vložení obrázků do listingu pomocí tagu pro obrázky
 
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).
+
== Nahrání obrázku k listingu ==
  
=== Umístění souboru s obrázkem ===
+
[[Soubor:Nahrani obrazku.PNG|thumb|right|Umístění funkce pro nahrání obrázku k listingu]]
 +
Jak bylo uvedeno výše, přidání obrázku do listingu je možné pomocí HTML kódu, kterým se odkáže na soubor s obrázkem, který se nachází na libovolném serveru kdekoliv na internetu. (Postup vložení obrázku do listingu pomocí HTML je uveden níže. Pravděpodobně nejčastěji se budete odkazovat na obrázkové soubory, které nahrajete do [[galerie]] příslušné cache. Nově se funkce pro nahrání obrázku do galerie listingu nalézá v editačním formuláři listingu (na stánce editace listingu). V editačním formuláři ji naleznete v sekci ''CACHE IMAGES''  v jeho konci, kde je v textu pod odkazem <u>''Add images''</u> (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.
  
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:
+
[[Soubor:Nahrani obrazku formular.PNG|thumb|right|Formulář pro nahrání obrázku k listingu (nevyplněný)]]
 +
Po klinutí na odkaz ''upload images'' se objeví formulář obsahující tři pole:
  
:<nowiki><IMG SRC="http://img.geocaching.com/cache/359d7d93-44ba-4745-95de-f7263e050e9a.jpg" /></nowiki>
+
[[Soubor:Nahrani obrazku formular vyplneny.PNG|thumb|right|Formulář pro nahrání obrázku k listingu (vyplněný)]]
 +
# 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 ve vašem počítači. Potvrďte volbu souboru. Do políčka se automaticky vloží cesta k tomuto souboru.
 +
# 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.
 +
# Pole ''File Description'' (popis obrázku): sem můžete napsat libovolný text, který popíše, co je na obrázku (rozsah textu je 500 znaků).
  
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.
+
Následně klikněte na tlačítko ''Upload'' (nahrát). Nyní je potřeba chvíli počkat, než dojde k nahrání souboru na server.
  
=== Velikost obrázku ===
+
Povolené formáty souborů jsou JPG, GIF a PNG. Jiné typy souboru nelze nahrát. Pokud nahrajete obrázky ve formátu GIF nebo PNG, automaticky budou převedeny na JPG (v odkazu však stále budou mít koncovku dle původního formátu).
  
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.
+
Po nahrání dojde k zobrazení obrázku. Pokud chcete nahrát další obrázek, klikněte na odkaz ''Upload another image'' (nahrát další obrázek). Postup nahrání je pak stejný jako je popsán výše. Pokud chcete provádět úpravy obrázku (změna popisku nebo data, otočení, smazání aj.), klikněte na odkaz ''Edit''.
  
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ů:
+
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.
  
:<nowiki><IMG SRC="http://img.geocaching.com/cache/359d7d93-44ba-4745-95de-f7263e050e9a.jpg" WIDTH="400" /></nowiki>
+
[[Soubor:Obrazek listing.PNG|center|400px|Odkaz na obrázek pod listingem]]
  
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.
+
=== Zjištění URL adresy obrázku ===
  
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í:
+
[[Soubor:Obrazek URL.PNG|right|400px|Nalezení URL adresy obrázku]]
 +
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 [[#Umístění souboru s obrázkem|src]]. U obrázků, které jste nahráli přímo do galerie dané cache (viz výše), vypadá adresa nějak takto:
  
:<nowiki><IMG SRC="http://img.geocaching.com/cache/small/359d7d93-44ba-4745-95de-f7263e050e9a.jpg" /></nowiki>
+
:<nowiki>https://s3.amazonaws.com/gs-geo-images/359d7d93-44ba-4745-95de-f7263e050e9a.jpg</nowiki>
  
Miniaturu s odkazem na původní obrázek vložíme takto:
 
  
:<nowiki><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></nowiki>
+
Část odkazu ''359d7d93-44ba-4745-95de-f7263e050e9a'' 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é (jedinou odchylkou může být koncovka).
  
Pokud chceme otevírat originál do nové záložky/okna:
 
  
:<nowiki><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></nowiki>
+
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í:
  
=== Umístění obrázku v textu ===
+
# Klikněte na název obrázku v seznamu na konci listingu (viz názorný obrázek výše).
 +
# Obrázek se otevře v samostatném okně či záložce prohlížeče.
 +
# Označte a zkopírujte (Ctrl+C) adresu v adresním řádku okna prohlížeče a vložte ji (Ctrl+V) do hodnoty parametru ''src'' tagu ''img'' ve zdrojovém (HTML) kódu listingu.
  
[[Soubor:Ukázka HTML formátování.JPG|thumb|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:
+
'''Tip 1:''' Po smazání obrázku z listingu je na této adrese obrázek pořád ještě dostupný.
* ''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''.
+
'''Tip 2:''' Pokud nahrajete veliký obrázek, zobrazí se vám po otevření obrázku dle postupu popsaného výše jeho menší verze a za jménem souboru, před koncovkou, se v URL adrese objeví ''_l''. Prostým odmazáním těchto dvou znaků a zadání adresy bez nich se dostanete k plné velikosti obrázku.
 +
  
Pokud chcete obrázek vycentrovat mezi levým a pravým okrajem, umístěte ho mezi párové značky <nowiki><CENTER> a </CENTER></nowiki>, například:
+
== Vložení obrázku do listingu ==
:<nowiki><CENTER></nowiki>
+
:<nowiki><IMG SRC="http://img.geocaching.com/cache/359d7d93-44ba-4745-95de-f7263e050e9a.jpg" WIDTH="400" /></nowiki>
+
:<nowiki></CENTER></nowiki>
+
  
=== Alternativní text ===
+
K vložení obrázku do stránky HTML slouží tag (značka) ''<img>''. Do špičatých závorek se kromě textu ''img'' (který znamená ''image'' neboli česky obrázek) zapisují další parametry, které popisují informace obrázku. 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). Komplexní rozbor přidání obrázku v HTML je dostupný třeba na stránce [https://www.jakpsatweb.cz/obrazky.html Jak psát web], rozebereme si jej však i tady.
  
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í.
+
=== Umístění souboru s obrázkem ===
  
Alternativní text zadává pomocí parametru ALT, např. ALT="Hrad Karlštejn".
+
Nejdůležitějším parametrem je internetová adresa (''url'') obrázku, která odkazuje na jeho umístění. Udává se jako hodnota parametru ''src'' (který znamená ''source'' neboli česky zdroj).
  
== Nahrání obrázku k listingu ==
+
Odkaz na obrázek tedy bude vypadat například takto:
  
[[Soubor:Upload images.JPG|right|]]
+
:<nowiki>''<img src="https://s3.amazonaws.com/gs-geo-images/359d7d93-44ba-4745-95de-f7263e050e9a.jpg" />''</nowiki>
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. <strike>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).</strike> Nově je odkaz na nahrání obrázků na stránce editace listingu  dole "''CACHE IMAGES Give geocachers additional information about your location or cache. <u>'''Add images'''</u> to the cache gallery.''" 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:
 
  
# 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.
+
Uvedeným postupem se můžete odkázat jak na obrázek, který je uložen při listingu na serveru Geocaching.com (viz příklad výše), tak i na obrázek, který je dostupný kdekoliv jinde na internetu. V současné době využívá [[Groundspeak]] k ukládání obrázků servery Amazonu (proto je v adrese obrázku uvedeno amazonws.com).
# 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.
+
# 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.
+
=== Velikost obrázku ===
  
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.
+
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 (pixelech). 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.
  
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''.
+
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í. Obecně se doporučuje velikost obrázku zapsat pomocí parametru, protože pokud se u obrázku uvedou rozměry, prohlížeč pro obrázek vyhradí místo, přestože obrázek zatím není stažený (načtený).
  
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.
+
Příklad obrázku, který má nastavenou šířku na 400 bodů:
  
 +
:<nowiki><img src="https://s3.amazonaws.com/gs-geo-images/359d7d93-44ba-4745-95de-f7263e050e9a.jpg" width="400" /></nowiki>
  
  
[[Soubor:Seznam obrázků v listingu.JPG|center|]]
+
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.
  
=== Jak zjistím URL adresu souboru ===
+
Server Geocaching.com si automaticky ukládá i náhled na vložený obrázek. Odkaz na něj na svém konci obsahuje ''_sm'' (což znamená ''small'' neboli česky malý). 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. '''''EDIT: Fungovalo dříve, dnes (2020) už miniatury (_sm) nefungují.'''''
  
[[Soubor:URL adresa obrázku.JPG|right|500px|]]
+
<strike>Pouze zmenšený náhled vložíme do listingu pomocí:
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 [[#Umístění souboru s obrázkem|SRC]]. U obrázků, které jste nahráli přímo do galerie dané cache (viz výše), vypadá adresa nějak takto:
+
  
:<nowiki>http://</nowiki>img.geocaching.com/cache/''359d7d93-44ba-4745-95de-f7263e050e9a''.jpg
+
:<nowiki><img src="https://s3.amazonaws.com/gs-geo-images/359d7d93-44ba-4745-95de-f7263e050e9a_sm.jpg" /></nowiki>
  
Čá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é.
+
Miniaturu s odkazem na původní obrázek vložíme takto:
  
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í:
+
:<nowiki><a href="https://s3.amazonaws.com/gs-geo-images/359d7d93-44ba-4745-95de-f7263e050e9a.jpg"><img src="https://s3.amazonaws.com/gs-geo-images/359d7d93-44ba-4745-95de-f7263e050e9a_sm.jpg" /></a></nowiki>
  
# Klikněte na odkaz ''Edit'' u titulku příslušného obrázku v seznamu na konci listingu (viz výše).
+
Pokud chceme otevírat originál do nového panelu prohlížeče:
# Kliknětě přímo na obrázek, který se otevře v samostatném okně či záložce prohlížeče.
+
# 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ý.
+
:<nowiki><a href="https://s3.amazonaws.com/gs-geo-images/359d7d93-44ba-4745-95de-f7263e050e9a.jpg" target="_blank"><img src="https://s3.amazonaws.com/gs-geo-images/359d7d93-44ba-4745-95de-f7263e050e9a_sm.jpg" /></a></nowiki></strike>
 +
 
 +
 
 +
Výše popsaný způsob již díky neexistenci automaticky tvořených miniatur není funkční. Uvedeme si tedy příklad vložení zmenšeného obrázku (url s ''_l'') pomocí parametru width:
 +
 
 +
:<nowiki><a href="https://s3.amazonaws.com/gs-geo-images/359d7d93-44ba-4745-95de-f7263e050e9a.jpg"><img src="https://s3.amazonaws.com/gs-geo-images/359d7d93-44ba-4745-95de-f7263e050e9a_l.jpg" width="100" /></a></nowiki>
 +
 
 +
 
 +
Pokud chceme otevírat originál (plnou velikost) do nového panelu prohlížeče (doporučeno), použijte v tagu "a" parametr ''target="_blank"'' jako je uvedeno v následujícím příkladu:
 +
 
 +
:<nowiki><a href="https://s3.amazonaws.com/gs-geo-images/359d7d93-44ba-4745-95de-f7263e050e9a.jpg" target="_blank"><img src="https://s3.amazonaws.com/gs-geo-images/359d7d93-44ba-4745-95de-f7263e050e9a.jpg" width="100" /></a></nowiki>
 +
 
 +
=== Umístění obrázku v textu ===
 +
 
 +
[[Soubor:Ukázka HTML formátování.JPG|thumb|Ukázka použití parametru align]]
 +
Pomocí parametr ''align'' (v překladu ''zarovnat'') 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árovou značku (tag) ''center'', například:
 +
:<nowiki><center></nowiki>
 +
:<nowiki><img src="http://img.geocaching.com/cache/359d7d93-44ba-4745-95de-f7263e050e9a.jpg" width="400" /></nowiki>
 +
:<nowiki></center></nowiki>
 +
 
 +
=== Popis obrázku ===
 +
 
 +
Je vhodné přidat k obrázku popis, který obsahuje nějaký slovní komentář k obrázku. Tento text se zobrazí, pokud uživatel najede ukazatelem myši na zobrazený obrázek. Popis obrázku zadává pomocí parametru ''title'', např. ''title="Příroda a kameny"''.
 +
 
 +
Příklad uvedení značky (tagu) v kódu:
 +
 
 +
:<nowiki><img src="https://s3.amazonaws.com/gs-geo-images/359d7d93-44ba-4745-95de-f7263e050e9a.jpg" title="Příroda a kameny" /></nowiki>
 +
 
 +
=== Alternativní text ===
 +
 
 +
Bývá také vhodné přidat k obrázku tzv. alternativní text, který obsahuje nějaký slovní popis obrázku. Tento text se zobrazí v případě, když se obrázek z nějakého důvodu na stránce nevykreslí, nebo se ještě nenačetl. Alternativní text zadává pomocí parametru ''alt'', např. ''alt="Příroda a kameny"''.
 +
 
 +
Příklad uvedení značky (tagu) v kódu:
 +
 
 +
:<nowiki><img src="https://s3.amazonaws.com/gs-geo-images/359d7d93-44ba-4745-95de-f7263e050e9a.jpg" title="Příroda a kameny" alt="Příroda a kameny" /></nowiki>
  
 
== Neporušujte autorská práva ==
 
== Neporušujte autorská práva ==
Řádka 116: Řádka 151:
  
 
Vhodným zdrojem obrázků je například [http://cs.wikipedia.org 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í.
 
Vhodným zdrojem obrázků je například [http://cs.wikipedia.org 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í.
 +
 +
Pokud nahráváte obrázek z cizího zdroje (Wikipedie) je vhodné zdroj uvést například do popisu obrázku, jak je uvedeno v příkladu nahrání obrázku výše.
  
 
[[Kategorie:Postupy]]
 
[[Kategorie:Postupy]]

Verze z 13. 5. 2020, 17:44

Jste-li autorem (ownerem) cache, můžete její listing pro ostatní zatraktivnit mimo jiné tím, že do něj vložíte vhodné obrázky. Obecně je možné říci, že čistě textové listingy nikoho moc nezaujmou. Editační formulář nedisponuje zatím funkcí, která by autorům usnadnila práci při tvorbě listingu s obrázky. Pokud chcete mít v listingu své kešky 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.

Při editaci listingu se nejprve ujistěte, že je zaškrtnutá volba The description below is in HTML (v překladu: níže uvedený popis je ve formátu HTML). Pokud je tato kolonka zaškrtnuta, je možné formátovat text listingu 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


Obsah

Nahrání obrázku k listingu

Umístění funkce pro nahrání obrázku k listingu

Jak bylo uvedeno výše, přidání obrázku do listingu je možné pomocí HTML kódu, kterým se odkáže na soubor s obrázkem, který se nachází na libovolném serveru kdekoliv na internetu. (Postup vložení obrázku do listingu pomocí HTML je uveden níže. Pravděpodobně nejčastěji se budete odkazovat na obrázkové soubory, které nahrajete do galerie příslušné cache. Nově se funkce pro nahrání obrázku do galerie listingu nalézá v editačním formuláři listingu (na stánce editace listingu). V editačním formuláři ji naleznete v sekci CACHE IMAGES v jeho konci, kde je v textu pod odkazem Add 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.

Formulář pro nahrání obrázku k listingu (nevyplněný)

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

Formulář pro nahrání obrázku k listingu (vyplněný)
  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 ve vašem počítači. 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 (rozsah textu je 500 znaků).

Následně 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 PNG. Jiné typy souboru nelze nahrát. Pokud nahrajete obrázky ve formátu GIF nebo PNG, automaticky budou převedeny na JPG (v odkazu však stále budou mít koncovku dle původního formátu).

Po nahrání dojde k zobrazení obrázku. Pokud chcete nahrát další obrázek, klikněte na odkaz Upload another image (nahrát další obrázek). Postup nahrání je pak stejný jako je popsán výše. 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.

Odkaz na obrázek pod listingem

Zjištění URL adresy obrázku

Nalezení URL adresy obrázku

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:

https://s3.amazonaws.com/gs-geo-images/359d7d93-44ba-4745-95de-f7263e050e9a.jpg


Část odkazu 359d7d93-44ba-4745-95de-f7263e050e9a 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é (jedinou odchylkou může být koncovka).


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 název obrázku v seznamu na konci listingu (viz názorný obrázek výše).
  2. Obrázek se otevře v samostatném okně či záložce prohlížeče.
  3. Označte a zkopírujte (Ctrl+C) adresu v adresním řádku okna prohlížeče a vložte ji (Ctrl+V) do hodnoty parametru src tagu img ve zdrojovém (HTML) kódu listingu.


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

Tip 2: Pokud nahrajete veliký obrázek, zobrazí se vám po otevření obrázku dle postupu popsaného výše jeho menší verze a za jménem souboru, před koncovkou, se v URL adrese objeví _l. Prostým odmazáním těchto dvou znaků a zadání adresy bez nich se dostanete k plné velikosti obrázku.


Vložení obrázku do listingu

K vložení obrázku do stránky HTML slouží tag (značka) <img>. Do špičatých závorek se kromě textu img (který znamená image neboli česky obrázek) zapisují další parametry, které popisují informace obrázku. 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). Komplexní rozbor přidání obrázku v HTML je dostupný třeba na stránce Jak psát web, rozebereme si jej však i tady.

Umístění souboru s obrázkem

Nejdůležitějším parametrem je internetová adresa (url) obrázku, která odkazuje na jeho umístění. Udává se jako hodnota parametru src (který znamená source neboli česky zdroj).

Odkaz na obrázek tedy bude vypadat například takto:

''<img src="https://s3.amazonaws.com/gs-geo-images/359d7d93-44ba-4745-95de-f7263e050e9a.jpg" />''


Uvedeným postupem se můžete odkázat jak na obrázek, který je uložen při listingu na serveru Geocaching.com (viz příklad výše), tak i na obrázek, který je dostupný kdekoliv jinde na internetu. V současné době využívá Groundspeak k ukládání obrázků servery Amazonu (proto je v adrese obrázku uvedeno amazonws.com).

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 (pixelech). 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í. Obecně se doporučuje velikost obrázku zapsat pomocí parametru, protože pokud se u obrázku uvedou rozměry, prohlížeč pro obrázek vyhradí místo, přestože obrázek zatím není stažený (načtený).

Příklad obrázku, který má nastavenou šířku na 400 bodů:

<img src="https://s3.amazonaws.com/gs-geo-images/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. Odkaz na něj na svém konci obsahuje _sm (což znamená small neboli česky malý). 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. EDIT: Fungovalo dříve, dnes (2020) už miniatury (_sm) nefungují.

Pouze zmenšený náhled vložíme do listingu pomocí:

<img src="https://s3.amazonaws.com/gs-geo-images/359d7d93-44ba-4745-95de-f7263e050e9a_sm.jpg" />

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

<a href="https://s3.amazonaws.com/gs-geo-images/359d7d93-44ba-4745-95de-f7263e050e9a.jpg"><img src="https://s3.amazonaws.com/gs-geo-images/359d7d93-44ba-4745-95de-f7263e050e9a_sm.jpg" /></a>

Pokud chceme otevírat originál do nového panelu prohlížeče:

<a href="https://s3.amazonaws.com/gs-geo-images/359d7d93-44ba-4745-95de-f7263e050e9a.jpg" target="_blank"><img src="https://s3.amazonaws.com/gs-geo-images/359d7d93-44ba-4745-95de-f7263e050e9a_sm.jpg" /></a>


Výše popsaný způsob již díky neexistenci automaticky tvořených miniatur není funkční. Uvedeme si tedy příklad vložení zmenšeného obrázku (url s _l) pomocí parametru width:

<a href="https://s3.amazonaws.com/gs-geo-images/359d7d93-44ba-4745-95de-f7263e050e9a.jpg"><img src="https://s3.amazonaws.com/gs-geo-images/359d7d93-44ba-4745-95de-f7263e050e9a_l.jpg" width="100" /></a>


Pokud chceme otevírat originál (plnou velikost) do nového panelu prohlížeče (doporučeno), použijte v tagu "a" parametr target="_blank" jako je uvedeno v následujícím příkladu:

<a href="https://s3.amazonaws.com/gs-geo-images/359d7d93-44ba-4745-95de-f7263e050e9a.jpg" target="_blank"><img src="https://s3.amazonaws.com/gs-geo-images/359d7d93-44ba-4745-95de-f7263e050e9a.jpg" width="100" /></a>

Umístění obrázku v textu

Ukázka použití parametru align

Pomocí parametr align (v překladu zarovnat) 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árovou značku (tag) center, například:

<center>
<img src="http://img.geocaching.com/cache/359d7d93-44ba-4745-95de-f7263e050e9a.jpg" width="400" />
</center>

Popis obrázku

Je vhodné přidat k obrázku popis, který obsahuje nějaký slovní komentář k obrázku. Tento text se zobrazí, pokud uživatel najede ukazatelem myši na zobrazený obrázek. Popis obrázku zadává pomocí parametru title, např. title="Příroda a kameny".

Příklad uvedení značky (tagu) v kódu:

<img src="https://s3.amazonaws.com/gs-geo-images/359d7d93-44ba-4745-95de-f7263e050e9a.jpg" title="Příroda a kameny" />

Alternativní text

Bývá také vhodné přidat k obrázku tzv. alternativní text, který obsahuje nějaký slovní popis obrázku. Tento text se zobrazí v případě, když se obrázek z nějakého důvodu na stránce nevykreslí, nebo se ještě nenačetl. Alternativní text zadává pomocí parametru alt, např. alt="Příroda a kameny".

Příklad uvedení značky (tagu) v kódu:

<img src="https://s3.amazonaws.com/gs-geo-images/359d7d93-44ba-4745-95de-f7263e050e9a.jpg" title="Příroda a kameny" alt="Příroda a kameny" />

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

Pokud nahráváte obrázek z cizího zdroje (Wikipedie) je vhodné zdroj uvést například do popisu obrázku, jak je uvedeno v příkladu nahrání obrázku výše.