The concept of modules
One of the notable benefits of REDAXO are the flexible and easy to create modules, which you can equip with several custom fields and control in every detail. You can stack numerous modules and arrange them in any order.
Input and output
The developer is able to define both the entire input and output for any given module. The input is what you see when you switch a module to the edit mode. For the input code you usually set up form elements which allow for saving the data. This is how it could look like:
<input type="text" name="REX_INPUT_VALUE[1]" value="REX_VALUE[1]" />
The output code in its most simple form would be:
REX_VALUE[1]
A short abstract of the modules used for this demo site
This is an example for running text with textile markup entered in the Markitup editor.
Insert “Enter” once produces a line break, twice starts a new paragraph.
This is a bold section. Followed up by a normal section. And here is some italic text. You can place a internal link and of course an external link or a mailto link.
Format source code as well
$textile = htmlspecialchars_decode(rex_global_settings::getValue('glob_info'));
This is what a quote looks like:
Nothing is more powerful than an idea whose time has come.
Victor Hugo
Unordered list
- This is a list item of an unordered list.
- Each list item takes up a single line.
- A * produces an unordered list item, while a # produces a ordered list item.
Ordered list
- This is a list item of an ordered list.
- Each list item takes up a single line.
- A * produces an unordered list item, while a # produces a ordered list item.
Note on downloads:
In order to not only link to a file but force it to download, the demo consists of an article using a specific template which takes care of the download.
The download module adds the file size and displays a corresponding file type icon (can be extended by further icons).
In the textile editor, you can mark up table cells by inserting a pipe: |
Of course, all table rows must consist of the same amount of cells.
Tables
| header | header | header |
|---|---|---|
| Cell | Cell | Cell |
| Cell | Cell | Cell |
| Cell | Cell | Cell |
Combine text and image columns
Bootstrap
This demo site is based upon the Bootstrap CSS framework. You can use Bootstrap’s CSS classes to control the page layout and optimize the page for different viewport sizes.
The current module demonstrates—in a very simple manner—how to work with layout: the author can choose between 1, 2 or 3 columns. Every column may contain images and text.
Images will be generated by the image manager addon, and they are “forced” to show up with equal aspect ratios in order to keep them vertically aligned when placed side by side.
Example of three columns containing image and text
Running text within a column of 1/3 width. This module places two columns side by side in viewports smaller than 992 px and one column per line in viewports smaller than 768 px.
Running text within a column of 1/3 width. This module places two columns side by side in viewports smaller than 992 px and one column per line in viewports smaller than 768 px.
Running text within a column of 1/3 width. This module places two columns side by side in viewports smaller than 992 px and one column per line in viewports smaller than 768 px.
