A módosítható elemek egy kicsit elrugaszkodnak a korábbi oldalaktól, boxoktól és egyéb tartalmaktól. Ezek a sablonok egyedileg létrehozhatóak, testre szabhatóak, illetve felépíthetőek a rendelkezésre álló mezők segítségével. Ilyen módon egyedi banner-eket, slideshow-kat, tartalmi részeket lehet létrehozni, amiket az adminisztrációs felületen a
Beállítások / Kinézet, Arculat / Módosítható elemek menüpont alatt az elemet kiválasztva fel lehet tölteni tartalommal és képekkel.
A módosítható elem esetében több elem változót lehet és kell megadni, amelyek egyes esetben szükségesek a módosítható elem létrehozásához és testreszabásához. Ezek generálása dinamikusan történik az alábbi példa szerint, amelyben a fontosabb elem változókat feltüntetjük majd alább részletezzük is.
[[ element|name:banner_start_big;width:1920;layout:slider-pro;display:none;only_first_slide:1;slide_max_visible_count:1;slide_max_count:10;custom_var:100; ]]
Az elem kapcsán megadhatod a
name elem változóban a nevét, a
width elem változóban a szélességét, a
layout elem változóban a sablon típusát a tartalom megjelenésre vonatkozóan. A
display elem változó szabályozza, hogy megjelenjen-e az elem vagy sem. A
slide_max_count elem változóban megadható, hogy mennyi slide-ot lehet létrehozni az adminisztrációs felületen. Az
only_first_slide elem változó szabályozza, hogy csak az első elemet adja vissza a backend a kiemelésnél. A
slide_max_visible_count elem változó az előzőhöz hasonlóan meghatározza a megjelenő elemek számát, ez az admin felületen is jelzésre kerül.A
custom_var reprezentálja a dinamikusan felhasználható elem változókat. Az itt megadott érték alapján kettő sablonban használható mező készül el, jelen példa szerint a
custom_var_disp, ami
igaz értékkel tér vissza és a
custom_var, amely visszaadja a megadott
100 értéket.
Fontos!
A display elem változónak adott none érték esetén az elem nem jelenik meg, azaz nem generálódik le.
Fontos!
A módosítható elem sablon nevének követnie kell az elnevezési konvenciót, így az element_[sablon_név]_1.html néven kell azt létrehozni, hogy a háttérlogika megfelelően tudja kezelni azt. Itt a sablon_név helyére a layout elemváltozóban megadott értéket kell behelyettesíteni.
Fontos!
Függetlenül attól, hogy melyik sablonban használod az elemet, a fő sablonban main.html mindenképp szerepelnie kell a módosítható elem kiemelésnek, mert azzal definiáljuk az áruház felé, hogy létezik az elem. A main.html sablonban lévő módosítható elemek jelennek csak meg az admin felületen, lehet őket adattal feltölteni! Ha a fő sablonban nincs szükség rá, úgy a display értéket none értékkel kell megadni és csak a tényleges kiemelés helyén anélkül, így csak ott fog megjelenni.
width_disp
Csak akkor igaz a feltétel, ha a módosítható elem létrehozásakor lett megadva
width elem változó.
{% if width_disp %}
.....
{% endif %}
width
A megadott
width elem változó értékét adja vissza.
{{ width }}
height_disp
Csak akkor igaz a feltétel, ha a módosítható elem létrehozásakor lett megadva
height elem változó.
{% if height_disp %}
.....
{% endif %}
height
A megadott
height elem változó értékét adja vissza.
{{ height }}
name
A megadott
name elem változó értékét adja vissza, ez tulajdonképpen az elem egyedi neve.
{{ name }}
Fontos!
A name elem változómegadása kötelező, a width és height megadása opcionális. A háttérben az elem generálásakor és feldolgozásakor a megadott név width, height és name értékekből kap egyedi azonosítót a módosítható elem. A megadott width és height elem változók hatással vannak az adminisztrációs felületre, az ott megadott értékekhez képest maximum kétszer akkor szélességű és magasságú kép tölthető fel. Például adott width:200;height:50; esetén maximum 400x100-as képet lehet feltölteni a módosítható elemhez, ha viszont a magasságot elhagyod (mivel opcionális), akkor csak a szélességet határolja be a feltöltésnél.
element_disp
Csak akkor igaz a feltétel, ha legalább egy elemet (slide) definiáltál a módosítható elemben.
{% if element_disp %}
.....
{% endif %}
name
Ez a módosítható elem kiemelésekor megadott „name” paraméter értékét adja vissza.
{{ name }}
A módosítható elemeknél az adminisztrációs felületen megjelenő szerkesztési lehetőségeket le lehet redukálni, ha az adott módosítható elem sablonjában back-end változóban letiltod a nem szükséges részeket, így azokat a sablonban sem kell elhelyezni, illetve adminisztrációs felületen sem jelennek meg. Erre az
enable back-end változó szolgál. Alapértelmezetten a módosítható elem minden része használható, azaz megjelenik az adminisztrációs felületen a szerkesztőben, illetve a sablonban is el lehet helyezni, hogy megjelenjen majd a vásárlói felületen. Ha megadod a
enable back-end változóban az adott típusú elem rész nevét, akkor csak az vagy azok fognak megjelenni, azokat lehet szerkeszteni ténylegesen. Például:
{{ backvar(enable,img,img_link,html) }}
Ezen módosítható elem sablon esetében az adminisztrációs felületen csak képet lehet feltölteni, linket elhelyezni rá és a HTML tartalmat feltölteni. Emellett a sablonban is csak az adott részhez tartozó mezők lesznek értelmezve. A megadható értékek listája:
html, img, img_link, maintitle, delay, img_default, text_simple, text_size_big, text_size_medium, text_size_small, text_size_button
Fontos!
Az img értékkel ellentétben az img_default esetében csak az alap képet tudod feltölteni az adminisztrációs felületen, nincs lehetőség a töréspontokhoz rendelten más képeket megjeleníteni.
main_title_disp
Csak akkor igaz a feltétel, ha a módosítható elemnek adtál meg címet.
{% if main_title_disp %}
.....
{% endif %}
main_title
A módosítható elem címét adja vissza.
{{ main_title }}
Fontos!
A main_title mező csak akkor ad vissza értéket, ha a enable back-end változóval bekapcsolod, mert alapértelmezetten ez nem kerül visszaadásra.
delay
A módosítható elemnél megadott slide váltási idő értékét adja vissza.
{{ delay }}
transition_effect
A módosítható elemnél beállított slide váltási effektet adja vissza, ha a
transition_effects back-end változóval bekapcsolod. Itt felsorolás szerűen adhatod meg, hogy mely opciók közül választhat az adminisztrátor:
slide (gördülés) vagy
fade (áttűnés).
{{ backvar(transition_effects,slide,fade) }}
...
{{ transition_effect }}
transition_effect_default_disp
Csak akkor igaz a feltétel, ha a módosítható elem slide váltási effektje alapértékre van állítva.
{% if transition_effect_default_disp %}
.....
{% endif %}
transition_effect_[transition_effect]_disp
Csak akkor igaz a feltétel, ha a módosítható elem slide váltási effektje az adott értékre van állítva. Ez a
transition_effects back-end változóban megadható.
{% if transition_effect_[transition_effect]_disp %}
.....
{% endif %}
slide_count
A módosítható elemnél létrehozott slide-ok számát adja vissza.
{{ slide_count }}
autoplay_enabled
Csak akkor igaz a feltétel, ha a módosítható elem slide váltási idő értékénél nem a "Ne váltson" értékre van beállítva.
{% if autoplay_enabled %}
.....
{% endif %}
slides
A módosítható elem slide-jainak tömbjét adja vissza. Ennek a számát maximalizálni lehet a
slide_max_count back-end változóval, így az adminisztrációs felületen maximum a meghatározott számú slide hozható létre az adott módosítható elemnél. Ezt felülírja a
slide_max_count elem változóban meghatározott érték, így kvázi ez alapértékként szolgál, ami az adott kiemelésnél felül lehet definiálni az adott helyzetben.
{{ backvar(slide_max_count,10) }}
...
{% for slide in slides %}
.....
{% endfor %}
slide.title_disp
Csak akkor igaz a feltétel, ha az adott slide-hoz van megadva cím.
{% if slide.title_disp %}
.....
{% endif %}
slide.title
Az adott slide címét adja vissza.
{{ slide.title }}
slide.html_disp
Csak akkor igaz a feltétel, ha az adott slide-hoz van megadva HTML tartalom.
{% if slide.html_disp %}
.....
{% endif %}
slide.html
Az adott slide-hoz megadott HTML tartalmat adja vissza.
{{ slide.html }}
slide.alt
Az adott slide-nál megadott
alt attribútum értékét adja vissza.
{{ slide.alt }}
slide.img_link_disp
Csak akkor igaz a feltétel, ha az adott slide-nál van megadva kép link.
{% if slide.img_link_disp %}
.....
{% endif %}
slide.target_blank
Csak akkor igaz a feltétel, ha az adott slide-nál van megadva kép link és be van állítva, hogy új ablakban nyíljon meg.
{% if slide.target_blank %}
.....
{% endif %}
slide.img_link_url
Az adott slide-nál megadott kép link értékét adja vissza.
{{ slide.img_link_url }}
slide.img_default_disp
Csak akkor igaz a feltétel, ha az adott slide-hoz van feltöltve alap kép.
{% if slide.img_default_disp %}
.....
{% endif %}
slide.img_default_url
Az adott slide-hoz feltöltött alap kép forrás URL-t adja vissza.
{{ slide.img_default_url }}
slide.img_default_retina_disp
Csak akkor igaz a feltétel, ha az adott slide-hoz van feltöltve alap retina kép.
{% if slide.img_default_retina_disp %}
.....
{% endif %}
slide.img_default_retina_url
Az adott slide-hoz feltöltött alap retina kép forrás URL-t adja vissza.
{{ slide.img_default_retina_url }}
slide.img_small_disp
Csak akkor igaz a feltétel, ha az adott slide-hoz van feltöltve kis méretű kép, ami 480px alatt jelenik meg.
{% if slide.img_small_disp %}
.....
{% endif %}
slide.img_small_url
Az adott slide-hoz feltöltött kis méretű kép forrás URL-t adja vissza.
{{ slide.img_small_url }}
slide.img_small_retina_disp
Csak akkor igaz a feltétel, ha az adott slide-hoz van feltöltve kis méretű retina kép, ami 480px alatt jelenik meg.
{% if slide.img_small_retina_disp %}
.....
{% endif %}
slide.img_small_retina_url
Az adott slide-hoz feltöltött kis méretű retina kép forrás URL-t adja vissza.
{{ slide.img_small_retina_url }}
slide.img_medium_disp
Csak akkor igaz a feltétel, ha az adott slide-hoz van feltöltve közepes méretű kép, ami 768px alatt jelenik meg.
{% if slide.img_medium_disp %}
.....
{% endif %}
slide.img_medium_url
Az adott slide-hoz feltöltött közepes méretű kép forrás URL-t adja vissza.
{{ slide.img_medium_url }}
slide.img_medium_retina_disp
Csak akkor igaz a feltétel, ha az adott slide-hoz van feltöltve közepes méretű retina kép, ami 768px alatt jelenik meg.
{% if slide.img_medium_retina_disp %}
.....
{% endif %}
slide.img_medium_retina_url
Az adott slide-hoz feltöltött közepes méretű retina kép forrás URL-t adja vissza.
{{ slide.img_medium_retina_url }}
slide.img_large_disp
Csak akkor igaz a feltétel, ha az adott slide-hoz van feltöltve nagy méretű kép, ami 1024px alatt jelenik meg.
{% if slide.img_large_disp %}
.....
{% endif %}
slide.img_large_url
Az adott slide-hoz feltöltött nagy méretű kép forrás URL-t adja vissza.
{{ slide.img_large_url }}
slide.img_large_retina_disp
Csak akkor igaz a feltétel, ha az adott slide-hoz van feltöltve nagy méretű retina kép, ami 1024px alatt jelenik meg.
{% if slide.img_large_retina_disp %}
.....
{% endif %}
slide.img_large_retina_url
Az adott slide-hoz feltöltött nagy méretű retina kép forrás URL-t adja vissza.
{{ slide.img_large_retina_url }}
Fontos!
Az újabb kinézetek esetében nem csak az alapértelmezett töréspontok vannak, hanem a kinézet beállításaiban ezt meg lehet adni. Így nem csak a korábbi small,medium,large,default lehetségesek, hanem pl. xxsmall,xsmall,xlarge,xxlarge értékek is. Ezt a common_vars node-on belül a grid_breakpoints node-ban tudod meghatározni. Az alkalmazott értékek: xxxs,xs,sm,md,lg,xl,xxl,xxxl. Ezeket a töréspontokat érdemes a Bootstrap esetén is meghatározni az scss_vars node-on belül!
slide.img_[breakpoint]_disp
Csak akkor igaz a feltétel, ha az adott slide-hoz van feltöltve az adott törésponthoz (
breakpoint) kép.
{% if slide.img_[breakpoint]_disp %}
.....
{% endif %}
slide.img_[breakpoint]_url
Az adott slide adott töréspontjához (
breakpoint) feltöltött kép forrás URL-t adja vissza.
{{ slide.img_[breakpoint]_url }}
slide.img_[breakpoint]_retina_disp
Csak akkor igaz a feltétel, ha az adott slide-hoz van feltöltve az adott törésponthoz (
breakpoint) retina kép.
{% if slide.img_[breakpoint]_retina_disp %}
.....
{% endif %}
slide.img_[breakpoint]_retina_url
Az adott slide adott töréspontjához (
breakpoint) feltöltött retina kép forrás URL-t adja vissza.
{{ slide.img_[breakpoint]_retina_url }}
slide.img_[breakpoint]_width
Az adott slide adott töréspontjához (
breakpoint) feltöltött kép szélességét adja vissza pixelben. Ehhez az
img_size backend változót be kell kapcsolni!
{{ backvar(img_size,1) }}
...
{{ slide.img_[breakpoint]_width }}
slide.img_[breakpoint]_height
Az adott slide adott töréspontjához (
breakpoint) feltöltött kép magasságát adja vissza pixelben. Ehhez az
img_size backend változót be kell kapcsolni!
{{ backvar(img_size,1) }}
...
{{ slide.img_[breakpoint]_height }}
slide.texts
A slide-hoz megadott szövegek tömbjét adja vissza.
{% for text in slide.texts %}
.....
{% endfor %}
text.id
Az adott szöveghez tartozó
id attribútum értékét adja vissza. Ez az egyedi formázás és azonosítás szempontjából fontos.
{{ text.id }}
text.font_color_disp
Csak akkor igaz a feltétel, ha az adott szövegnél van beállított betűszín.
{% if text.font_color_disp %}
.....
{% endif %}
text.font_color
Az adott szöveg betűszín kódját adja vissza
{{ text.font_color }}
text.bg_color_disp
Csak akkor igaz a feltétel, ha az adott szövegnél van beállított háttérszín.
{% if text.bg_color_disp %}
.....
{% endif %}
text.bg_color
Az adott szöveg háttérszín kódját adja vissza.
{{ text.bg_color }}
text.border_color_disp
Csak akkor igaz a feltétel, ha az adott szövegnél van beállított keretszín.
{% if text.border_color_disp %}
.....
{% endif %}
text.border_color
Az adott szöveg keret színkódját adja vissza.
{{ text.border_color }}
text.border_style_disp
Csak akkor igaz a feltétel, ha az adott szövegnél van beállított keret stílus.
{% if text.border_style_disp %}
.....
{% endif %}
text.border_style
Az adott szöveg keret stílusát adja vissza.
{{ text.border_style }}
none | dotted | dashed | solid | double | ridge | inset | outset
text.border_width_disp
Csak akkor igaz a feltétel, ha az adott szövegnél van beállítva keret vastagság.
{% if text.border_width_disp %}
.....
{% endif %}
text.border_width
Az adott szöveg keretének vastagságát adja vissza.
{{ text.border_width }}
1px | 2px | 3px | 4px | 5px | 6px | 7px | 8px | 9px | 10px
text.hover_disp
Csak akkor igaz a feltétel, ha az adott szövegnél van beállítva bármilyen hover szín.
{% if text.hover_disp %}
.....
{% endif %}
text.bg_color_hover_disp
Csak akkor igaz a feltétel, ha az adott szövegnél van beállítva háttérszín hover állapotban.
{% if text.bg_color_hover_disp %}
.....
{% endif %}
text.bg_color_hover
Az adott szöveg hover állapotban megjelenő háttérszín színkódját adja vissza.
{{ text.bg_color_hover }}
text.font_color_hover_disp
Csak akkor igaz a feltétel, ha az adott szövegnél van beállítva betűszín hover állapotban.
{% if text.font_color_hover_disp %}
.....
{% endif %}
text.font_color_hover
Az adott szöveg hover állapotban megjelenő betűszín színkódját adja vissza.
{{ text.font_color_hover }}
text.num
Az adott szöveg sorszámát adja vissza.
{{ text.num }}
text.link_disp
Csak akkor igaz a feltétel, ha az adott szöveghez van megadva link.
{% if text.link_disp %}
.....
{% endif %}
text.url
Az adott szöveghez megadott link URL-t adja vissza.
{{ text.url }}
text.value
Az adott szöveg értéket adja vissza.
{{ text.value }}
text.target_blank
Csak akkor igaz a feltétel, ha a szöveghez tartozó linket új ablakban kell megnyitni.
{% if text.target_blank %}
.....
{% endif %}
text.font_size
Az adott szöveghez megadott betűméretet adja vissza, mely a módosítható elemnél megadott érték szövegesen.
{{ text.font_size }}
big | medium | small | button
text.horizontal
Az adott szöveghez megadott horizontális pozíciót adja vissza, mely a módosítható elemnél megadott százalékos érték százalékjellel.
{{ text.horizontal }}
text.vertical
Az adott szöveghez megadott vertikális pozíciót adja vissza, mely a módosítható elemnél megadott százalékos érték százalékjellel.
{{ text.vertical }}
text.animation_show
Az adott szöveghez tartozó betöltési animációt adja vissza.
{{ text.animation_show }}
no | left | right | up | down
text.animation_show_delay
Az adott szöveghez tartozó betöltési animáció késleltetését adja vissza.
{{ text.animation_show_delay }}
Az adott szöveg sorszámával képzett érték: ({{ text.num }} + 2) * 200
text.animation_hide
Az adott szöveghez tartozó eltüntetési animációt adja vissza
{{ text.animation_hide }}
no | left | right | up | down
text.animation_hide_delay
Az adott szöveghez tartozó eltüntetési animáció késleltetését adja vissza.
{{ text.animation_hide_delay }}
100
Fontos!
A text_simple bekapcsolásával az alap szöveg funkció lecserélődik az új egyszerűsített megoldásra, ami nem rendelkezik pozícionálással és animációs beállításokkal.
