Skip to main content

5 - Images, tables and layout

Each block below is set with its gear. All these settings write Bootstrap classes: your template draws them.

Image

The Image block opens Iris when it is installed, otherwise Joomla's media. Its settings:

  • Alternative text: what the image brings, for those who cannot see it. Or Decorative image: screen readers skip it.
  • Caption, Link, Position (normal, centred, left or right of the text), Size, Width in the page.
  • Look: corners, border, shadow.
  • Lazy loading: the image loads only when it comes near, the page opens faster.
  • Enlarge on click: a click shows it large, Escape closes it. No script on the site. Not with a link.

Buttons

A link drawn as a button, or several side by side. Each has its text, its address (web, email, article, menu, contact, image or document), its colour, and an icon: one from the list, or your own SVG. Together: size, position, layout (side by side or full width).

Table

Add rows and columns; Tab goes to the next cell. Settings:

  • Table title: says what the table holds, before reading it.
  • Headers: first row, first column. Footer row (total).
  • Borders, Striped rows, Highlight the row under the mouse, Compact, Shape.
  • Column widths: by the text, equal or custom (in percent).
  • Position of the text in the cells: for the cell of the cursor, its row, its column or the whole table.
  • Backgrounds: the site's colours.

Columns

Two, three or four columns: equal, one third two thirds, wide centre... You choose from which screen they become stacked (phones, tablets, small computers), the gutter and the vertical alignment. Each column takes its own blocks. No columns inside a column.

Callout

An alert zone (information, success, warning, error) or a highlighted panel. Keep the written title: it carries the meaning for whoever cannot tell the colour. Pictogram, title level and alignment can be set.

Lists, quote, code

  • Lists: Tab moves an item in, Shift+Tab moves it out. Bullets to choose (disc, circle, square, dash, arrow, check, none); a numbered list can start at another number or count backwards.
  • Quote: author, work and source address.
  • Code: the language, written as the language-xxx class that highlighters read.

Separator and Read more

Separator draws a line between two parts. Read more cuts the article: the beginning shows in blogs.

Module

A module placed in the article becomes a card with its name. Its gear opens the window of the product that made it (Opus, Formulus, Iris), otherwise Joomla's module form.

Raw HTML

What Markus cannot edit faithfully becomes a Raw HTML block, kept as it is. You can also add one to paste code.

Up to date for Markus 1.0.088.