Fotogaléria

V článku nájdete informácie o nahrávaní fotografií do fotogalérie produktu a technickú špecifikáciu produktových fotografií.

O obrázkoch v carouseli a banneroch sa dočítate v článku Rozmery bannerov, loga a záhlavia na šablónach. Informácie o otáčavých fotografiách nájdete v článku 360° fotografie.

Fotogaléria

Sekciu Fotogaléria nájdete umiestnenú v Produkty → Prehľad na detaile produktu. Obrázok produktu pridáte tlačidlom Nahrať (obrázok 01).

Po nahratí sa pod náhľadovou fotkou objavia štyri ikonky. Obrázok môžete zmazať, zobraziť originálny obrázok, presunúť ho v poradí.

Pomocou ikonky s vodorovnými čiarami upravujete popis obrázku produktu. V HTML ide o značku alt, teda alternatívny popis obrázku. Správny a vecný popis napomáha SEO.

Obrázok variantu produktu

Fotky, ktoré chcete pridať k variantom vášho produktu nahrajte na e-shop tak, ako je uvedené vyššie. Viac informácií nájdete v článku Priradenie obrázkov k variantom.

Technické špecifikácie

Odporúčaná minimálna šírka obrázku na všetkých šablónach je 1024 px. Výšku zvoľte podľa toho, aký pomer obrázkov chcete v šablóne použiť. Dostupné pomery sú teraz 4:3, 2:3, 1:1 a 3:4. Nastavenie vykonáte v Nastavenia → Produkty → Zobrazenie. Predvolený pomer obrázku na všetkých šablónach je 4:3.

• 4:3 → 1364 x 1024 px,
• 2:3 → 1024 x 1536 px,
• 1:1 → 1024 x 1024 px,
• 3:4 → 1024 x 1364 px.

Iný pomer obrázkov nie je možné zvoliť na starších šablónach Pop, Rock, Soul a Echo. Tu je odporúčaná veľkosť obrázkov 1024 x 768 px.

Maximálna veľkosť súboru obrázka je 2 MB. Povolené formáty sú JPG, PNG, GIF a WebP.

Obrázky, ktoré presiahnu odporúčané rozmery, systém automaticky zmenší tak, aby svojimi rozmermi pasovali do odporúčaných rozmerov. Obrázky sa neorežú a nesploštia. Chýbajúci priestor je vyplnený bielou farbou.

Zobrazovanie obrázkov

Nahrané obrázky sú pri zobrazení koncovému používateľovi prevádzané do formátu WebP, s výnimkou prípadov uvedených nižšie. Konverzia do WebP prebieha nielen pri produktových fotografiách, ale pri všetkých obrázkoch, ktoré sú umiestnené na našom CDN serveri, tzn. ich URL začína https://cdn.myshoptet.com/usr/<domena_e-shopu>/user/. Jedná sa tak prakticky o všetky obrázky, ktoré do e-shopu nahráte, teda nielen produktových fotografií, ale napr. aj bannerov, log, obrázkov v článkoch apod.

Konverzia do WebP prebieha automaticky z nahraných súborov. Tie je k produktom potrebné nahrávať podľa technických špecifikácií uvedených v predchádzajúcej sekcii. Nahratie obrázkov priamo vo formáte WebP v súčasnosti nie je možné. Po konverzii zostáva prípona u názvu súboru stále rovnaká, teda napr. obrazok.jpg bude zobrazený vo formáte WebP, ale prípona bude stále .jpg.

Ku konverzii do WebP nedochádza v nasledujúcich prípadoch (pravidlá sú platné nielen pre produktové obrázky):

• prehliadač používateľa nepodporuje formát WebP
• obrázok má príponu .gif, .ico, alebo .svg
• súbor má príponu video formátu .mp4, .mkv nebo .avi
• názov súboru začína na APNG a má príponu .png – toto pravidlo slúži pre správne zobrazenie animovaných PNG (formát APNG)
• rozlíšenie obrázku je väčšie ako 75 Mpx
• konverzia obrázku do WebP nie je z neočakávaných dôvodov možná

URL adresy výrezov produktových obrázkov

Pri výrezoch produktových obrázkov používame novú štruktúru URL adries. Pôvodne URL obsahovala iba cestu k obrázku a krátky parameter za otáznikom:

https://cdn.myshoptet.com/usr/www.domena-eshopu.sk/user/shop/big/165_165-batmanuv-hrnek.jpg?59393c3a

Nová URL adresa obsahuje query parametre, ktoré určujú požadovaný výrez a jeho spracovanie, napríklad rozmery x a y, kvalitu q, časovú značku ts a podpis sg:

https://cdn.myshoptet.com/usr/www.domena-eshopu.sk/user/shop/big/165_165-batmanuv-hrnek.jpg?ff=1&x=1024&y=768&q=85&r=1&ts=59393c3a&sg=df3f0411

URL adresa obsahuje bezpečnostný podpis (parameter sg), ktorý overuje, že rozmery a ďalšie parametre vytvoril Shoptet. Ak sa parametre v URL zmenia, podpis už nebude sedieť, preto si takto nie je možné vytvoriť vlastný výrez. Nové riešenie zároveň neurčuje výsledný výrez podľa použitej cesty v URL, ako je big, related a pod., ale podľa query parametrov.

Pôvodné riešenie je zatiaľ podporované. Ak potrebujete použiť pôvodné správanie, ponechajte v query parametroch iba ts, napríklad:

https://cdn.myshoptet.com/usr/www.domena-eshopu.sk/user/shop/big/165_165-batmanuv-hrnek.jpg?ts=59393c3a