[[structure-image-style-create]]

=== Képstílus létrehozása

[role="summary"]
Új képformátumok felvétele a képek automatikus módosításához.

(((Képstílus,létrehozás)))
(((Stílus,kép)))
(((Hatás,kép)))
(((Kép,méretezés)))

==== Célkitűzés

Ebben a témakörben megismerjük, hogyan lehet a Drupalra bízni a látogatóknak kiszolgált képek automatikus formázását. A cél, hogy az _Árusok_ adatlapjain a bemutatkozó fotóik egységesen jelenjenek meg, ne mindig ugyanabban a formátumban, ahogy fel lettek töltve.

==== Szükséges előismeretek

* <<structure-fields>>
* <<structure-content-display>>
* <<structure-image-styles>>

==== Webhely előfeltételei

* A _Recept_ és _Árus_ tartalomtípusoknak már létezniük kell. Ehhez lásd a <<structure-content-type>> témakört.

* Mind a két tartalomtípushoz hozzá kell, hogy legyen rendelve a _Fő kép_ nevű mező. A mezőkről bővebben a <<structure-fields>> témakörben van szó.

* Mindkét típusban legyenek már beküldött tartalmak. Lásd:
<<structure-content-type>>, <<structure-fields>> és <<content-create>> témakörök.

==== Lépések

. A _Kezelés_ adminisztrációs menüben menjünk a _Konfiguráció_ > _Média_ > _Képstílusok_ (vagy a címsorba gépelve: _admin/config/media/image-styles_) oldalra.

. Kattintsunk a _Képstílus hozzáadása_ gombra.

. Írjuk be az új képstílus nevét: _Közepesen nagy (300x200)_

. Mentéshez kattintsunk az _Új stílus létrehozása_ gombra. Megjelenik a _Közepesen nagy (300x200) stílus szerkesztése_ című oldal.

. A _Hatás_ táblázatban a legördülő listából válasszuk az _Arányos átméretezés és méretre vágás_ lehetőséget. Kattintsunk a _Hozzáadás_ gombra.

. Töltsünk ki minden mezőt a lent látható módon:
+
[width="100%",frame="topbot",options="header"]
|================================
| Mezőnév | Érték
| Szélesség | 300
| Magasság | 200
|================================

. Kattintsunk a _Hatás hozzáadása_ gombra. Ezzel sikeresen elmentettük első saját képstílusunkat, ami még csak egy hatásból (arányos átméretezés-kivágás) áll.
+
--
// Image style editing page, with effects added.
image:images/structure-image-style-create-add-style.png["Egy képstílus hozzáadása",width="100%"]
--

. Válasszuk ki a _Kezelés_ adminisztrátori menüben a _Felépítés_ > _Tartalomtípusok_ menüpontot (vagy gépeljük a címsorba: _admin/structure/types_).
(_admin/structure/types_).

. Az _Árus_ tartalomtípus sorának végén, a _Műveletek_ oszlopban kattintsunk a lenyíló gomb _Megjelenés beállítása_ lehetőségére. Betöltődik a _Megjelenés beállítása_ oldal (_admin/structure/types/manage/vendor/display_).

. Győződjünk meg arról, hogy a másodlagos fülek közül az első, _Alapértelmezett_ (angolul „Default”) van kiválasztva.

. A _Fő kép_ mező sorában kattintsunk a fogaskerék ikonra a további beállítási lehetőségek eléréséhez.

. Töltsünk ki minden mezőt a lent látható módon:
+
[width="100%",frame="topbot",options="header"]
|================================
| Mezőnév | Magyarázat | Érték
| Képstílus | Kiválaszthatjuk a már létezők közül, hogy itt melyik legyen alkalmazva. | Közepesen nagy (300x200)
| Kép hivatkozása erre | Hová legyen a látogató átirányítva, ha rákattint a képre? | Semmi
|================================
+
--
// Main image settings area of Vendor content type.
image:images/structure-image-style-create-manage-display.png["Egy képmező formázójának módosítása"]
--

. Kattintsunk a _Frissítés_ gombra.

. Kattintsunk a _Mentés_ gombra. Innentől már az új képstílus lesz használatban, amikor egy _Árus_ típusú tartalmat megnyitunk.

. Nyissuk meg az egyik, korábban már felvitt, ilyen típusú tartalmunkat, és ellenőrizzük, hogy valóban ilyen méretben jelenik-e meg a bemutatkozó fotó. Ha még segítség szükséges egy tartalomegység megtalálásához, akkor az <<content-edit>> témakör hasznos lehet.

. Végül ismételjük meg a folyamatot a 8.-tól a 15. lépésig a _Recept_ tartalomtípuson is.

// ==== Az ismeretek elmélyítése

==== Kapcsolódó témák

* <<structure-fields>>
* <<structure-image-styles>>
* <<structure-image-responsive>>

==== Videó

// Video from Drupalize.Me.
video::https://www.youtube-nocookie.com/embed/DKIo7j19ulY[title="Képstílus létrehozása"]

==== Egyéb források

https://www.drupal.org/docs/8/core/modules/image/working-with-images[Working with images in Drupal 7 and 8] (azaz „Munka a képekkel D7-en és D8-on”) című közösségi dokumentáció a Drupal.org-on (angol nyelven).

*Közreműködők*

E témakör szövegét https://www.drupal.org/u/batigolix[Boris Doesborg] és https://www.drupal.org/u/jojyja[Jojy Alphonso] (http://redcrackle.com[Red Crackle]) a Drupal közösségi https://www.drupal.org/documentation[dokumentációjának] https://www.drupal.org/docs/8/core/modules/image/working-with-images["Working with images in Drupal 7 and 8"] (azaz „Munka a képekkel D7-en és D8-on”) című szócikkéből vette át és szerkesztette, melynek szerzői joga 2000–2017 között annak egyéni közreműködőié. Fordította: https://www.drupal.org/u/balu-ertl[Balu Ertl] (https://www.drupal.org/brainsum[Brainsum]).
