DEPRECATION WARNING
This documentation is not using the current rendering mechanism and is probably outdated. The extension maintainer should switch to the new system. Details on how to use the rendering mechanism can be found here.
Developer Corner¶
Mixing layout and programmation is not a good idea ?¶
API¶
Initialisation of number of columns¶
lib.dynamicContent is a part of the bootstrap package used in fluidtemplates used to select dynamically the rendered colPos in template via variable. This part initialise number of columns on templates where columns are not set by variables (eg: on 12 columns).
#####################################
## Initialise number of columns
#####################################
lib.dynamicContent.5 = LOAD_REGISTER
lib.dynamicContent.5 {
columns_xs {
cObject = TEXT
cObject.value = {$plugin.lef_responsive_images.columns}
}
columns_sm < .columns_xs
columns_md < .columns_xs
columns_lg < .columns_xs
}
Typical gridelement column container columns setup¶
Using registers to propagate flexforms setting and nested layouts width.
#####################################
## 1 column
#####################################
lef_bootstrap_1col {
columns.0 {
renderObj = COA
renderObj {
# 4 registers to propagate smallest layouts columns to larger ones
10 = LOAD_REGISTER
10 {
columns_xs {
cObject = TEXT
cObject{
# Default number of columns : 12
value = {$plugin.lef_responsive_images.columns}
# Number of columns for this column on xs breakpoint
override.field = parentgrid_flexform_width_column_xs_1
# Only if this breakpoint is active
override.if.isTrue.field = parentgrid_flexform_xsmall
}
}
}
11 = LOAD_REGISTER
11 {
columns_sm{
cObject = TEXT
cObject {
# propagate default number of columns across breakpoints
data = register:columns_xs
override.field = parentgrid_flexform_width_column_sm_1
override.if.isTrue.field = parentgrid_flexform_small
}
}
}
12 = LOAD_REGISTER
12 {
columns_md{
cObject = TEXT
cObject {
data = register:columns_sm
override.field = parentgrid_flexform_width_column_md_1
override.if.isTrue.field = parentgrid_flexform_medium
}
}
}
13 = LOAD_REGISTER
13 {
columns_lg{
cObject = TEXT
cObject {
data = register:columns_md
override.field = parentgrid_flexform_width_column_lg_1
override.if.isTrue.field = parentgrid_flexform_large
}
}
}
# Now compute real layout width for each breakpoint
20 = LOAD_REGISTER
20 {
width_xxs {
cObject = COA
cObject{
20 = TEXT
20.data = register:width_xxs
30 = TEXT
30.value = /{$plugin.lef_responsive_images.columns}*
40 = TEXT
40.data = register:columns_xs
}
prioriCalc=1
}
width_xs < .width_xxs
width_xs.cObject {
20.data = register:width_xs
40.data = register:columns_xs
}
width_sm < .width_xxs
width_sm.cObject{
20.data = register:width_sm
40.data = register:columns_sm
}
width_md < .width_xxs
width_md.cObject{
20.data = register:width_md
40.data = register:columns_md
}
width_lg < .width_xxs
width_lg.cObject{
20.data = register:width_lg
40.data = register:columns_lg
}
}
# Render column content
30 = < tt_content
# 10-13 Restore columns register
40 = RESTORE_REGISTER
41 = RESTORE_REGISTER
42 = RESTORE_REGISTER
43 = RESTORE_REGISTER
# 20 Restore width register
50 = RESTORE_REGISTER
}
#####################################
## 2 columns
#####################################
lef_bootstrap_2col < .lef_bootstrap_1col
lef_bootstrap_2col {
columns.1 < .columns.0
columns.1 {
renderObj{
# Overrides with flexform fields value for column 2
10{
columns_xs.cObject.value = {$plugin.lef_responsive_images.columns}
columns_xs.cObject.override.field = parentgrid_flexform_width_column_xs_2
}
11 {
columns_sm.cObject.data = register:columns_xs
columns_sm.cObject.override.field = parentgrid_flexform_width_column_sm_2
}
12 {
columns_md.cObject.data = register:columns_sm
columns_md.cObject.override.field = parentgrid_flexform_width_column_md_2
}
13 {
columns_lg.cObject.data = register:columns_md
columns_lg.cObject.override.field = parentgrid_flexform_width_column_lg_2
}
}
...
Frames Sizes¶
lib.registerFrameSize is part of lef_responsive_images allowing to take account of frame borders in the layout width. Setting it up to every gridelements is pretty simple.
tt_content.gridelements_pi1.20{
5 = < lib.registerFrameSize
10.setup {
lef_bootstrap_1col < plugin.tx_gridelements_pi1.setup.lef_bootstrap_1col
lef_bootstrap_2col < plugin.tx_gridelements_pi1.setup.lef_bootstrap_2col
...
}
15 = < lib.restoreFrameSize
}