Obrázky

Obrázky sú neoddeliteľnou súčasťou každého produktu, kategórie, článku, alebo inej stránky eshopu.Upgates umožňuje vkladať ľubovoľný počet týchto obrázkov z jedného spoločného Správcu súborov.

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

Správca súborov

Správca súborov je miesto, kde môžete nahrávať, vyberať a spravovať rôzne obrázky a súbory, ktoré budete potrebovať k vášmu projektu.

Správcu súborov otvorte z niekoľkých miest:

1. Vo vašej administrácii v ľavom menu vyberte položku Súbory.
2. Z akéhokoľvek produktu, objednávky, kategórie, článku pokiaľ vkladáte / nahrávate obrázok do samotného obrázku, alebo textu. (viac tu)

Typy obrázkov

Každý obrázok môže mať jeden alebo viac typov. Jednotlivé typy následne určujú, kde sa daný obrázok zobrazí.

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

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ávca súborov, v ktorom si môžete vybrať niektorý z už nahraných obrázkov v e-shope, alebo môžete dodatočne nahrať svoj vlastný cez tlačidlo +Nový.
     Výber obrázku do konkrétnej sekcie potvrdíte tlačidlom "+".
     
   • 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 položke, ktorú editujete.
5. Nastavte, či má byť obrázok použitý ako zoznamový, hlavný alebo ak chcete vytvoriť galériu. (Typy obrázkov)
6. Uložte.

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

Hromadné priradenie obrázkov môžete vykonať dvoma spôsobmi:

1. Pomocou hromadnej úpravy (ak jej sekcia umožňuje)
2. Za pomocou Importu (viac tu), ktorý následne využíva tzv. Dočasné FTP (viac tu).

Pridanie obrázku do 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.

Obrázky pre konkrétny jazyk

Obrázky sekcií (Produktov (vrátane variantov), ​​Kategórií, Aktualít, Článkov a Riadcu) môžete obmedziť aj podľa konkrétneho jazyka.
Jednoducho tak docielite správne zobrazenie napríklad produktu so správnou etiketou, ktorú daná krajina vyžaduje.

Pozor! Táto funkcia je prístupná iba od verzie šablón 5.2 a vyššie.

1. Otvorte si vami vybranú sekciu (Produkty, Kategórie, atď.),
2. Vyberte príslušnú položku, ktorú chcete editovať,
3. Prejdite do oddielu Obrázkov,
4. Vyberte obrázok, ktorý chcete editovať a kliknite na editačnú ceruzku,
   
5. Vyberte, v ktorých mutáciách chcete obrázok zobrazovať,
   
6. Zmeny uložte.

Rozdelenie obrázkov na jazyky

Akonáhle aspoň jeden obrázok je obmedzený pre jazykové mutácie, zobrazia sa v oddieli obrázkov záložky jednotlivých jazykov.

Ak sa prepnete na konkrétnu záložku jazykovej mutácie, obrázky nezobrazené v jazykovej mutácii spoznáte tak, že sú zašednuté.
Také obrázky potom ľahko identifikujete a môžete opätovne cez editačnú ceruzku v konkrétnej jazykovej mutácii opätovne zobraziť.

Obrázok, ktorý je nastavený ako hlavný, alebo zoznamový je automaticky zobrazený v každej jazykovej mutácii a nemožno ho nijako obmedziť.

Titulky a Alt popisky pri obrázkoch

Alternatívne (Alt) texty alebo titulky obrázkov, sú dôležité z pohľadu SEO optimalizácie. Pokiaľ nie je titulok vyplnený, nezobrazuje sa na e-shope.

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.
• V správcovi súborov - Tu pridané titulky sa následne prepíšu na všetky umiestnenia, kde je obrázok použitý.
• 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

Editácia na konkrétnej stránke

1. V menu administrácie zvoľte príslušnú sekciu (Produkty, Kategórie, Články, atď.),
2. Vyberte položku, ktorú chcete editovať,
3. Prejdete do časti Obrázky,
4. Kliknite na ikonku ceruzky v náhľade obrázku,
   

5. Upravte titulok,
   

6. Zmeny uložte.

Editácia v Správcovi súborov

1. V menu administrácie zvoľte Súbory,
2. Otvorí sa vám správca súborov,
3. Kliknite na ikonku ceruzky v náhľade obrázku,
   
4. Upravte titulok,
   
5. Zmeny uložte.

Obrázok pre socilanie siete

Pokiaľ sa rozhodnete zdieľať svoj obsah na socilanie siete, je veľmi dôležité, aby sa zobrazil správny obrázok.

Obrázok môžete nahrať pre: Produkty, Kategórie (vrátane hlavnej stránky), Články, Aktuality a Riadca

Pozor! Táto funkcia je prístupná iba od verzie šablón 5.2 a vyššie.

Nastavenie obrázku

1. Vo svojej administrácii otvorte sekciu, ktorú budete chcieť upravovať (Produkty, Kategórie, Články, atď.),
2. Vyberte položku zo zoznamu,
3. Prejdite do oddielu Obrázky,
4. Kliknite na tlačidlo +Pridať,
5. Vyberte Obrázok pre sociálne siete a do novo pridanej sekcie v obrázkoch kliknite na ikonu obrázku,
6. 
7. Vyberte obrázok sa Správca súborov,
   
8. Vykonané zmeny uložte.

Následne akonáhle budete svoj tento obsah zdieľať, a daná sociálna sieť správne prečíta og:image v kóde stránok bude zobrazený vami vybraný obrázok.

hierarchia obrázkov v obsahu pre sociálne siete

1. Obrázok pre sociálne siete
2. Hlavný obrázok obsahu
3. Logo eshopu

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

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 (zoom) hlavného obrázku 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ť.