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.)