# Képek, galéria, videó és térkép

> Az egyetlen kép, a galéria, a képkarusszel, a videólejátszó, a Google Maps, a nyers HTML és JS, valamint a Flickr elem beállításai.

A médiaelemek közös beállításai: a **Widget címe** (az elem fölött megjelenő cím), az **Elem ID**, az **Extra osztálynév** és a **Design options** fül (szegély, háttér, **CSS animation**).

## Single image

Egyetlen kép az elrendezésben, stílussal, animációval és Design options beállításokkal.

![Az egyetlen kép szerkesztőablaka](./kepek/szerkesztes-elem-egyetlen-kep.webp)

*Az egyetlen kép szerkesztőablaka* (https://minta-bolt.hu/wp-admin/post.php?vc_action=vc_inline&post_id=8&post_type=page)

| Beállítás | Mit csinál |
|---|---|
| **Kép forrása** | **Médiatár** (a médiatárból választott vagy feltöltött kép), külső hivatkozás (a kép közvetlen URL-je), vagy a kiemelt kép (ha van megadva). |
| **Kép** | A kép kiválasztása a médiatárból, itt fel is tölthetsz újat. |
| **Kattintáskor végrehajtandó művelet** | **Nincs**, a nagy kép hivatkozása, megnyitás lightboxban, egyedi hivatkozás vagy nagyítás. Egyedi hivatkozásnál külön mezőben adod meg az URL-t. |
| **Add caption** | A médiatárban megadott képaláírás megjelenítése. Külső képnél az aláírást kézzel kell beírni. |
| **Képméret** | WordPress-méret (thumbnail, medium, large, full) vagy egyéni méret képpontban, például `600x500`. Külső képnél csak képpontérték adható meg. |
| **Kép stílusa** | Például négyzetes, lekerekített vagy keretes. |
| **Igazítás** | A kép helye az oszlopban. |

## Image gallery

Reszponzív képgaléria. A **Galéria típusa** lehet Flex slider (áttűnés vagy csúszás), Nivo slider vagy képrács.

![A galéria szerkesztőablaka](./kepek/szerkesztes-elem-galeria.webp)

*A galéria szerkesztőablaka* (https://minta-bolt.hu/wp-admin/post.php?vc_action=vc_inline&post_id=8&post_type=page)

| Beállítás | Mit csinál |
|---|---|
| **Kép forrása** | A médiatár vagy külső hivatkozások. |
| **Képek** | A galéria képei a médiatárból (külső forrásnál az URL-ek listája). |
| **Képméret** | Mint az egyetlen képnél. |
| **Kattintáskor végrehajtandó művelet** | **Nincs**, a nagy kép, lightbox vagy egyedi hivatkozások (ilyenkor megadod a hivatkozásokat). |
| **Automatikus váltás** | A képek automatikus váltásának időköze, vagy kikapcsolva. |
| **Galéria típusa** | A fent említett három típus. |

## Image carousel

Rögzített méretű, animált képkarusszel.

![A képkarusszel szerkesztőablaka](./kepek/szerkesztes-elem-karusszel.webp)

*A képkarusszel szerkesztőablaka* (https://minta-bolt.hu/wp-admin/post.php?vc_action=vc_inline&post_id=8&post_type=page)

| Beállítás | Mit csinál |
|---|---|
| **Képek** | A karusszel képei a médiatárból. |
| **Carousel mérete** | A képek mérete. |
| **Kattintáskor végrehajtandó művelet** | Mi történjen a kattintásra. |
| **Diavetítés tájolása** | **Vízszintes** (vízszintes húzáshoz) vagy függőleges. |
| **Diavetítés sebessége** | Az átmenet hossza ezredmásodpercben (alapérték: 5000). |
| **Diák száma nézetenként** | Hány dia látszik egyszerre. Az `auto` érték a konténer szélességéhez igazít, de a végtelenített móddal nem működik együtt. |
| **Enable slider autoplay** | Automatikus lejátszás. |
| **Hide pagination** | Elrejti a lapozóvezérlőt. |
| **Előző/következő gombok elrejtése** | Elrejti a lapozógombokat. |
| **Enable partial view** | A következő dia egy része látszik a jobb oldalon. |
| **Enable slider loop** | Végtelenített mód. |

## Video player

Videó beillesztése a WordPress által elfogadott formátumokban.

![A videólejátszó szerkesztőablaka](./kepek/szerkesztes-elem-video.webp)

*A videólejátszó szerkesztőablaka* (https://minta-bolt.hu/wp-admin/post.php?vc_action=vc_inline&post_id=8&post_type=page)

| Beállítás | Mit csinál |
|---|---|
| **Video URL** | A videó hivatkozása. |
| **Szélesség** | A videó szélessége százalékban, az oszlop méretéhez viszonyítva. |
| **Aspect ratio** | A képarány (alapérték: 16:9). |
| **Igazítás** | A lejátszó helye az oszlopban. |

## Google maps

A térkép a **Location** mezőbe írt cím vagy hely alapján jelenik meg, a részleteket a [Tartalmi elemek](https://hub.hellowp.io/hu/plugins/js_composer/tartalmi-elemek/#google-maps) fejezet írja le. Régebbi módszerrel a Google Maps beágyazókódját is beillesztheted a **Map embed iframe** mezőbe: a Google Maps oldalán keresd meg a helyet, kattints a megosztásra, győződj meg róla, hogy a térkép nyilvános, majd a beágyazás lapról másold ki az iframe-kódot. A térkép magasságát a **Map height** mezőben adhatod meg képpontban.

## Nyers HTML és nyers JS

A **Nyers HTML** és a **Nyers JS** elem egyetlen kódmezőt tartalmaz: ide írhatod a saját HTML-, illetve JavaScript-kódodat. Az **Elem ID**, az **Extra osztálynév** és a **Design options** fül itt is elérhető.

## Flickr widget

A Flickr-fotófolyamodat jeleníti meg. Ehhez szükséged van a Flickr-azonosítódra (a Flickr ID-t külön azonosító-kereső oldalakon tudhatod meg).

| Beállítás | Mit csinál |
|---|---|
| **Flickr ID** | A Flickr-azonosítód. |
| **Típus** | A fotófolyam típusa. |
| **Fotók száma** | Hány fotó jelenjen meg. |
| **Megjelenítési sorrend** | A fotók sorrendje. |