Loading...
 
Skip to main content

History: PluginFluidgrid

View published page

Source of version: 13 (current)

Copy to clipboard
            ! Plugin Fluidgrid
''Introduced in ((Tiki 17)) by Phil Jollans but will probably be backported to ((Tiki16)) at least.''

Use this ((wiki plugin)) to create a Bootstrap responsive grid (see [https://getbootstrap.com/examples/grid/]) in Tiki's wiki text areas. That is, rows and columns of text, images, etc. can be created that will be arranged horizontally in wide screens but will respond dynamically in smaller screens so that good visibility of content is maintained.

This is a modern, "best practices" alternative to using the ((PluginSplit|Split plugin)), which creates a table for content layout, a deprecated method.
{maketoc levels="2,3"}

!!Parameters

{pluginmanager plugin="fluidgrid"}

!! Usage
There are two ways to use this plugin: 

1. The syntax can be copied from these examples and pasted in the wiki edit text area, or otherwise the syntax can be written by hand following the examples on this page. 

Or:

2. Alternatively, as with other plugins, the Help icon (question mark in a circle at the right end of the edit toolbar) can be clicked to open a modal window. Then open the Plugin Help tab and find and click the Split plugin icon. This will open another modal window where the plugin can be configured. 

If the second method is chosen, there is another choice in ways to proceed:

1. No table content initially selected (highlighted)
If no text in the wiki edit screen is selected before opening the Plugin Help window, then after entering some configuration details, click the Insert button in the plugin's form. This will paste the opening tag of the Fluidgrid plugin into the editor text area. ''However, the syntax will be incorrect.'' Clicking "Insert" will paste the plugin name in lowercase letters, and there will be no parentheses around the parameters. You must __change the plugin name to use all uppercase letters__, and then __put parentheses around the parameters__ as shown in the examples on this page. Then add the syntax for the rows and columns, and the content, and finally add the closing plugin tag, again in all capital letters, surrounded by curly braces.

2. Some or all table content selected (highlighted)
To save time and simplify editing, you can input some or all of the table's row and column syntax and/or table content, and select this before clicking the Help icon to open the Plugin Help window. Then after making the Fluidgrid module configuration choices in the form, click the "Replace" button, and the plugin's ''full and correct'' syntax will be input in the edit screen automatically.

!!Examples 
!!! Three rows, two equal-width columns
{CODE()}
{FLUIDGRID()}
A1
---
A2
@@@
B1
---
B2
@@@
C1
---
C2
{FLUIDGRID}
{CODE}

produces:

{FLUIDGRID()}
A1
---
A2
@@@
B1
---
B2
@@@
C1
---
C2
{FLUIDGRID}

!! Three row, four columns
{CODE()}
{FLUIDGRID()}
A1
---
A2
---
A3
---
A4
@@@
B1
---
B2
---
B3
---
B4
@@@
C1
---
C2
---
C3
---
C4
{FLUIDGRID}
{CODE}

produces: 

{FLUIDGRID()}
A1
---
A2
---
A3
---
A4
@@@
B1
---
B2
---
B3
---
B4
@@@
C1
---
C2
---
C3
---
C4
{FLUIDGRID}

!! Three rows of four columns, with column size specified.
As per the Bootstrap spec, the column sizes are integers that total 12. The small-screen breakpoint is used (the grid divs have a "col-sm-n" class).

{CODE()}
{FLUIDGRID(colsize=>6|2|2|2)}
A1
---
A2
---
A3
---
A4
@@@
B1
---
B2
---
B3
---
B4
@@@
C1
---
C2
---
C3
---
C4
{FLUIDGRID}
{CODE}

produces: 

{FLUIDGRID(colsize=>6|2|2|2)}
A1
---
A2
---
A3
---
A4
@@@
B1
---
B2
---
B3
---
B4
@@@
C1
---
C2
---
C3
---
C4
{FLUIDGRID}

!! FLUIDGRID plugin 4X3 with partial column size.
{CODE()}
{FLUIDGRID(colsize="1|||5")}
A1
---
A2
---
A3
---
A4
@@@
B1
---
B2
---
B3
---
B4
@@@
C1
---
C2
---
C3
---
C4
{FLUIDGRID}
{CODE}

produces:

{FLUIDGRID(colsize="1|||5")}
A1
---
A2
---
A3
---
A4
@@@
B1
---
B2
---
B3
---
B4
@@@
C1
---
C2
---
C3
---
C4
{FLUIDGRID}

!! FLUIDGRID plugin 4X3 with customclass
{CODE()}
{FLUIDGRID(customclass="wolf")}
A1
---
A2
---
A3
---
A4
@@@
B1
---
B2
---
B3
---
B4
@@@
C1
---
C2
---
C3
---
C4
{FLUIDGRID}
{CODE}

produces:

{FLUIDGRID(customclass="wolf")}
A1
---
A2
---
A3
---
A4
@@@
B1
---
B2
---
B3
---
B4
@@@
C1
---
C2
---
C3
---
C4
{FLUIDGRID} 

!! FLUIDGRID plugin using column mode
{CODE()}
{FLUIDGRID(first=>'col')}
A1
---
A2
---
A3
@@@
B1
---
B2
---
B3
@@@
C1
---
C2
---
C3
{FLUIDGRID}
{CODE}

produces:   

{FLUIDGRID(first=>'col')}
A1
---
A2
---
A3
@@@
B1
---
B2
---
B3
@@@
C1
---
C2
---
C3
{FLUIDGRID}


!!FLUIDGRID plugin with colsize specified in PERCENT
When one of the parameter values of colsize is specified in PERCENT, the total weighting is always 100 with a minimum size of 1 of 12 (Grid bootstrap)

The total can be less than 12, e.g. two columns with 25%|25% will be translated to 3|3 and not 6|6.

When some columns are specified in PERCENT and the rest are not specified, the size is an approximate weighting, relative to 100, with a minimum size of 1.
All columns with an unspecified width are fill up remaining space, e.g. 3 columns with 25%|25% should translate to 3|3|6 

!!!Exemples

{CODE()}
{FLUIDGRID(colsize="20%|50%|30%")}
A1
---
A2
---
A3
@@@
B1
---
B2
---
B3
@@@
C1
---
C2
---
C3
{FLUIDGRID}
{CODE}

produces: 
{FLUIDGRID(colsize="20%|50%|30%")}
A1
---
A2
---
A3
@@@
B1
---
B2
---
B3
@@@
C1
---
C2
---
C3
{FLUIDGRID}

and 
{CODE()}
{FLUIDGRID(colsize="20%|20%")}
A1
---
A2
---
A3
@@@
B1
---
B2
---
B3
@@@
C1
---
C2
---
C3
{FLUIDGRID}
{CODE}

produces :
{FLUIDGRID(colsize="20%|20%")}
A1
---
A2
---
A3
@@@
B1
---
B2
---
B3
@@@
C1
---
C2
---
C3
{FLUIDGRID}




!!Aliases
(alias(FluidGrid))