# Kép elem

> A Kép elem beállításai: reszponzív források, felirat, betöltés, link és lightbox, ikon és maszk.

A **Kép** elem képet jelenít meg reszponzív forrásokkal, felirattal, lightboxszal, maszkkal és további stílusbeállításokkal.

![A Kép elem beállításai a szerkesztő bal oldali paneljén](./kepek/elemek-image.webp)

*A Kép elem beállításai a szerkesztő bal oldali paneljén* (https://minta-bolt.hu/elemek/?bricks=run)

A képen a **Kép kiválasztása** mező, a dinamikus adat és az egyéni URL mezője, a **HTML-címke**, a **Források** lista és a megjelenítési beállítások látszanak.

## Alapbeállítások

| Beállítás | Mit csinál | Alapérték |
| --- | --- | --- |
| **Kép** | A kép a médiatárból, vagy dinamikus adatból (**Dinamikus adatok**), vagy **Egyéni URL**-ről. | Nincs |
| **HTML-címke** | A képet körülvevő címke: `figure`, `picture`, `div` vagy `custom`. | `figure` |
| Egyéni címke | Saját címkenév attribútumok nélkül. Csak `custom` címkénél, és csak akkor, ha nincsenek források. | Nincs |
| **Források** | Más képet adhatsz meg különböző töréspontokra (`<picture>` elem). Lásd lent. | Nincs |
| **Képarány** | A kép aránya, például `16/9`, `4/3`, `1/1`. | Nincs |
| **Objektum illesztése** | A kép illeszkedése a tárolóhoz: `fill`, `contain`, `cover`, `none`, `scale-down`. | Kitöltés |
| **Objektum pozíciója** | A kép helye a tárolóban, például `center center`, `top left`. | 50% 50% |

### Források (reszponzív képek)

Ha forrásokat adsz meg, a Bricks `<picture>` elemet generál a képek köré. Ha a képnek felirata is van, a `figure` burkoló megmarad, és a `<picture>` kerül bele.

Egy forrás három mezőből áll:

- **Töréspont:** a cél töréspont, vagy `Egyéni` (saját médialekérdezés).
- **Médialekérdezés:** saját lekérdezés szövege, csak egyéni töréspontnál.
- **Kép:** a töréspontnál megjelenő kép.

A sorrend számít, mert a böngésző az első egyező forrást használja:

1. Először az alap töréspont alatti töréspontokat add hozzá, a legkisebbtől a legnagyobbig.
2. Utána az alap töréspont fölöttieket, a legnagyobbtól a legkisebbig.
3. Legvégül az alap töréspont forrását, hogy az legyen a tartalék kép.

Az alap töréspont alattiaknál a Bricks `max-width`, a fölöttieknél `min-width` médialekérdezést készít. Ha az asztali nézet az alap, és hozzáadsz egy 1890 px-es Desktop XL töréspontot, annak forrása `(min-width: 1890px)` feltételt kap. Egyéni lekérdezésnél a Bricks a beírt szöveget változtatás nélkül használja, ezért a helyes sorrendről magadnak kell gondoskodnod.

## Felirat és alt szöveg

| Beállítás | Mit csinál | Alapérték |
| --- | --- | --- |
| Egyéni alt szöveg | Felülírja a médiatárban megadott alt szöveget. | Nincs |
| **Felirat típusa** | A kép alatti felirat: nincs (`none`), csatolmány (`attachment`, a médiatárból) vagy egyéni (`custom`). | **Melléklet** (`attachment`) |
| Egyéni felirat | A felirat szövege. Csak egyéni feliratnál. | Nincs |

## Megjelenítés

| Beállítás | Mit csinál | Alapérték |
| --- | --- | --- |
| **Betöltés** | A kép betöltése: `eager` (azonnal) vagy `lazy` (késleltetett). | `lazy` |
| Cím megjelenítése | A médiatárban megadott cím attribútum megjelenítése. | Ki |
| **Nyújtott** | A kép szélessége 100% a tárolóhoz képest. | Ki |
| **Képátfedés** | Színes réteg a kép fölött. | Nincs |

## Link

A **Link** beállítással kattinthatóvá teszed a képet:

- `lightbox`: a kép nagyítva nyílik meg,
- `attachment`: a csatolmány oldalára mutat,
- `media`: a médiafájlra mutat,
- `url`: saját URL-re mutat.

Alapértelmezetten nincs link.

### Lightbox beállításai

Csak lightbox linkelésnél jelennek meg:

| Beállítás | Mit csinál | Alapérték |
| --- | --- | --- |
| Képméret | A lightboxban megjelenő képméret a regisztrált méretek közül. | Teljes méret |
| Szélesség | Egyéni szélesség pixelben. | Nincs |
| Magasság | Egyéni magasság pixelben. | Nincs |
| Animáció | A lightbox animációja: `zoom`, `fade`, `none`. | `zoom` |
| Felirat | A kép feliratának megjelenítése a lightboxban. | Ki |
| Azonosító | Ha több kép azonos azonosítót kap, galériaként lapozhatók. | Nincs |
| Vágott | Simább átmenet, ha a kép vágott. | Ki |
| Belső margó | A lightboxban a kép körüli térköz pixelben. | Nincs |

### Csatolmány vagy média linkelés

Ilyenkor csak egy **Megnyitás új lapon** jelölőnégyzet jelenik meg.

### URL linkelés

Az **URL** mezőben adod meg a link címét és az attribútumokat.

## Ikon

Ha a kép linkelt, rá egy ikon is kerülhet. A beállítások:

| Beállítás | Mit csinál |
| --- | --- |
| Ikon letiltása | Elrejti az ikont akkor is, ha a sablonstílusokban be van állítva. |
| Ikon | A képen megjelenő ikon. |
| Ikon háttérszíne | Az ikon háttere. |
| Ikon szegélye | Az ikon szegélye. |
| Ikon dobozárnyéka | Az ikon árnyéka. |
| Ikon tipográfiája | Az ikon mérete és színe. |
| Ikon magassága | Az ikon tárolójának magassága. |
| Ikon szélessége | Az ikon tárolójának szélessége. |
| Ikon átmenete | CSS-átmenet az ikonhoz. |

## Maszk

A maszkkal a képet alakzatra vagy mintára vághatod.

| Beállítás | Mit csinál | Alapérték |
| --- | --- | --- |
| Maszk | Előre elkészített alakzat vagy `Egyéni` (saját maszkkép). | Nincs |
| Egyéni maszk | Saját maszkkép feltöltése. Csak egyéni maszknál. | Nincs |
| Méret | A maszk illeszkedése: `auto`, `cover`, `contain`, `custom`. | `contain` |
| Egyéni méret | Saját méret mértékegységgel. Csak egyéni méretnél. | Nincs |
| Pozíció | A maszk helye (például `center center`, `top left`, `bottom right`). | `center center` |
| Ismétlés | A maszk ismétlődése: `no-repeat`, `repeat`, `repeat-x`, `repeat-y`, `round`, `space`. | `no-repeat` |

Az előre elkészített maszkok: Boom, Box, Bubbles, Circle dots, Circle line, Circle waves, Circle, Drop 2, Drop, Fire, Grid circles, Grid dots, Grid filled diagonal, Grid lines diagonal, Grid, Heart, Hexagon dent, Hexagon, Hourglass, Masonry, Ninja star, Octagon dent, Play, Plus, Round zig zag, Splash, Square rounded, Squares 3x3, Squares 4x4, Squares 4 diagonal rounded, Squares 4 diagonal, Squares diagonal, Squares merged, Tiles 2, Tiles és Waves.