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 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 níže 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. U tohoto obrázku klikněte na tlačítko "+" pro jeho vložení.
    • 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 této položce.
  5. Nastavte, jestli má být obrázek použit jako seznamový, hlavní nebo chcete-li vytvořit galerii.
  6. 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) společně s importem (více zde).

Obrá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á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:

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

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

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.
Na této stránce

Další zdroje informací

Facebook poradna

Výměna zkušeností, rady a tipy mezi provozovateli e-shopů na systému UPgates.

Přejít do poradny

Akademie

Získejte znalosti od našich specialistů na marketing, obchod, právo a podnikání.

Přejít do akademie

Novinky z Blogu

Co nového jsme pro vás připravili nebo chystáme najdete na blogu.

Přejít do blogu

Nepodařilo se Vám najít tu správnou odpověď?

Kontaktujte naši technickou podporu, která je tu pro vás od pondělí do pátku 8:00 až 16:00 hod.

Zákaznická podpora