Obrázky

Upgates umožňuje vkladať ľubovoľný počet obrázkov z jedného spoločného Správcu súborov do jednotlivých stránok produktov, kategórií, článkov atď.

Alternatívny text pre obrázky môžete nastaviť pri obrázku tým, že pri ňom vyplníte titulok. Túto úpravu vykonajte pomocou ikony ceruzky po nabehnutí na obrázok v správcovi súborov (viac tu).

Systém podporuje obrázky formátu JPG, PNG, WebP a SVG. Pri konkrétnych prvkoch môžu byť dostupné len vybrané z týchto formátov.

Typy obrázkov

• Hlavný - Po zaškrtnutí poľa sa obrázok zobrazí v detaile stránky (napr. detail produktu, kategórie alebo článku). Ide o väčší obrázok umiestnený pod hlavným nadpisom vedľa textu stránky. Po kliknutí na obrázok sa objaví zväčšený formát obrázku v slideshow.
• Zoznamový - Po zaškrtnutí poľa sa obrázok zobrazí v zoznamoch položiek (napr. produktov, kategórií, článkov atď.). Po kliknutí na obrázok sa presuniete do detailu danej položky. Pokiaľ žiadny detail neexistuje, otvorí sa väčší formát obrázku v slideshow.
• Ostatné obrázky - Pokiaľ obrázok neoznačíte ako hlavný ani zoznamový, vloží sa do galérie pod obsahom stránky. Po kliknutí na obrázok sa objaví zväčšený formát obrázku v slideshow. Viac tu.

Pridanie obrázku do stránky

Ku každému článku, kategórii, produktu atď. môžete pridať špecifický obrázok nasledujúcim spôsobom.

Postup v administrácii

1. V menu administrácie zvoľte požadovanú sekciu (produkty, kategórie atď.).
2. Vyberte konkrétnu položku z tejto sekcie.
3. V detaile tejto položky sa presuňte nižšie do oddielu Obrázky.
4. Nabehnutím na tlačidlo + Pridať sa zobrazia dve možnosti:
   • Správca súborov: otvorí okno správcu súborov, v ktorom si môžete vybrať niektorý z už nahraných obrázkov v e-shope. Pri tomto obrázku kliknite na tlačidlo "+" pre jeho vloženie.
     
   • Nahrať obrázok: otvorí okno pre nahranie súboru z vášho zariadenia (počítač, tablet atď.). Súbor sa nahrá do Správcu súborov a zároveň sa pridá k tejto položke.
   
5. Nastavte či má byť zoznamový, hlavný alebo chcete vytvoriť galériu.
6. Uložte.

Hromadné priradenie obrázkov k položkám

Hromadné nahranie a priradenie obrázkov k položkám sa vykonáva pomocou dočasného FTP (viac tu) spolu s importom (viac tu).

Obrázok vnútri textu

Obrázky nahrané do Správcu súborov je možné vložiť tiež priamo do popisu stránky pomocou Textového editora. Viac tu.

Pri takom obrázku sa nezobrazí slideshow po rozkliknutí na detail.

Rozmery a optimalizácia obrázkov

Rozmery obrázkov si určuje systém sám podľa toho, ako je nastavené v grafike e-shopu (podľa konkrétnej grafickej šablóny). Vám stačí len vložiť ten najväčší a najkvalitnejší obrázok, aký máte k dispozícii. Potrebné formáty náhľadových obrázkov budú vytvorené automaticky.

Pri obrázkoch nahraných do Správcu súborov systém automaticky zmenšuje rozmery na max. šírku alebo výšku 1 000 px.

Optimalizácia veľkosti obrázkov

Veľkosť obrázkov hrá významnú úlohu pri celkovej dĺžke načítania stránky. Optimálna veľkosť obrázkov je do 150 kB. Existuje veľa online komprimátorov, ktoré dokážu zmenšiť veľkosť obrázku takmer bez zníženia jeho kvality. Môžete využiť napr. nasledujúce služby:

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

Ak potrebujete previesť svoje obrázky z existujúceho formátu do iného, využite napr. online konvertor: https://cloudconvert.com/

Viac informácií o optimalizácii obrázkov - Sprievodca formátmi obrázkov pre web: JPEG, WebP, AVIF, PNG, GIF a SVG

Obrázky bez zmenšenia a kompresie

Pokiaľ do Správcu súborov vložíte obrázky do zložky Grafika, k zmenšovaniu ani k dodatočnej kompresii nedôjde. Viac o pridaní súboru do správcu v nápovede tu.

