Gantry 5 - Háttérkép definíció hozzáadása a Hydrogen sablon szekcióihoz

Részletek: Írta: Balázs Zoltán; Kategória: Tudástár; Megjelent: 2016. március 15.; Módosítás: 2022. június 24.

A megoldás nagyon egyszerű, csak két fájlt kell módosítani és a módosított fájlokat a custom mappán belül a megfelelő almappába behelyezni.

1.) A section.yaml fájl kiegészítése. Ezzel definiáljuk a backenden a szekció háttérképét.

• Töltsük le a /media/gantry5/engines/nucleus/admin/blueprints/layout/section.yaml saját gépünkre.
• Nyissuk meg kedvenc szövegszerkesztőnkkel (pl. Notepad++), és szúrjuk be a fájl végére az alábbi utasításokat (ügyelve a yaml szintaktika szerint szükséges szóközökre a sor elején, hasonlóan az előtte lévő sorokban láthatóhoz):

    background:
      type: input.imagepicker
      label: Background

• Mentsük, és töltsük fel a kiegészített fájlt a /templates/g5_hydrogen/custom/admin/blueprints/layout/ mappába.

2.) A section.html.twig fájl kiegészítése. Ez fogja megjeleníteni a frontenden a beállított háttérképpel kiegészítve szekciónkat.

• Töltsük le a /media/gantry5/engines/nucleus/templates/layout/section.html.twig fájlt a saját gépünkre.
• Nyissuk meg kedvenc szövegszerkesztőnkkel (pl. Notepad++), és szúrjuk be a következő 3 sort az alábbiak szerint:

4. sorként: Ezzel deklaráljuk az attr_background változót;

   {% set attr_background = segment.attributes.background %}

38. sorként: Ezzel egy <div> elemet nyitunk, ha az attr_background változó értéke nem üres.
A háttérkép méretétől és megjelenítésének kívánt módjától függően, szükség szerint definiáljuk a style="..." utasítás végén lévő paramétereket (repeat top center).

{% if attr_background %}<div class="section-background" style="background-image: url(/{{ url(attr_background) }}) repeat top center">{% endif %}

40. sorként: Ezzel zárjuk a 38. sorban megnyitott <div> elemet;

{% if attr_background %}</div>{% endif %}

• Mentsük, és töltsük fel a kiegészített fájlt a /templates/g5_hydrogen/custom/engine/templates/layout/ mappába.

Ha mindent megfelelően csináltunk, akkor az admin felületen a szekció beállítására szolgáló panel alján megjelenik a képválasztó elem:

(Ez a cikk a Gantry 5 dokumentáció „Customizing Theme Files” leírásának magyar fordítása.)

Bejelentkezés a hozzászóláshoz

Hozzászólások a témában: Gantry 5 - Háttérkép definíció hozzáadása a Hydrogen sablon szekcióihoz

kocsislaci válaszolt a témára: #2 2016 ápr. 07 19:40

Van rá mód, hogy az egész oldal, tehát minden szekció alatt ott legyen a háttérkép?

Köszi

Zotius válaszolt a témára: #3 2016 ápr. 08 06:46

body {
    ...
    background-image: url( ... );
    ...
}

Természetesen a custom.scss-ben kell ezt definiálni.
Sajnos a Gantry 5 admin felületén ez nem oldható meg, és a szekciók hátterének beállítása az előző hsz-ban leírtak szerint is elég kezdetleges. A háttérkép-fájl nevének megadásán kívül annak további paraméterei (pl. háttér pozícionálása) sem állíthatók be azzal.

kocsislaci válaszolt a témára: #4 2016 ápr. 08 15:43

Először is köszi, de minden egyes szekciónak tudok hátteret varázsolni custom.scss-ben, viszont a az egész alá nem engedi... body tag meghívása esetén nem történik semmi, a legegyszerűbb beállításokkal sem..

body {
    background-color: lightblue;
}

Valami ötlet?

Zotius válaszolt a témára: #5 2016 ápr. 08 15:49

A 'body' def. rossz tipp volt, bocsi...
Ahhoz, hogy a tartalmi területen kívül legyen csak háttérkép, ahhoz több dolgot is be kell állítani.
Elsőként a #g-page-surround azonosítóba tedd a háttérkép definícióját:

#g-page-surround {
    background-image: url('../images/kepneve.jpg');
}

(A képet a templates/g5_hydrogen/custom/images/ mappába kell tenni.)
A tartalmak háttereit pedig valamilyen színre, mert ha nincs, akkor ezek alatt is a háttérkép fog látszódni. Pl.

#g-header .g-container, #g-navigation .g-container, #g-container-main .g-container {
    background: #színkód;
}

Minden sáv (szekció) .g-container osztályának legyen színe, ezek a mögöttük lévő page-surround háttéren a beállított színnel fognak megjelenni.

kocsislaci válaszolt a témára: #6 2016 ápr. 08 16:42

Ez csak egy gantry hydrogen sablon, tesztoldal!

Kell hozzáférés:

Vendégek elől rejtve. Jelentkezz be vagy regisztrálj a tartalom teljes megtekintéséhez.

Zotius válaszolt a témára: #7 2016 ápr. 09 12:55

Fix háttérkép beállítva a megadott gyakorló oldalon.

Tekintsd meg a custom.scss-ben lévő definíciókat. Így kell csinálni.

kocsislaci válaszolt a témára: #8 2016 ápr. 10 11:04

Hallod másfél napig vártam, hogy válaszolj mikor vissza néztem látom, hogy beszerkesztetted a hozzászólásodba a megoldást!!

Köszönök mindent már is nézem!! !!!!!!!!!!

Jóóóóó!! Köszi köszi! Nem is gondoltam, hogy a szekciókat ilyen módon is lehet csoportosítani.....

Még egy kérdés... felül a headerrt, hogy oldottad meg hogy akkora méretű legyen?

Zotius válaszolt a témára: #9 2016 ápr. 10 12:42

kocsislaci írta: felül a headerrt, hogy oldottad meg hogy akkora méretű legyen?

Röviden: sehogy.
A "facecimer.png" logó magassága 160px, és ehhez jön hozzá a #g-header szekción belül a .g-content margója és bélése:

.g-content {
    margin: 0.625rem;
    padding: 0.938rem;
}

Zotius válaszolt a témára: #10 2016 ápr. 10 13:02

A szekciók nincsenek csoportosítva, az úgy van, ahogy Te beállítottad.
Én csak a hátterüket állítottam be.

kocsislaci válaszolt a témára: #11 2016 ápr. 10 14:49

Nah ezt nem értettem eddig... kezd ez összeállíni!!

#g-header .g-container

A .g-container nem találtam sehol a stiluszerkesztővel Firefoxban... Áh tényleg nagyon köszönöm!!!

Bővebben...

Send by email

Gantry tudástár

Gantry 5 - Háttérkép definíció hozzáadása a Hydrogen sablon szekcióihoz