--- title: "Képgaléria" articleId: "photogallery" canonical: https://tamogatas.shoptet.hu/kepgaleria/ breadcrumb: "Shoptet Támogatás / Termékek / Termékbemutató" language: hu sections: - { title: "Képgaléria", level: 2, url: "https://tamogatas.shoptet.hu/kepgaleria/#kepgaleria" } - { title: "Termékváltozat képe", level: 4, url: "https://tamogatas.shoptet.hu/kepgaleria/#termekvaltozat-kepe" } - { title: "Műszaki jellemzők", level: 2, url: "https://tamogatas.shoptet.hu/kepgaleria/#muszaki-jellemzok" } - { title: "Képek megjelenítése", level: 3, url: "https://tamogatas.shoptet.hu/kepgaleria/#kepek-megjelenitese" } - { title: "A termékképek kivágásainak URL-címei", level: 3, url: "https://tamogatas.shoptet.hu/kepgaleria/#a-termekkepek-kivagasainak-url-cimei" } --- # Képgaléria Ebben a cikkben bemutatjuk, hogy hogyan tölthet fel képeket a termékek képgalériájába, valamint itt találja a termékfotók műszaki jellemzőire vonatkozó információkat is. A carouselben és a bannerekben lévő képekről a [Bannerek, logók és sablon fejlécek mérete](https://tamogatas.shoptet.hu/bannerek-logok-es-fejlecek-meretei-a-sablonokon/) bejegyzésben olvashat. A 360 fokos képekről a [360°-os képek](https://tamogatas.shoptet.hu/360-os-fenykepek/) bejegyzésben talál információkat. ## Képgaléria A **Képgaléria** a **Termékek** menüpontban a termék részletében, az **Általános adatok** fülön található. A termék képét a **Feltöltés** gombbal tudja hozzáadni. A feltöltés után az elölnézeti fotó alatt négy ikon jelenik meg. Kitörölheti a képet, megjelenítheti az eredeti képet, megváltoztathatja a helyét a sorban. A vízszintes vonalas ikon segítségével módosítani tudja a termék feliratát. A HTML-ben ez egy `alt` jel, azaz a kép alternatív felirata. A helyes és tárgyilagos felirat támogatja a SEO-t is. #### Termékváltozat képe Azokat a fotókat, amiket a terméke változataival szeretne hozzáadni, az előbbiekben leírtak szerint töltse fel a webáruházba. Bővebb információ a [Képek hozzárendelése a változatokhoz](https://tamogatas.shoptet.hu/kepek-hozzarendelese-a-termekvaltozatokhoz/) bejegyzésben található. ## Műszaki jellemzők Valamennyi sablonon a 1024 px minimális képszélesség javasolt. A magasságot aszerint válassza meg, hogy milyen képarányt szeretne a sablonban használni. Az elérhető képarány most 4:3, majd 2:3, 1:1 és 3:4. A beállítást a **Beállítások → Termékek → Termékek megjelenítése** menüpontban végezheti el. Az alapértelmezett képarány minden sablonnál 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 A régebbi Pop, Rock, Soul és Echo sablonokon más képarány nem választható. Itt a javasolt képméret mindig 1024 x 768 px. **A képfájl maximális mérete 2 MB. A JPG, PNG, GIF és WebP a megengedett formátum.** Azokat a képeket, melyek meghaladják a javasolt méreteket, a rendszer automatikusan úgy kicsinyíti le, hogy illeszkedjenek az ajánlott méretekhez. A képek nem lesznek levágva és megnyújtva. A hiányzó hely fehér színnel kerül kitöltésre. ### Képek megjelenítése A feltöltött **képeket WebP formátumba konvertálja a rendszer, amikor megjeleníti őket a végfelhasználó számára**, kivéve az alábbiakban felsorolt eseteket. A WebP-re való átalakítás nem csak a termékfotóknál, hanem a CDN-szerverünkön tárolt összes képnél is megtörténik, ami azt jelenti, hogy ezek URL-címe a következővel kezdődik: `https://cdn.myshoptet.com/usr//user/`. Ez gyakorlatilag az összes e-shopba feltöltött képre vonatkozik, mint például a bannerek, logók, cikkekben található képek, stb. A WebP-re konvertálás automatikusan történik a feltöltött fájlokból. Ezeket az előző részben említett [műszaki jellemzők](https://tamogatas.shoptet.hu/kepgaleria/#muszaki-jellemzok) szerint kell feltölteni. A képek közvetlenül WebP formátumban történő feltöltése jelenleg nem lehetséges. Az átalakítás után a fájl kiterjesztése változatlan marad, így például az `image.jpg` WebP formátumban jelenik meg, de a kiterjesztés továbbra is `.jpg` lesz. A WebP-re való átalakítás **nem történik meg** a következő esetekben (a szabályok nem csak a termékképekre vonatkoznak): * a felhasználó böngészője nem támogatja a WebP formátumot * a kép `.gif`, `.ico` vagy `.svg` kiterjesztéssel rendelkezik * a fájl videoformátum-kiterjesztéssel rendelkezik, például `.mp4`, `.mkv` vagy `.avi` * a fájlnév `APNG`-vel kezdődik, és `.png` kiterjesztéssel rendelkezik – ez a szabály biztosítja az animált PNG-k (APNG formátum) megfelelő megjelenítését * a kép felbontása nagyobb, mint 75 Mpx * A WebP-re való átalakítás váratlan okok miatt nem lehetséges ### A termékképek kivágásainak URL-címei A termékképek kivágásainál **új URL-struktúrát** használunk. Korábban az URL csak a kép elérési útját és a kérdőjel utáni rövid paramétert tartalmazta: `https://cdn.myshoptet.com/usr/www.webaruhaz-domain.hu/user/shop/big/165_165-batmanuv-hrnek.jpg?59393c3a` Az új URL-cím **query paramétereket** tartalmaz, amelyek meghatározzák a kért kivágást és annak feldolgozását, például az `x` és `y` méretet, a `q` minőséget, a `ts` időbélyeget és az `sg` aláírást: `https://cdn.myshoptet.com/usr/www.webaruhaz-domain.hu/user/shop/big/165_165-batmanuv-hrnek.jpg?ff=1&x=1024&y=768&q=85&r=1&ts=59393c3a&sg=df3f0411` Az URL-cím **biztonsági aláírást** tartalmaz (`sg` paraméter), amely ellenőrzi, hogy a méreteket és a további paramétereket a Shoptet hozta létre. Ha az URL-ben lévő paraméterek megváltoznak, az aláírás már nem fog egyezni, ezért így nem lehet saját kivágást létrehozni. Az új megoldás **nem az URL útvonalában szereplő mappa alapján határozza meg a végeredményt**, például `big`, `related` stb., hanem a query paraméterek alapján. > **Infó** > > **A változás minden termékképre vonatkozik.** Ha a webáruház nem módosítja a képek elérési útját például HTML-szerkesztőben, saját JavaScripttel vagy partneri megoldással, akkor a képek megjelenítésére várhatóan nincs hatása. Ellenőrzést főleg azoknál az egyedi módosításoknál javaslunk, amelyek a képek URL-címeivel dolgoznak. **A korábbi URL-struktúra egyelőre támogatott.** Ha a korábbi működésre van szükség, a query paraméterek között csak a `ts` értéket hagyja meg, például: `https://cdn.myshoptet.com/usr/www.webaruhaz-domain.hu/user/shop/big/165_165-batmanuv-hrnek.jpg?ts=59393c3a`