Takéto obrázky využijete hlavne v grafike e-shopu, kde je dôležitejšie kvalitné zobrazenie vo väčších formátoch - bannery (viac tu), headlines (viac tu), Dizajnér (viac tu). Takéto obrázky je však tiež potrebné maximálne optimalizovať z dôvodu rýchleho načítania celého e-shopu. Viď ďalej.

Kapacita disku

Pokiaľ máte príliš zaplnenú kapacitu disku, príčinou býva takmer vždy veľký počet nahraných alebo importovaných obrázkov, môžete ich premazať (viac tu) alebo prejsť na tarifu s väčšou kapacitou (viac tu).

Titulky pri obrázkoch

Alternatívne texty alebo titulky obrázkov, sú dôležité z pohľadu SEO. V administrácii ich môžete upravovať nasledujúcim spôsobom.

Možnosti zadávania titulkov

Titulky môžete zadávať na úrovni:

• Na konkrétnej stránke (napr. produkt) - Pomocou modulu Obrázky. V takom prípade sa bude zobrazovať len tam na danej stránke. Viac tu.
• V správcovi súborov - Tu pridané titulky sa následne prepíšu na všetky umiestnenia, kde je obrázok použitý. Viac tu.
• V textovom editore - Titulky obrázkov sa nevkladajú zo správcu súborov, ale je potrebné ich zapísať priamo v textovom editore. Viac tu.

Postup v administrácii

1. V menu administrácie zvoľte sekciu Súbory.
2. Otvorí sa vám správca súborov. V ňom nabehnite myšou na daný obrázok.
3. Kliknite na ikonku ceruzky pre jeho editáciu.
   
4. Vyplňte pole titulkov.
5. Uložte.

Obrázky pre zdieľanie stránok (og)

Viac informácií nájdete tu.

Skrytie hlavného obrázku

Pokiaľ máte hlavný obrázok pridaný do stránky len napr. kvôli Open Graph a inak ho na stránke zobrazovať vôbec nechcete, môžete ho skryť pomocou preddefinovaného poľa Skryť hlavný obrázok v sekcii Vlastné pole / Kategórie (prípadne tiež Články, Aktuality alebo Radca). Viac v nápovede. 

V Open Graph tento obrázok zostane. Viac tu.

Zväčšenie hlavného obrázku produktu

Pri hlavnom obrázku v detaile produktu je možné zapnúť jeho zväčšenie (zoom) po nabehnutí myšou alebo dotykom na dotykovej obrazovke.

Zväčšenie je podmienené dostatočne veľkými rozmermi cieľového obrázku (aby bolo čo zväčšovať).

Postup v administrácii

1. V menu administrácie zvoľte sekciu Nastavenie / Produkty / Rozšírené.
2. V poli Zväčšenie hlavného obrázku produktu nastavte Áno.
3. Uložte.
   

Pokiaľ je zapnuté zväčšenie hlavného obrázku, tak sa nie je možné presúvať medzi obrázkami posunutím dotykom v mobilnom zobrazení a naopak.

Alternatívny obrázok v zozname produktov

V zozname produktov sa pri nabehnutí myšou na produkt zmení fotka zo zoznamovej na alternatívnu. Cieľom tejto funkcie je zákazníkom v zozname produktov umožniť rýchle zobrazenie ďalšej fotky pre lepšiu predstavu o produkte. Nasledujúcim spôsobom môžete zmenu obrázku po nabehnutí myšou deaktivovať.

Ako alternatívny obrázok sa zobrazí druhý obrázok v poradí vložený k danému produktu.

Postup v administrácii

1. V menu administrácie zvoľte sekciu Nastavenie / Produkty / Rozšírené.
2. V poli Alternatívny obrázok v zozname produktov nastavte Áno.
3. Uložte.

Editor obrázkov

V administrácii e-shopu je k dispozícii editor obrázkov, ktorý je možné použiť na rôzne úpravy obrázkov nahraných v e-shope.

Postup v administrácii

1. V menu administrácie zvoľte sekciu Súbory.
2. Po nabehnutí na konkrétny obrázok kliknite na tlačidlo pre spustenie editora.
   
3. Obrázok sa otvorí vo vyskakovacom okne editora. Tu v prvom riadku kliknite na funkciu, ktorú si prajete použiť na úpravu.
   
4. Podľa zvolenej funkcie sa v druhom riadku zobrazia konkrétne možnosti, ktoré je možné použiť. Kliknite na požadovanú funkciu na úpravu.
   
5. Po dokončení všetkých požadovaných úprav kliknite na tlačidlo uložiť.