# Kép blokk

> Kép beszúrása és szerkesztése: feltöltés, médiatár, URL, igazítás, link, körbevágás, felirat, helyettesítő szöveg, méretek.

A **Kép** blokkal egyetlen képet teszel az oldalra vagy a bejegyzésbe.

## A blokk hozzáadása

Kattints a bal felső sarokban a **+** (blokkbeszúró) gombra, keress rá a **Kép** blokkra, és kattints rá. Gyorsabb, ha egy üres sorban a `/` jel után beírod a blokk nevét, és entert nyomsz.

![A Kép blokk kijelölve a szerkesztőben, jobbra a Blokk fül a médiával és a helyettesítő szöveggel](./kepek/blokkok-kep-szerkeszto.webp)

*A Kép blokk kijelölve a szerkesztőben, jobbra a Blokk fül a médiával és a helyettesítő szöveggel* (https://minta-bolt.hu/wp-admin/post.php?post=8&action=edit)

A képen az eszköztár a kép fölött, az oldalsávban pedig a kép fájlneve és a **Helyettesítő szöveg** mező látszik.

### Kezdő lehetőségek

Az új, még üres Kép blokkban háromféleképpen adhatsz meg képet:

- **Feltöltés:** tölts fel képet (vagy videót) a gépedről.
- **Médiatár:** válassz egy már feltöltött képet.
- **Beszúrás URL-ből:** illeszd be a kép webcímét, és nyomj entert.

Ha URL-ből szúrsz be képet, az eszköztáron a **Feltöltés a médiatárba** gombbal (felfelé mutató nyíl) másolatot menthetsz a képről a saját oldaladra. Ha nem teszed meg, a kép később eltűnhet az oldalról, ha az eredeti fájlt áthelyezik, törlik vagy nem osztják meg tovább. A módszer nem működik minden képnél, mert egyes oldalak tiltják a beágyazást és a másolást. Csak olyan képet használj, amelyhez van jogod.

### További módok kép hozzáadására

- **Húzás:** húzz egy képet a gépedről egy üres oldalra vagy egy üres Bekezdés blokkba.
- **Média fül a blokkbeszúróban:** nyisd meg a **+** gombot, válaszd a **Média** fület, és kattints egy képre a médiatárból. Ha a témád támogatja az Openverse-t, onnan is választhatsz szabadon használható képet; ha nem, ez a lehetőség nem jelenik meg. Az Openverse-ből beszúrt kép automatikusan a médiatárba kerül. Meglévő kép cseréjéhez húzz egy képet a **Média** fülről a már az oldalon lévő képre.
- **Másolás dokumentumból:** képet beilleszthetsz más programból, például Wordből vagy Google Dokumentumokból. Előfordulhat, hogy a WordPress ezeket automatikusan feltölti. Ellenőrizd: jelöld ki a képet, és nézd meg, látszik-e az eszköztáron a **Feltöltés a médiatárba** gomb. Ha igen, kattints rá, hogy ne törjön el a kép később.

### A kép adatai

A feltöltés után a médiatárban megadhatod a kép címét, feliratát, helyettesítő szövegét és leírását. Ezek a keresőoptimalizálásban és a hozzáférhetőségben segítenek, és a médiatárban is könnyebben megtalálod velük a fájlt. Ha a képnek van felirata, a WordPress automatikusan megjeleníti; az eszköztáron elrejtheted vagy megmutathatod.

### Átméretezés

A kijelölt képen húzható fogantyúk jelennek meg. Húzd őket a kívánt méretig. A méretet az oldalsávban is megadhatod (lásd lent).

## Eszköztár

Az eszköztár a kijelölt kép fölött látható, a gombok:

- **Kép** (átalakítás)
- **Húzás**, **Mozgatás fel**, **Mozgatás le**
- **Igazít**
- **A duotone szűrő alkalmazása**
- **Link**
- **Körbevágás**
- **Kép fölötti szöveg hozzáadása**
- **Felirat** (hozzáadása vagy eltávolítása)
- **Csere**
- **Beállítások** (három pont)

### Átalakítás

A **Kép** gombbal a blokkot átalakíthatod Oszlopok, Csoport, Galéria, Borítókép, Részletek, Fájl vagy Média és szöveg blokká. A téma által kínált stílusok is itt érhetők el.

### Mozgatás

A hat pontos **Húzás** fogantyúval húzd a képet az új helyére; kék vonal mutatja, hova kerül. A **Mozgatás fel** és **Mozgatás le** nyilak egy lépéssel viszik feljebb vagy lejjebb.

### Igazítás

Az **Igazít** gombbal választhatsz:

| Beállítás | Mit csinál |
| --- | --- |
| Nincs | A kép a jelenlegi méretén marad. |
| Széles | A kép szélesebb lesz a tartalomnál. |
| Teljes szélesség | A kép a képernyő teljes szélességét kitölti. |
| Balra igazítás | A kép balra kerül. |
| Középre igazítás | A kép középre kerül. |
| Jobbra igazítás | A kép jobbra kerül. |

A **Széles** és a **Teljes szélesség** csak akkor jelenik meg, ha a témád támogatja.

#### Szöveg körbefuttatása a kép körül

Ha azt szeretnéd, hogy a szöveg a kép mellett folytatódjon:

1. Tedd a képet közvetlenül a bekezdés fölé.
2. Jelöld ki a képet.
3. Kicsinyítsd le a képet.
4. Az eszköztáron válaszd a balra vagy a jobbra igazítást.
5. A bekezdés szövege körbefutja a képet.

Kisebb képeknél működik jól: a nagy kép nehezen olvashatóvá teheti a szöveget, főleg mobilon.

### Duotone

A **A duotone szűrő alkalmazása** gomb két színnel átszínezi a képet. A választható színek a témától függnek.

### Link

A **Link** gombbal a kép hivatkozást kap. A lehetőségek:

- **Keresőmező:** illessz be egy webcímet, vagy keress a saját oldalad tartalmára (oldal, bejegyzés).
- **Kép fájljára hivatkozás:** a kép a képfájlra mutat, új böngészőablakban nyílik.
- **Csatolmányoldalra hivatkozás:** a kép a WordPress csatolmányoldalára mutat.
- **Nagyítás kattintásra:** a látogató nagyobb nézetben (úgynevezett lightboxban) nyithatja meg a képet anélkül, hogy elhagyná az oldalt.

### Körbevágás

A **Körbevágás** gomb megnyitja a médiaszerkesztőt, ahol részletesen szerkesztheted a képet közvetlenül a szerkesztőben. Két füle van: **Vágás** és **Részletek**.

**Vágás fül:**

- Húzd a fogantyúkat szabadkézi kijelöléshez, vagy válassz képarány-előbeállítást (szabad, négyzet 1:1 és több más).
- A nagyítással (+/−) finomabban állíthatod a kijelölést.
- A forgatással balra vagy jobbra fordíthatod a képet, vagy a kép alatti vonalzót húzva fokonként egyenesítheted.
- A tükrözéssel vízszintesen vagy függőlegesen tükrözheted a képet.
- A vágókeret a kép képpontjaihoz illeszkedik, így pontosan állítható.

**Részletek fül:** a kép adatait módosíthatod, anélkül hogy elhagynád a szerkesztőt: helyettesítő szöveg (írd le a kép tartalmát, vagy hagyd üresen, ha díszítőkép), felirat és leírás. Csak olvasható adatok: a feltöltés dátuma, a feltöltő, a fájlnév, a fájltípus, a méret és a képméret.

A módosítások elfogadásához kattints a mentésre, az elvetésükhöz a mégsemre. A WordPress a szerkesztett képet új fájlként menti, így az eredeti kép a médiatárban megmarad.

**Visszavonás:** szerkesztés közben a médiaszerkesztő alján visszaállíthatsz, visszavonhatsz és újra is végrehajthatsz. A változtatások után a szerkesztő alján megjelenő értesítésben is van visszavonás gomb, valamint a szerkesztő bal felső sarkában a visszavonás nyíl a **+** gomb mellett.

### Kép fölötti szöveg

A **Kép fölötti szöveg hozzáadása** gombra a Kép blokk azonnal Borítókép blokká alakul át egy helyőrző szöveggel; írd át a saját szövegedre. Akkor használd, ha a kép díszítőjellegű, vagy a szöveg jól olvasható marad rajta. Jobb olvashatóságért állítsd a Borítókép blokk átfedésének színét vagy átlátszóságát.

### Felirat

A **Felirat** gombbal megjeleníthetsz vagy elrejthetsz feliratot az adott képnél:

1. Kattints a gombra az eszköztáron.
2. Írd be a feliratot a kép alatti mezőbe.
3. A felirat elrejtéséhez kattints a gombra újra.

### Csere

A **Csere** gombbal másik képet választhatsz a médiatárból, újat tölthetsz fel, vagy visszaállíthatod a blokkot a kezdő állapotba.

### Beállítások (három pont)

A menüben a szokásos blokkműveletek vannak: másolás, megkettőzés, zárolás, szerkesztés HTML-ként. A Kép blokknál van egy extra: a kép beállítása **Kiemelt képként** a bejegyzéshez vagy oldalhoz.

## Blokkbeállítások

Az oldalsáv megnyitásához kattints a **Közzététel** gomb melletti beállítások gombra, és válaszd a **Blokk** fület. A panel három fülre oszlik: tartalom, **Beállítások** és **Stílusok** (az ikonjukról ismered fel őket).

### Tartalom fül

- **Média:** kattints a kép bélyegképére vagy a fájlnevére, hogy új képet tölts fel, a médiatárból válassz, vagy visszaállítsd a blokkot. A mellette lévő három pontos menüvel visszaállíthatod a képet vagy a helyettesítő szöveget.
- **Helyettesítő szöveg:** írj értelmes leírást a képről, hogy a képet nem látó látogatók is megértsék. A **Határozzuk meg a kép célját** link döntési segédletre mutat arról, milyen szöveg kell az egyes helyzetekben. Ha itt írsz szöveget, az csak ezen az oldalon vagy bejegyzésben érvényes. A médiatárban megadott helyettesítő szöveg az alapértelmezés, amikor a képet máshol is beszúrod.
- **Díszítőkép:** csak akkor jelöld be, ha a kép nem ad hozzá érdemi információt, és nincs funkciója. Ilyenkor a képernyőolvasók kihagyják, nem mondanak fölösleges, zavaró szöveget.

### Beállítások fül

![A Kép blokk Beállítások füle a felbontással](./kepek/blokkok-kep-beallitasok.webp)

*A Kép blokk Beállítások füle a felbontással* (https://minta-bolt.hu/wp-admin/post.php?post=8&action=edit)

- **Felbontás:** a kép méretét választod ki (Teljes méret, Nagy, Közepes, Bélyegkép). Hogy mi érhető el, a témától és az eredeti kép méretétől függ.
- **Haladó:** HTML-horgony, további CSS-osztály(ok), további CSS, **Cím attribútum** és stílusok. A cím attribútummal a kép szerepét írhatod le az oldalon, de sok eszköz és böngésző nem jeleníti meg.

### Stílusok fül

![A Kép blokk Stílusok füle: stíluslapok, szűrők, méretek](./kepek/blokkok-kep-stilusok.webp)

*A Kép blokk Stílusok füle: stíluslapok, szűrők, méretek* (https://minta-bolt.hu/wp-admin/post.php?post=8&action=edit)

A képen a **Stíluslapok** (a témától függ; gyakori az **Alapértelmezett** és a **Lekerekített**, ez lekerekített sarkokat ad), a **Szűrők** és a **Méretek** panel látszik.

- **Stíluslapok:** csak akkor jelenik meg, ha a témád egyedi képstílusokat ad.
- **Szűrők:** a kép megváltoztatása nélkül adhatsz szűrőhatást. A **Kéttónusú** (duotone) szűrő az eszköztárról is elérhető.
- **Méretek:** a margót állíthatod. Itt vannak a képarány, szélesség és magasság beállításai is.
- **Képarány:** a kép alakját változtatja meg (négyzet, álló, fekvő). Egyes arányok levághatnak a képből, hogy kitöltsék az alakot. Ez csak a megjelenést érinti, a képfájlt nem szerkeszti. Képarány választása után további beállítások jelenhetnek meg: szélesség és magasság, méretezés és fókuszpont.
- **Szélesség és Magasság:** a kép megjelenítési méretét adják. Legtöbbször hagyd **Automatikus** értéken. Átméretezéshez add meg a szélességet, a magasság követi. Százalékot csak akkor használj, ha a képnek a tárolójához képest kell méreteződnie. Fix magasságot csak akkor adj meg, ha a kialakítás megköveteli, mert nehezebben kezelhető a különböző képernyőméreteken.
- **Méretezés:** azt szabályozza, hogyan illeszkedik a kép a választott képarányhoz. A **Kitöltés** kitölti a teljes képterületet, a kép egy része levágódhat. A **Befoglalás** a teljes képet megmutatja, de üres hely maradhat körülötte, ha az alak eltér.
- **Fókuszpont:** azt jelöli ki, a kép melyik része maradjon látható, ha van beállított képarány. Leginkább **Kitöltés** méretezésnél hasznos, mert az levághat a képből.
- **Keret és árnyék:** keretszín, vastagság, lekerekítés és árnyék.