Many Webal Blocks modules show a list of items (cards, team members, slides, logos, events) with a picture and a few lines of text for each. They all use the same three settings, so once you know them you know them everywhere: the Items list, the Picture settings and the Element style group. This page explains them for the person building the page.
Items: the list of rows
Each item is one row. Add a row, fill it in, drag it to change the order, delete it with the minus button. The most rows a module takes is stated in the box (never more than 60). A row you add and leave empty is not an error: it just shows nothing.
- A row with nothing in it is not shown. Each module decides what makes a row count (usually a title, some text or a link). A switch or a choice on its own never makes a row.
- If the list is longer than the module allows, the first rows are kept. Joomla also refuses to save a list that is too long and tells you the limit in plain words.
- IDs must be different. If two rows have the same ID, the second one loses its ID and the page still works. Do not start an ID with
wbl-: those are made by the modules themselves. - Per row you can usually choose its own picture, its link, its Loading and its Animation. Both of the last two start as Use the module setting: leave them alone unless this one row must be different (for example the first picture of a page loads straight away, the rest wait).
A list inside a row: one per line
Some rows hold a short list of their own (a team member's links, a price's features, a picture's tags). Joomla cannot put a list inside a list, so such a box is a plain text area with one entry on each line.
- Press Enter between entries. Empty lines are ignored.
- Each line is trimmed and cut at the length shown in the box's description. Only the number of lines the box allows are used.
- Plain text only. Tags are removed when you save, so a line cannot hide a script. A web address on a line is still only text until the module chooses to turn it into a link, and then it checks the address first.
Pictures
Choose a picture from the images folder (JPG, PNG, WebP, AVIF or GIF). It is converted to a lighter format and cut to the sizes each screen needs, automatically. The originals are never changed. A picture that is missing, sits outside the images folder or is one of Webal Blocks' own generated copies is simply not shown, and a line is written to the Webal Blocks log when logging is on.
SVG pictures work only in a module that says so. They are cleaned each time they are shown (scripts and event handlers are removed). An SVG the cleaner cannot accept is not shown.
The words: alternative text, decorative, caption
These are three different things.
| Setting | What it is for |
|---|---|
| Alternative text | What a visitor who cannot see the picture hears instead. Describe what it shows, in a short phrase. Leave it empty only for a decorative picture. |
| Decorative image | Choose Yes when the picture adds nothing a visitor needs (a pattern, a flourish). Screen readers then skip it, and any alternative text you typed is ignored. |
| Caption | Text printed under the picture for everyone. A caption does not replace the alternative text, and the alternative text is never copied from the caption, the title or the file name. |
A picture that is neither decorative nor described is printed with empty alternative text, which is the same as decorative to a screen reader, so the module can warn you about it. Fix it in the row.
Loading
Lazy (the default) waits until a picture is close to the screen, which keeps the page fast. Eager loads it at once with high priority: choose it only for the picture a visitor sees without scrolling, such as a hero. Deferred holds a picture back until the visitor scrolls about one screen away from it, then fetches it: it saves the most data but can delay the first view of the picture, so never use it at the top of the page, and the pictures of a slider stay Lazy whatever is chosen (this reference). (A slideshow that stacks its slides on top of each other cannot defer them with lazy loading; the slideshow module looks after that itself.)
Picture style (how every picture in the module looks)
| Setting | Choices |
|---|---|
| Shape | Auto (keep each picture's own shape), square, 4:3, 16:9, 21:9. A fixed shape makes the pictures line up. |
| Fit | Cover crops the edges to fill the shape; Contain shows the whole picture with space around it. Only matters with a fixed shape. |
| Width | How much of its space each picture fills: a quarter, half, three quarters or full width. Inherit keeps the picture at its own size, never stretched beyond its space. |
| Corners | Square, rounded, circle or pill. A circle looks right with the square shape. |
| Border and Border colour | None, thin or medium. The colour is the theme's border colour unless you choose one of the named colours. |
| Shadow | None, small, medium or large. |
| Hover effect | Grow slightly, or shrink to fit (the picture starts a little enlarged and settles to the whole picture). Only the picture moves, never the box around it. The effect is off for visitors who ask their device for reduced motion and on devices that cannot hover (phones and tablets). |
The picture's download size follows its real place in the layout: the number of columns on each screen size, a slider's slides per view and the Width above. A narrow sidebar does not download a wide image.
Element style
Cards, features, calls to action and slideshows let you restyle four kinds of text, each with the same five choices, all starting as Inherit (the theme's own look):
| Part | The text it styles |
|---|---|
| Title | The heading of the item. |
| Meta | The small line: a date, a role, a category. |
| Content | The body text. |
| Link | The words of a read more link. |
For each part you can choose a look (heading size 1 to 6, display size 1 to 6, lead or small), a colour, a weight (light, normal, bold), a letter case (upper, lower, capitalised) and the space above (0 to 5 steps). The look changes the size, not the heading level: the level in the page outline is set elsewhere, and you should never skip a level.
Colour notes: the named colours follow light and dark mode, except light, dark and white, which are fixed. Use a fixed colour only on a background you can see. Every colour you pick should still be easy to read: check it on the page in both modes.