Helpdesk
Charity Česká republika

Náhledy obrázků

Kapitoly

• Co je náhled
• K čemu náhledy slouží
• Jak se náhledy tvoří
• Úprava náhledů
• Vkládání náhledů do obsahu
• Hromadné úpravy náhledů
• Přehled velikostí náhledů a jejich použití
• Tipy a triky, často kladené otázky

Co je náhled

Náhled je menší verzí původního obrázku či fotografie, který slouží k rychlému prohlédnutí nebo představení obsahu. Náhledy mohou mít i jiné poměry stran, než mají originální obrázky. Na webu se velmi často pracuje i s náhledy, které jsou vyříznutými částmi z originálního obrázku.

K čemu náhledy slouží

Použitím náhledů se snižuje náročnost přenosu dat a zrychluje se tak načítání stránek. Náhledy stejné velikosti jsou i designovými prvky, které umožňují přehlednou prezentaci obsahu, i v případě, že zdrojové fotografie nemají stejné rozměry, např. výpis článků, náhledy fotogalerií, stejně zarovnané boxíky.

Jak se náhledy tvoří

Náhledy se primárně tvoří automaticky při nahrávání obrázků do archivu souborů, mohou se ale vytvářet a upravovat i manuálně.
Při vkládání obrázku si můžete v seznamu náhledů sami zvolit (*), které chcete nechat automaticky vytvořit. V seznamu jsou předvybrané ty nejčastěji používané náhledy, které doporučujeme vytvářet.
* Toto neplatí pro vkládání metodou drag & drop, tedy přenesením obrázku táhnutím z vašeho počítače do archivu souborů. V tomto případě jsou pro každý obrázek vytvořené náhledy dle standardně generovaného seznamu.

Automatické náhledy jsou tvořené podle algoritmů, které reagují na poměr šířky a výšky vkládaného obrázku a upravují je na cílový poměr stran a rozměr daného náhledu. Obrázek je tedy buď zmenšen podle své větší, nebo menší strany, anebo je použita metoda výřezu v rozměrech cílového náhledu.

Základní premisou automatického tvoření náhledů je urychlit proces a ušetřit čas redaktorům. Ne vždy je však výsledek automatu uspokojivý, zvláště pokud je zdrojový obrázek v netypických rozměrech, nebo pokud je zdrojem fotografie, na které nejsou požadované detaily v prostřední části, na kterou se algoritmus zaměřuje. V takovém případě je potřeba náhled manuálně upravit. Náhled se dá upravit přímo v CMS pomocí nástroje pro zmenšování a vyřezávání, nebo se dá nahrát vlastní náhled. Je tedy možné mít pro jeden obrázek více různých vlastnoručně vytvořených náhledů, což se dá využít např. při vkládání grafiky pro kampaně, kdy může grafik vyrobit bannery uzpůsobené pro každý druh/velikost náhledu.

Úprava náhledů

Úpravy náhledů můžete provádět v archivu souborů i během psaní textu, či úpravě stránek, nemusíte tedy přerušovat práci.

1. Nejprve v archivu souborů najděte obrázek, u kterého chcete upravovat náhled. 
   1. V případě, že používáte zobrazení souborů s náhledy, najdete ikonu pro úpravu náhledů v horní liště.
      
      
   2. Používáte-li k zobrazení souborů raději položkový seznam, najdete ikonu v posledním sloupci na druhé pozici.
      
      
2. Po kliknutí na ikonu se zobrazí okno se seznamem náhledů k danému obrázku.
   
   
   
   Popis:
   1) [Přidat náhled] - v horní liště je tlačítko na přidání náhledů
   2) [Zobrazit] - zobrazení náhledu a informací o něm (velikost, umístění na serveru apod.)
   3) [Oříznout] - nástroj pro výběr a pozici výřezu
   4) [Upravit] - zde můžete nahrát vlastní náhled
   5) [Smazat] - smazání náhledu

Přidat náhled

