Kép elem

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

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.