Slike i galerije proizvoda u web shopu

Dodavanje slika i galerija proizvoda

Slike proizvoda i Galerije proizvoda dodajemo na desnoj strani stranice proizvoda, najčešće ispod kategorija i oznaka proizvoda.

Dodavanje slika proizvoda u WooCommerce 3.1

Slika: Dodavanje slika proizvoda u WooCommerce 3.1

Slika proizvoda

Slika proizvoda je glavna slika proizvoda. Ova slika se pojavljuje kao početna slika na stranici proizvoda, a isto tako se pojavljuje u prikazu proizvoda unutar kategorija proizvoda.

 

Dodavanje osnovne slike proizvoda u WooCommerce 3.1

Slika: Dodavanje osnovne slike proizvoda u WooCommerce 3.1

Dodavanje slika je isto kao i kod dodavanja Istaknutih slika u objavama i stranicama WordPressa. Ukratko, ako još nije postavljena slika proizvoda kliknemo na link Postavi sliku proizvoda i odaberemo sliku iz Zbirke medija ili kliknemo na Prijenos zapisa i downloadamo je sa računala.

Galerija proizvoda

Dodavanje slika u Galeriju proizvoda

Dodavanje slika u galeriju je isto kao i dodavanje Slike proizvoda, s time da možemo istovremeno odabrati više slika za galeriju.

Redoslijed slika u galeriji se lako mijenja principom ‘drag and drop’ (uhvatimo sliku i ispustimo je na željenu poziciju).

Slike uklanjamo iz Galerije slika tako da kliknemo na crveni ‘x’ koji se pojavi u gornjem desnom kutu slike kada prelazimo pokazivačem preko nje.

Dodavanje slika u galeriju proizvoda u WooCommercu 3.1

Slika: Dodavanje slika u galeriju proizvoda u WooCommercu 3.1

Dimenzije slika

Standardne dimenzije slika

Standardne dimenzije slika proizvoda postavljamo tako da u izborniku odaberemo: WooCommerce > Postavke > Proizvodi > Prikaz > Slike proizvoda.

Standardne dimenzije slika proizvoda u WooComerce 3.1

Slika: Standardne dimenzije slika proizvoda u WooComerce 3.1

Možemo postaviti dimenzije tri vrste slika proizvoda. Prva vrijednost je širina slike, a druga vrijednost visina slike (‘300×300’).

  • Katalog slike se pojavljuju u prikazu proizvoda unutar kategorija proizvoda, ili ‘Upsells/Cross-sells’ proizvoda.
  • Slika jednog proizvoda je glavna slika proizvoda na stranici pojedinačnog proizvoda.
  • Proizvod Minijature se obično koristi za prikaz sličica ispod slike proizvoda, a koje predstavljaju slike unutar Galeriji slika.

Kada kliknemo na Sliku jednog proizvoda otvorit će se novi prozor sa slikom proizvoda u originalnoj veličini, a kretanjem naprijed-nazad možemo vidjeti u punoj veličini sve slike iz Galerije slika.

Originalne slike proizvoda koje smo skinuli sa računala automatski se prilagođavaju na postavljene dimenzije.

Na primjer, ako je originalna slika 300×600 a u postavkama za Proizvod minijature je postavljena dimenzija 100×100, umanjena slika bit će 100×200 (ako nije označeno polje Grubo odrezati – zadržat će proporcije originalne slike).

Ako je odabrana opcija Grubo odrezati slika će biti umanjena na dimenzije 100×100 (bit će odrezana kako bi sve slike bile istih dimenzija).

Ukoliko izvršimo promjene u postavkama veličina slika nakon što su slike već dodane proizvodima, da bi se prikazivale nove dimenzije potrebno je ponovno generirati ove slike. Da bi se to uradilo potrebno je instalirati neki od dodataka za tu namjenu, kao što je dodatak ‘Regenerate Thumbnails’.

Prikaz slika posjetiteljima

Kada smo dodali sliku proizvoda i slike u galeriju slika iste se prikazuju posjetiteljima na stranici proizvoda. Kada prijeđemo pokazivačem preko slike moguće je zumiranje proizvoda, a kada kliknemo na ikonicu sa povećalom otvara se prozor sa prikazom originalne slike. Klikom na neku od umanjenih sličica ispod glavne slike proizvoda prikazat će se ta slika.

Prikaz slika proizvoda posjetiteljima u WooCommece 3.1

Slika: Prikaz slika proizvoda posjetiteljima u WooCommece 3.1

Zumiranje slike proizvoda u WooCommerce 3.1

Slika: Zumiranje slike proizvoda u WooCommerce 3.1

Mutne slike

Iako smo pravilno postavili veličine slika u WooCommercu može nam se dogoditi da su slike ‘mutne’ ili slabe rezolucije.

Najčešći uzrok tome su postavke teme koju koristimo za našu web stranicu. Na primjer, ako je tema napravljena tako da prikazuje slike proizvoda veličine 500×500, a mi smo u postavkama WooCommerca postavili 300×300, posjetitelji će vidjeti mutne ili slike slabe rezolucije.

Podrška za Retina zaslone (Iphone, Ipad)

Također trebamo imati na umu da uz standarden rezolucije ekrana, danas imamo i tzv. Retina zaslone (npr. kod Iphone mobitela) koji su u mogućnosti na istoj veličini ekrana prikazati sliku dvostruke kvalitete. Za tu svrhu za prikaz slike veličine 100×100 pixela, mi bi u WooCommerce postavkama trebali postaviti sliku veličine 200×200 pixela. Naravno, treba imati u vidu da se većim slikama usporava brzina učitavanja.