Popis:
1) Rozměr - výběr z předdefinovaných rozměrů, které ještě nebyly pro tento daný obrázek vytvořeny a možnost vytvořit náhled vlastních rozměrů.
2) Vlastní rozměr – při vytváření vlastního náhledu si můžete určit jeho rozměry, u předdefinovaných náhledů jsou rozměry dané.
3) Poměr stran – zatržítko dostupné pouze při vytváření vlastního náhledu. Je možné zamknout poměr stran, tak aby se strany držely ve stejném poměru, jaký má originální obrázek. Tedy pokud upravíte výšku, šířka se sama dopočítá a obráceně, pokud upravíte šířku, dopočítá se výška.
4) Formát – pokud pracujete s grafikou nebo používáte průhlední pozadí, vybírejte formát PNG, v případě fotografií formát JPG. Předvolen je vždy ten formát, ve kterém je originální obrázek.

Modelové příklady:
a) Chcete vytvořit určitý náhled, který jste při nahrávání obrázku nenechali automaticky vygenerovat, anebo nebyl v době nahrávání obrázku ještě v CMS obsažen. Postupujte tak, že v přechozím okně klikněte v horní liště na [Přidat náhled] a v tomto okně vyberte z nabídky v poli Rozměr jeho název. Pak již stačí kliknout na tlačítko Přidat.

b) Ani jedna z velikostí náhledů vám nevyhovuje a chcete si vytvořit vlastní náhled, který později vložíte do textu (na jiné místo není vlastní formáty vhodné vkládat). Postupujte obdobně, jako v minulém příkladu, tedy na předchozí stránce klikněte v horní liště na [Přidat náhled] a v tomto okně vyberte z nabídky v poli Rozměr volbu „vlastní“. Dále zvolte vlastní rozměry a případně zvažte formát a klikněte na tlačítko Přidat.
Tím se náhled uloží do seznamu náhledů pod jménem „vlastní“ a zařadí se na třetí pozici (tedy pod originál a povinný náhled „do archivu“).
Tip: můžete přidat více vlastních náhledů v různých rozměrech! Po uložení se budou vždy jmenovat „vlastní“ a najdete je třetí, čtvrté atd. pozici.

Zobrazit

Zobrazí informace o souboru a samotný náhled. Informace, které se zde dozvíte, jsou: velikost šablony náhledu (rozměry v px), formát, velikost (v kB), skutečná cesta k náhledu na webu, název typu náhledu, samotný grafický náhled, skutečný rozměr náhledu (může se lišit od šablonového rozměru náhledu) a kdy byl soubor respektive náhled vložen.

Oříznout

V případě fotografie, která má jiný poměr stran než náhled nebo v případě fotografie, ze které je potřeba vybrat jinou obsahovou část, se používá nástroj Oříznutí obrázku. V tomto modelovém příkladu skupinové fotografie lidí je výřez znázorněn světlý obdélníkem, na kterém automatický středový výřez „oříznul“ lidem nohy a někteří lidé se do něj ani nevešli. Je potřeba zvýrazněný obdélník přesunout o něco níže a roztáhnout tak, aby výběr obsahoval všechny postavy. Pokud budete s výběrem spokojeni, klikněte na tlačítko Oříznout, čímž dojde k uložení upraveného náhledu.

Upravit

Jak je uvedeno v popisu, úpravou náhledu se myslí jeho kompletní nahrazení jiným obrázkem z vašeho počítače. Může se to hodit ve dvou případech, pokud nejste v místním editoru spokojeni s editací obrázku a chcete si ho upravit ve svém grafickém programu nebo pokud chcete mít pro obrázek speciální náhledy na míru, což se může hodit v kampaních. Máte tak např. pro kampaň vložený jeden obrázek, který má různé náhledy, tím pádem se na různých místech webu zobrazuje v různých variantách.

Postup je snadný, na předchozí stránce u daného náhledu, který chcete přepsat, klikněte na ikonu [Upravit]. V novém okně tlačítkem Vybrat soubor vyberte ze svého počítače nový obrázek a klikněte na tlačítko Uložit. Rozměr náhledu nahraného obrázku se automaticky změní.

Smazat

Klasické odstranění položky, v tomto případě náhledu, s následnou otázkou na potvrzení této akce.

Vkládání náhledů do obsahu

Upozornění na úvod: do obsahové části stránek vždy vkládejte náhledy v takových rozměrech, které jsou k dispozici, nikdy vložené obrázky dodatečně na stránce neroztahujte, nezmenšujte nebo neupravujte poměr stran!  Pokud vám velikost náhledu na stránce nevyhovuje, upravte ho v CMS nebo znovu nahrajte již vyhovující upravenou verzi.

