History: PluginFluidgrid
Preview of version: 5
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 Split plugin, which creates a table for content layout, a deprecated method.
Table of contents
Parameters
Arrange content into rows and columns using a Bootstrap fluid grid.
Introduced in Tiki 17.
Go to the source code
Preferences required: wikiplugin_fluidgrid
| Parameters | Accepted Values | Description | Default | Since |
|---|---|---|---|---|
| (body of plugin) | Text to display in a grid. Use "---" to separate the columns and "@@@" to separate rows. | |||
customclass |
text | Add a class to customize the design | 17 | |
colsize |
text | Specify all column widths in units which add up to 12 or percent, separating each width by a pipe (|) | 17 | |
devicesize |
(blank) sm md lg xl |
Specify the device size below which the cells will be stacked vertically | sm | 17 |
first |
(blank) col line |
Cells specified are ordered first left to right across rows (default) or top to bottom down columns | line | 17 |
joincols |
(blank) y n |
Merge empty cells into the cell to their left | y | 17 |
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
{FLUIDGRID()} A1 --- A2 @@@ B1 --- B2 @@@ C1 --- C2 {FLUIDGRID}
produces:
Three row, four columns
{FLUIDGRID()} A1 --- A2 --- A3 --- A4 @@@ B1 --- B2 --- B3 --- B4 @@@ C1 --- C2 --- C3 --- C4 {FLUIDGRID}
produces:
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).
{FLUIDGRID(colsize=>6|2|2|2)} A1 --- A2 --- A3 --- A4 @@@ B1 --- B2 --- B3 --- B4 @@@ C1 --- C2 --- C3 --- C4 {FLUIDGRID}
produces:
FLUIDGRID plugin 4X3 with partial column size.
{FLUIDGRID(colsize="1|||5")} A1 --- A2 --- A3 --- A4 @@@ B1 --- B2 --- B3 --- B4 @@@ C1 --- C2 --- C3 --- C4 {FLUIDGRID}
produces:
FLUIDGRID plugin 4X3 with customclass
{FLUIDGRID(customclass="wolf")} A1 --- A2 --- A3 --- A4 @@@ B1 --- B2 --- B3 --- B4 @@@ C1 --- C2 --- C3 --- C4 {FLUIDGRID}
produces:
FLUIDGRID plugin using column mode
{FLUIDGRID(first=>'col')} A1 --- A2 --- A3 @@@ B1 --- B2 --- B3 @@@ C1 --- C2 --- C3 {FLUIDGRID}
produces: