Dodajanje in oblikovanje galerije slik

Galerije slik omogočajo pregledno in vizualno privlačno predstavitev večjega števila slikovnih datotek na spletnem mestu. V nadaljevanju je opisan celoten postopek dodajanja, povezovanja in oblikovanja galerije v urejevalniku Oxygen Builder v okolju WordPress.

Postopek dodajanja galerije slik

1. V urejevalniku Oxygen Builder se z miško pomaknite na del strani, kamor želite postaviti galerijo.

2. V zgornji levi orodni vrstici kliknite na  gumb +Dodaj (+Add).

3. V stranskem meniju razširite razdelek Pomočniki (Helpers).

4. V kategoriji Dinamika (Dynamics) kliknite na Galerija (Gallery). S tem na delovno površino dodate nov element galerije, pripravljen za urejanje.

Izbira vira slik in nastavitve povezav

Pred oblikovanjem vizualnega izgleda je treba določiti vir slikovnih datotek. V nastavitveni plošči pod možnosti Vir galerije (Gallery Source) so na voljo tri opcije:

• Medijska knjižnica (Media Library): Omogoča izbiro že naloženih slik ali dodajanje novih datotek iz računalnika. S klikom na gumb Prebrskaj (Browse) odprete okno za izbiro slik.

• ACF: Uporabi slikovno galerijo iz pomeri prilagojenega polja vtičnika Advanced Custom Fields.

  Opomba: Ta možnost deluje le, če je vtičnik Advanced Custom Fields nameščen in aktiviran.

• WooCommerce: Prikaže slikovno galerijo določenega izdelka iz vtičnika WooCommerce.

  Opomba: Ta možnost deluje le, če je vtičnik WooCommerce nameščen in aktiviran.

Nastavitve delovanja slik ob kliku

1. Poveži slike (Link Images):

   • Izbira Da (Yes) poveže posamezno sliko z njeno datoteko v polni velikosti. Ob kliku obiskovalca na sliko se ta odpre v večjem obsegu.

   • Izbira Ne (No) onemogoči odpiranje slik v polni velikosti.

2. Dodaj svetlobno okno (Add Lightbox):

   • Ta nastavitev je vidna le, če je pri možnosti Link Images izbrana vrednost Yes.

   • Izbira Da (Yes) ob kliku odpre celozaslonski pregledovalnik (lightbox), v katerem lahko obiskovalec brskalnika zaporedoma pregleduje vse slike v galeriji.

   • Izbira Ne (No) ob kliku prikaže le posamezno sliko brez možnosti nadaljnjega preklapljanja med drugimi slikami.

Vizualno oblikovanje galerije (Layout)

Za prilagoditev postavitve v nastavitveni plošči kliknite na gumb Postavitev (Layout). Tu določate strukturo, razmerje stranic in odzivnost elementa.

1. Vrsta postavitve (Layout):

   • Flex: Poravna vse slike v urejene vodoravne vrstice.

   • Masonry: Slike razvrsti dinamično glede na njihove izvorne dimenzije in deleže, s čimer ustvari mrežni mozaik.

2. Razmerje stranic slik (Image Aspect Ratio):

   • Polje je vidno le, če je izbrana postavitev Flex. Določa enotno razmerje dimenzij slik (npr. 16:9 za širokozaslonski prikaz, 21:9 za kinematografskega ali 1:1 za kvadratni izrez).

3. Število slik v vrstici (Images Per Row):

   • Določa, koliko slik se prikaže v posamezni vodoravni vrstici.

4. Prostor okoli slik (Space Around Image):

   • Nastavlja razmik med posameznimi slikami. Privzeta vrednost znaša 10 px (slikovnih pik) in jo je mogoče poljubno povečati ali zmanjšati.

5. Najmanjša širina slike (Image Min Width):

   • Določa najnižjo širino posamezne slike v galeriji, kar zagotavlja ustrezno prilagajanje in odzivnost (responsiveness) postavitve na manjših zaslonih.

Dodajanje in oblikovanje napisov (Caption)

Slikam v galeriji lahko dodate besedilne opise. Nastavitve urejate pod razdelkom Napis (Caption):

1. Prikaži napise (Show Captions):

   • Za prikaz napisa izberite Da (Yes). Če izberete Ne (No), besedilni opisi ne bodo vidni.

2. Barva napisa (Caption Color):

   • Določa barvo pisave napisov (privzeta vrednost je bela #FFFFFF). Barvo spremenite s klikom na barvni krog.

3. Barva ozadja napisa (Caption Background Color):

   • Določa barvo podlage za besedilom (privzeta vrednost je črna #000000).

4. Prikaži napise le ob prehodu z miško (Show Captions Only on Hover):

   • Izbira Da (Yes) prikaže napis le, ko uporabnik pomakne kazalec miške nad sliko.

   • Izbira Ne (No) ohrani napise trajno vidne na slikah.

5. Skrij napise pod širino (Hide Captions Below):

   • Omogoča samodejno skritje napisov na manjših zaslonih. Če izberete npr. Manj kot 768px (Less than 768px), se napisi na mobilnih napravah in tablicah skrila.

Nastavitev prosojnosti in prehodov (Hover)

V razdelku Prehod ob prehodu z miško (Hover) lahko nastavljate vizualne efekte prosojnosti ter animacije ob pomiku miške preko slik.

1. Prosojnost slike (Image Opacity):

   • Določa privzeto neprosojnost slik. Vrednost 0 pomeni popolno prosojnost (slika ni vidna), vrednost 1 pa popolno neprosojnost (originalne barve).

2. Prosojnost slike ob prehodu miške (Hover Image Opacity):

   • Nastavi stopnjo prosojnosti slike ob pomiku kazalca miške nad njo (vrednosti med 0 in 1).

3. Trajanje prehoda (Transition Duration):

   • Določa čas trajanja animacije prehoda med stanjema v sekundah (npr. vrednost 1s ustvari enosekundni mehki prehod, vrednost 0s pa takojšnjo spremembo).

Shranjevanje sprememb

Po končanem urejanju nastavitev v zgornjem delu orodne vrstice kliknite na gumb Shrani (Save), da se nastavitve uveljavijo in objavijo na spletnem mestu.