Obrázky

Obrázky jsou nedílnou součástí každého produktu, kategorie, článku, anebo jiné stránky eshopu. Upgates umožňuje vkládat libovolný počet těchto obrázků z jednoho společného Správce souborů.

Systém podporuje obrázky formátu: JPG, PNG, WebP a SVG. U konkrétních prvků mohou být dostupné pouze vybrané z těchto formátů. 
Systém nepodporuje: WebP "animované".

Správce souborů

Správce souborů je místo, kde můžete nahrávat, vybírat a spravovat různé obrázky a soubory, které budete potřebovat k vašemu projektu.

Správce souborů otevřete z několika míst:

1. Ve vaší administraci v levém menu vyberte položku Soubory.
2. Z jakéhokoli produktu, objednávky, kategorie, článku pokud vkládáte / nahráváte obrázek do samotného obrázku, anebo textu. (více zde)

Typy obrázků

Každý obrázek může mít jeden nebo více typů. Jednotlivé typy následně určují, kde se daný obrázek zobrazí.

• Hlavní - Obrázek se zobrazí v detailu stránky (např. detail produktu, kategorie nebo článku). Jedná se o větší obrázek umístěný pod hlavním nadpisem vedle textu stránky. Po kliknutí na obrázek se objeví zvětšený formát obrázku ve slideshow.
• Seznamový - Obrázek zobrazí v seznamech položek (např. produktů, kategorií, článků atd.). Po kliknutí na obrázek se přesunete do detailu dané položky. Pokud žádný detail neexistuje, otevře se větší formát obrázku ve slideshow.
• Ostatní obrázky - Pokud obrázek neoznačíte jako hlavní ani seznamový, vloží se do galerie pod obsahem stránky. Po kliknutí na obrázek se objeví zvětšený formát obrázku ve slideshow. Více zde.

Pozor! V zobrazení pro mobil se slideshow nezobrazuje.

Přidání obrázku do stránky

Ke každému článku, kategorii, produktu atp. můžete přidat specifický obrázek následujícím způsobem.

1. V menu administrace zvolte požadovanou sekci (produkty, kategorie atd.).
2. Vyberte konkrétní položku z této sekce.
3. V detailu této položky se přesuňte do oddílu Obrázky.
4. Najetím na tlačítko + Přidat se zobrazí dvě možnosti:
    
   • Správce souborů
     Otevře okno Správce souborů, ve kterém si můžete vybrat některý z již nahraných obrázků v e-shopu, anebo můžete dodatečně nahrát svůj vlastní přes tlačítko +Nový.
     Výběr obrázku do konkrétní sekce potvrdíte tlačítkem "+".
     
   • Nahrát obrázek
     Otevře okno pro nahrání souboru z vašeho zařízení (počítač, tablet atd.). Soubor se nahraje do Správce souborů a zároveň se přidá k položce, kterou editujete.
5. Nastavte, jestli má být obrázek použit jako seznamový, hlavní nebo chcete-li vytvořit galerii. (viz Typy obrázků)
6. Uložte.

Hromadné přiřazení obrázků k položkám

Hromadné přiřazení obrázků můžete provést dvěma způsoby:

1. Pomocí hromadné úpravy (pokud jí sekce umožňuje)
2. Za pomocí Importu (více zde), který následně využívá tzv. Dočasné FTP (více zde).

Přidání obrázku do textu

Obrázky nahrané do Správce souborů lze vložit také přímo do popisu stránky pomocí Textového editoru.

U takového obrázku se nezobrazí slideshow po rozkliknutí na detail.

Obrázky pro konkrétní jazyk

Obrázky sekcí (Produktů (včetně variant), Kategorií, Aktualit, Článků a Rádce) můžete omezit také podle konkrétního jazyka.
Jednoduše tak docílíte správného zobrazení například produktu se správnou etiketou, kterou daná země vyžaduje.

Pozor! Tato funkce je přístupná pouze od verze šablon 5.2 a výše.

1. Otevřete si vámi vybranou sekci (Produkty, Kategorie, atd..),
2. Vyberte příslušnou položku, kterou chcete editovat,
3. Přejděte do oddílu Obrázků,
4. Vyberte obrázek, který chcete editovat a klikněte na editační tužku,
   
5. Vyberte, ve kterých mutacích chcete obrázek zobrazovat,
   
6. Změny uložte.

Rozdělení obrázků na jazyky

Jakmile alespoň jeden obrázek je omezen pro jazykové mutace, zobrazí se v oddílu obrázků záložky jednotlivých jazyků.

Pokud se přepnete na konkrétní záložku jazykové mutace, obrázky nezobrazené v jazykové mutaci poznáte tak, že jsou zašedlé. 
Takové obrázky pak snadno identifikujete a můžete opětovně přes editační tužku v konkrétní jazykové mutaci opětovně zobrazit.

Obrázek, který je nastaven jako hlavní, anebo seznamový je automaticky zobrazen v každé jazykové mutaci a nelze jej nijak omezit.

Titulky a Alt popisky u obrázků

Alternativní (Alt) texty neboli titulky obrázků, jsou důležité z pohledu SEO optimalizace. Pokud není titulek vyplněný, nezobrazuje se na e-shopu.

Možnosti zadávání titulků

Titulek můžete editovat:

• Na konkrétní stránce (např. produkt) - Pomocí sekce Obrázky. V takovém případě se bude zobrazovat jen na dané stránce.
• Ve správci souborů - Zde přidaný titulek se následně propíše na všechna umístění, kde je obrázek použitý.
• V textovém editoru - Titulky obrázků se nevkládají ze správce souborů, ale je třeba je zapsat přímo v textovém editoru. Více zde.

Postup v administraci

Editace na konkrétní stránce

1. V menu administrace zvolte příslušnou sekci (Produkty, Kategorie, Články, atd.),
2. Vyberte položku, kterou chcete editovat,
3. Přejdete do části Obrázky,
4. Klikněte na ikonku tužky v náhledu obrázku,
   
5. Upravte titulek,
   
6. Změny uložte.

Editace ve Správci souborů

1. V menu administrace zvolte Soubory,
2. Otevře se vám správce souborů,
3. Klikněte na ikonku tužky v náhledu obrázku,
   
4. Upravte titulek,
   
5. Změny uložte.

Obrázek pro socilání sítě

Pokud se rozhodnete sdílet svůj obsah na socilání sítě, je velmi důležité, aby se zobrazil správný obrázek. 

Obrázek můžete nahrátvat pro: Produkty, Kategorie (včetně hlavní stránky), Články, Aktuality a Rádce

Pozor! Tato funkce je přístupná pouze od verze šablon 5.2 a výše.

Nastavení obrázku

1. Ve své administraci otevřete sekci, kterou budete chtít upravovat (Produkty, Kategorie, Články, atd.),
2. Vyberte položku ze seznamu,
3. Přejděte do oddílu Obrázky,
4. Klikněte na tlačítko +Přidat,
5. Vyberte Obrázek pro sociální sítě a do nově přidané sekce v obrázcích klikněte na ikonu obrázku,
   
6. Vyberte obrázek ze Správce souborů,
   
7. Provedené změny uložte.

Následně jakmile budete svůj tento obsah sdílet, a daná sociální sítě správně přečte og:image v kódu stránek bude zobrazen vámi vybraný obrázek.

hierarchie obrázků v obsahu pro sociální sítě

1. Obrázek pro sociální sítě
2. Hlavní obrázek obsahu
3. Logo eshopu

Rozměry a optimalizace obrázků

Rozměry obrázků si určuje systém sám podle toho, jak je nastaveno v grafice e-shopu (dle konkrétní grafické šablony). Vám stačí pouze vložit ten největší a nejkvalitnější obrázek, jaký máte k dispozici. Potřebné formáty náhledových obrázků budou vytvořeny automaticky.

U obrázků nahraných do Správce souborů systém automaticky zmenšuje rozměry na max. šířku nebo výšku 1 000 px.

Pozor! U jpg souborů při zmenšování dochází k dodatečné kompresi, což může mít za následek nepatrný pokles kvality obrázků. Chcete-li se tomuto vyhnout, nahrávejte obrázky, které nepřesáhnou výše uvedené maximální rozměry. 

Optimalizace velikosti obrázků

Velikost obrázků hraje významnou roli při celkové délce načítání stránky. Optimální velikost obrázku je do 150 kB. Existuje řada online komprimátorů, které umí zmenšit velikost obrázku téměř bez snížení jeho kvality. Můžete využít např. následující služby:

• formáty PNG, JPEG, WebP: https://tinypng.com/
• formát SVG: https://jakearchibald.github.io/svgomg/

Jestli potřebujete převést své obrázky ze stávajícího formátu do jiného, využijte např. online konvertor: https://cloudconvert.com/

Více informací o optimalizaci obrázků - Průvodce formáty obrázků pro web: JPEG, WebP, AVIF, PNG, GIF a SVG

Obrázky bez zmenšení a komprese

Pokud do Správce souborů vložíte obrázky do složky Grafika, ke zmenšování ani k dodatečné kompresi nedojde. Více o přidání souboru do správce v nápovědě zde.

Takovéto obrázky využijete zejména v grafice e-shopu, kde je důležitější kvalitní zobrazení ve větších formátech - bannery (více zde), headlines (více zde), Designer (více zde). Takovéto obrázky je však také třeba maximálně optimalizovat z důvodu rychlého načítání celého e-shopu. Viz. dále.

Kapacita disku

Pokud máte příliš zaplněnou kapacitu disku, příčinou bývá téměř vždy velký počet nahraných nebo importovaných obrázků, můžete je promazat (více zde) nebo přejít na tarif s větší kapacitou (více zde).

Skrytí hlavního obrázku

Pokud máte hlavní obrázek přidaný do stránky jen např. kvůli Open Graph a jinak ho na stránce zobrazovat vůbec nechcete, můžete ho skrýt pomocí předdefinovaného pole Skrýt hlavní obrázek v sekci Vlastní pole / Kategorie (případně také Články, Aktuality nebo Rádce). Více v nápovědě. 

V Open Graph tento obrázek zůstane. Více zde.

Zvětšení hlavního obrázku produktu

U hlavního obrázku v detailu produktu je možné zapnout jeho zvětšení (zoom) po najetí myší nebo dotykem u dotykové obrazovky.

Zvětšení je podmíněno dostatečně velkými rozměry cílového obrázku (aby bylo co zvětšovat).

Postup v administraci

1. V menu administrace zvolte sekci Nastavení / Produkty / Rozšířené.
2. V poli Zvětšení (zoom) hlavního obrázku nastavte Ano.
3. Uložte.
    

Pokud je zapnuto zvětšení hlavního obrázku, tak se nelze přesouvat mezi obrázky posunutím dotykem v mobilním zobrazení a naopak.

Alternativní obrázek v seznamu produktů

V seznamu produktů se při najetí myší na produkt změní fotka ze seznamové na alternativní. Cílem této funkce je zákazníkům v seznamu produktů umožnit rychlé zobrazení další fotky pro lepší představu o produktu. Následujícím způsobem můžete změnu obrázku po najetí myší deaktivovat.

Jako alternativní obrázek se zobrazí druhý obrázek v pořadí vložený k danému produktu.

Postup v administraci

1. V menu administrace zvolte sekci Nastavení / Produkty / Rozšířené.
2. V poli Alternativní obrázek v seznamu produktů nastavte Ano.
   
3. Uložte.

Editor obrázků

V administraci e-shopu je k dispozici editor obrázků, který lze použít pro různé úpravy obrázků nahraných v e-shopu.

Postup v administraci

1. V menu administrace zvolte sekci Soubory.
2. Po najetí na konkrétní obrázek klikněte na tlačítko pro spuštění editoru.
   
3. Obrázek se otevře ve vyskakovacím okně editoru. Zde v prvním řádku klikněte na funkci, kterou si přejete použít k úpravě.
   
4. Podle zvolené funkce se v druhém řádku zobrazí konkrétní možnosti, které lze použít. Klikněte na požadovanou funkci k úpravě.
   
5. Po dokončení všech požadovaných úprav klikněte na tlačítko uložit.