Obrázky

Upgates umožňuje vkládat libovolný počet obrázků z jednoho společného Správce souborů do jednotlivých stránek produktů, kategorií, článků atd.

Alternativní text pro obrázky můžete nastavit u obrázku tím, že u něj vyplníte titulek. Tuto úpravu provedete pomocí ikony tužky po najetí na obrázek ve správci souborů (více zde).

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

Typy obrázků

• Hlavní - Po zaškrtnutí pole se 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ý - Po zaškrtnutí pole se 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.

Upozornění! 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.

Postup v administraci

1. V menu administrace zvolte sekci, do které chcete obrázek vložit.
2. Vyberte konkrétní položku.
3. Sjeďte níže do oddílu Obrázky.
4. Klikněte na tlačítko + Nový.
   
5. Vyberte požadovaný obrázek ze správce souborů.
6. Klikněte na tlačítko + po najetí na obrázek.
   
7. Nastavte zda má být seznamový, hlavní nebo chcete vytvořit galerii.
8. Uložte.

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

Hromadné nahrání a přiřazení obrázků k položkám se provádí pomocí dočasného FTP (více zde) spolu s importem (více zde).

0brázek uvnitř textu

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

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

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.

Upozornění! 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ázků je do 150 kB. Existuje řada online komprimátorů, které umí zmenšit velikost obrázku téměř bez snížení jeho kvality. Vyzkoušejte např. https://tinypng.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).

Titulky u obrázků

Alternativní texty neboli titulky obrázků, jsou důležité z pohledu SEO. V administraci je můžete upravovat následujícím způsobem.

Možnosti zadávání titulků

Titulek můžete zadávat na úrovni:

• Na konkrétní stránce (např. produkt) - Pomocí modulu Obrázky. V takovém případě se bude zobrazovat jen tam na dané stránce. Více zde.
• 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íce zde.
• 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.

Pokud není titulek vyplněný, nezobrazuje se na e-shopu.

Postup v administraci

1. V menu administrace zvolte sekci Soubory.
2. Otevře se vám správce souborů. V něm najeďte myší na daný obrázek.
3. Klikněte na ikonku tužky pro jeho editaci.
4. Vyplňte pole titulek.
5. Uložte.

Obrázky pro sdílení stránek (og)

Více informací najdete 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 nebo Aktuality). 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í hlavního obrázku produktu 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.