Dodajanje in urejanje galerije slike

Galerije slik vam omogočajo, da na vašo spletno stran dodate večje količine slik in jih predstavite v privlačni ter zanimivi obliki. 

Video posnetek z navodili za dodajanje galerije

(navodila so v angleškem jeziku)

Kako dodati galerijo slik?

1. Na spletni strani se z miško postavite na del, kamor želite dodati galerijo slik.
2. V levi orodni vrstici kliknite modri gumb +Add.
3. V meniju razširite razdelek Helpers.
4. V kategoriji Dynamics kliknite na Gallery. 

S klikom na Gallery boste na spletno stran dodali nov element, ki je pripravljen z urejanje. 

Galerija slik morate najprej dodati slike, šele nato lahko začnete z urejanjem. Gallery Source je mesto, kjer izbirate od kje boste naložili slike v galerijo. Na voljo imate tri možnosti:

• Media library - lahko prebrskate med vsemi slikami, ki jih že imate naložene v multmedijski knjižnici. S klikom na browse se vam bo odprlo okno, preko katere boste v galerijo lahko dodali želene slike. 
• ACF - uporabite lahko galerijo iz vtičnika Advanced Custom Fields. (opomba, velja le v kolikor imate omenjeni vtičnik aktiviran na vaši spletni strani).
• WooCommerce - prikaže galerijo slik za določen izdelek iz vtičnika WooCommerce (opomba, velja le v kolikor imate omenjeni vtičnik aktiviran na vaši spletni strani).

Če pri nastavitvi Link Images izberete yes, boste sliko povezali z njeno polno velikostjo. To pomeni, da če bo nekdo kliknil na sliko, se bo odprla v polni velikosti. Če izberete no, bo odpiranje v polni velikosti onemogočeno. 

Nastavitev Add Lightbox je vidna le, če ste pri Link Images izbrali yes. Če tudi v tem koraku izberete yes, se vam bo ob kliku na sliko odprl nov pogled galerije, kjer boste lahko pregledovali slike. Če izbere no, pa se bo ob kliku na posamezno sliko odprla samo ta, brez možnosti galerijskega pogleda v polni velikosti.

Zadnji trije gumbi - Layout, Caption in Hover - pri sekcije galerije služijo za stilsko oblikovanje vaše galerije.

Oblikovanje galerije

Za vizualno oblikovanje galerije kliknite na gumb Layout in odpre se vam novo okno.

Layout nadzoruje postavitev galerije, vključno z razmerjem slik, številom slik na vrstico in razmikom med slikami.

Layout vam omogoča dva pogleda galerije. Flex ohranja slike v urejenih vrsticah, medtem ko masonry ureja slike glede na lastne velikosti in število slik v vrstici.

Razmerje stranic (Image Aspect Ratio) je vedna le, če ste v prejšnjem koraku izbrali flex. Določate lahko poljubno razmerje stranic velikosti galerije, med najpogostejšimi so 16:9 (širokozaslonski), 21:9 (kinematografski) ter 1:1 (kvadratni). 

V polju Images per row določate koliko slik bo vidnih po posamezni vrstici. 

Slikam v galeriji lahko določate tudi prostor okoli njih (Space Around Image). Privzeti razmak med njimi je 10 pikslov, lahko pa ga poljubno spreminjate, povečujete oziroma pomanjšate.
 
Vašo galerijo lahko narediti tudi odzivno in sicer tako, da določiti najmanjšo širino (Image Min Width). 

Dodajanje napisov

Z napisi na slikah lahko še dodatno obogatite vašo galerijo. 

Prva pomembna nastavitev, v kolikor želite imeti prikazane napise, je ta, da pri Show Captions izberete yes. Če boste izbrali no, napisi ne bodo vidni.

Z nastavitvijo Capiton Color določate barvo napisov. Privzeta barva je bela, s klikom na beli krogec, se odpre novo okno, preko katerega lahko spremenite barvo.

Podobno lahko spremenite tudi barvo ozadja napisov. Privzeta barva je črna, s klikom na Caption Background Color spremenite barvo ozadja. 

Nastavitev Show Captions Only on Hover določa kdaj bodo napisi vidni. Če označite yes, bodo napisi na slikah vidni le ko se bo uporabnik z miško sprehodil čez sliko. Če označite no, bodo napisi vidni neprestano.

Če želite lahko napise na slikah prikazujete le do določene širine velikosti okna brskalnika. To storite z Hide Captions Below. Na primer, če izberete Less than 768px, se bodo napisi na slikah skrili v primeru da bo okna brskalnika manjše. 

Prosojnost in prehodi

Včasih zaradi lepšega izgleda spletne strani, lahko slikam določite prosojnost oziroma zamegljenost. 

To storite z določanjem vrednosti Image Opacity. Vrednost 0 pomeni popolno prosjonost, kar povzroči da slike sploh niso vidne, vrednost 1 pa je popolna neprosojnost, kar pomeni, da slike ohranijo prvotne barve. 

Ustvarite lahko tudi efekt prosojnosti, kadar gre uporabnik z miško čez sliko. V tem primeru bo slika postopoma postajala prosojna. Animacijsko prosojnost lahko določite z nastavitvijo Hover Image Opacity. Podobno kot pri prejšnji nastavitvi, velja tudi tukaj - vrednost 0 je popolna prosojnost, vrednost 1 ohranja sliko kot v originalu. 

Nastavite lahko tudi koliko časa bo trajal prehod. To storite z določanjem časa Transition Duration. Nadaljši čas, ki ga lahko določite je 1 sekunda, najkrajši pa 0 sekund. 
 

Primer prehoda z nastavitvijo 1 sekunde. 

S klikom na gumb Save boste galerijo uspešno objavili na spletni strani.