Samotné vložení obrázku probíhá tak, že nejprve umístíte kurzor v textu na místo, kam chcete náhled vložit. K vložení obrázků slouží v editoru ikona [Vložit obrázek] nebo příkaz v menu Vložit > Vložit obrázek.

V dialogovém okně postupujte podle bodů:

1. Vyberte obrázek z archivu souborů (v tuto chvíli nezáleží na náhledu).
2. Z rozbalovací nabídky vyberte náhled, který nejvíce vyhovuje vaší představě.
3. Zde vyberte, co se má stát, pokud návštěvník na obrázek klikne. Je možné mu zobrazit originální obrázek, jiný náhled nebo na kliknutí nereagovat. Pozor, nekombinujte tuto akci s vložením přímého odkazu přes editor!
4. Rámeček je v charitních šablonách vypnutý, proto zatržítko aktuálně nic neovlivňuje.
5. Obtékání textem a jinými prvky na stránce, možné varianty bez akce, vlevo, vpravo. Vhodné pro umístění malého náhledu do dlouhého textu pro oživené, ale nevhodné pro kombinaci s jinými obrázky, seznamy, nebo krátkými odstavci. Dnes se příliš nevyužívá, ilustrační obrázky se centrují na samostatné řádce.
6. Nastavení vertikální pozice v řádce říká obrázku, jak se má chovat vůči okolním prvkům. V případě různě vysokých náhledů na jednom řádku můžete ovlivnit jejich zarovnání, tedy jestli se mají řadit nahoru, dolu nebo na střed (+ několik dalších pozic dle specifikace stylů HTML).
7. Odsazení od textu pro všechny čtyři strany. Jako jednotka odsazení je zde použit pixel.
8. Galerie – v tuto chvíli nevyužito.
9. Popisu obrázku věnujte zvýšenou pozornost! Zlepšíte tím dojem z procházení webu nejen pro nevidomé návštěvníky, ale pomáháte tím SEO svého webu. Položka je povinná.

Po vyplnění všech povinných položek klikněte na tlačítko [OK], čímž vložíte náhled od obsahu.

V případě, že chcete náhled, jeho umístění nebo vlastnosti změnit, klikněte na něj, čímž se aktivuje ikona [Vložit obrázek], která tentokrát zobrazí již předvyplněné okno pro úpravy.

Hromadné úpravy náhledů

Ručně upravovat náhledy jeden po druhém např. pro celou fotogalerii je příliš pracné. Proto existuje v archivu souborů možnost hromadné úpravy. Nejprve označte buďto jednotlivé obrázky pomocí zatržíka (1) nebo vyberte všechny obrázky ve složce pomocí zatržítka ve spodní liště s názvem Vybrat vše. V rozbalovací nabídce (3) vyberte možnost Aktualizovat náhledy a volbu dokončete tlačítkem Provést (4).

Po úspěšném výběru obrázků následuje výběr náhledů, které chcete nově vytvořit nebo přegenerovat. Opět můžete pomocí zatržítek (1) vybrat ze seznamu buď jednotlivé náhledy, nebo můžete zvolit standardní předvýběr (2), případně skupinové označení nebo vymazání celého výběru (3). Pro dokončení výběru a zahájení tvoření náhledů stiskněte tlačítko [Aktualizovat].

Protože vytvoření velkého množství náhledů je náročné na čas a systémové prostředky serveru, je celá úloha zařazena do fronty na pozadí. O průběhu stavu fronty, zpracování vaší úlohy a konečném výsledku jste postupně informováni podobným způsobem:

 
Přehled velikostí náhledů a jejich použití

Počet druhů náhledů se v průběhu vývoje webů mění, některé nové se přidávají, některé již nepoužívané se ruší. Zde je jejich aktuální seznam:

Následující náhledy jsou dočasně drženy kvůli zpětné kompatibilitě s weby verze 2010. Nepoužívejte je, v brzké době budou odstraněny.

Náhledy pro centrální web Tříkrálové sbírky:

Náhledy pro web Youngcaritas.cz:

Tipy a triky + často kladené otázky: