Fluid Images
Fluid layouts place one image beside text and extend the image to the outer screen edge on larger displays. On mobile they stack.
| Image position | Supported module tag | Equivalent alias |
|---|---|---|
| Left | module:image-left-fluid |
module:fluid-image-left |
| Right | module:image-right-fluid |
module:fluid-image-right |
Use module:image-right-fluid, not module:image-right:fluid. The extra colon in the latter spelling is not supported and can leave the section rendering as default Basic content.
#Edit the section
- Add one supported module tag to the Basic section page.
- Edit Headline and Basic Content.
- Upload the image to that page. The first image found in its attachments is used.
- Use Excerpt for an image description; the heading is the fallback.
- Save and preview at large and small widths, checking the image crop.
These sections use their own edge-to-edge layout and spacing. Shared style tags apply, but spacing:regular or spacing:large does not replace their fixed outer spacing.
An existing module:image-content section can also select a fluid layout with layout:image-left-fluid / layout:fluid-image-left or their right-hand equivalents. Use one approach consistently and remove conflicting layout tags.