feat: add CSS float and alignment support for images and figures by CybotTM · Pull Request #1174 · TYPO3-Documentation/render-guides

CybotTM · 2026-02-12T16:48:39Z

Resolves: #1172

Summary

Add missing float: left/float: right CSS properties to img.float-left/img.float-right rules (Bootstrap 5 removed these)
Add figure float rules (figure.float-left, figure.float-right) with max-width: 50% and responsive breakpoint (<576px disables float)
Add img.align-center / figure.align-center CSS for centered alignment
Replace deprecated HTML align attribute in image.html.twig with CSS class mapping (:align: left → float-left, :align: right → float-right, :align: center → align-center)
Add :align: CSS class support in figure.html.twig
Preserve :align: option on FigureNode (was being stripped) so .. figure:: :align: left works
Strip float-left/float-right from inner <img> inside <figure> to prevent caption wrapping issues
Add .clear-both CSS utility alias (alongside existing .cc)
Split ImagesAndFigures rendertest into separate pages: Index (styling), Zoom, FloatAndAlignment

Files changed

File	Change
`assets/sass/components/_rst.scss`	Add `float` property + `align-center` to img rules
`assets/sass/components/_images.scss`	Add figure float/align rules + responsive
`assets/sass/_utilities.scss`	Add `.clear-both` alias
`resources/template/body/image.html.twig`	Replace HTML `align` attr with CSS classes
`resources/template/body/figure.html.twig`	Add `:align:` CSS class support
`src/Directives/FigureDirective.php`	Keep `:align:` on FigureNode, strip float from inner img
`resources/public/css/theme.css`	Regenerated
`Documentation-rendertest/ImagesAndFigures/`	Split into Index + Zoom + FloatAndAlignment

Test plan

All 195 PHPUnit tests pass
PHPStan reports 0 errors
Rendered docs verified: image/figure float left/right with text wrapping
:align: left/:align: right on figures works correctly
.clear-both clears floats as expected
Responsive: floats disable on small screens (<576px)
Visual review of rendered ImagesAndFigures pages

Add documentation for the new CSS float and alignment support for images and figures introduced in render-guides 0.37.0. Split the monolithic Images.rst into three focused pages: - Images.rst: basics, parameters, Examples 1-2 - ImageZoom.rst: zoom modes, options, accessibility, Examples 3-7 - ImageAlignment.rst: float/align, clearing, responsive, Examples 8-10 Depends on: TYPO3-Documentation/render-guides#1174

Documentation-rendertest/ImagesAndFigures/FloatAndAlignment.rst

Documentation-rendertest/ImagesAndFigures/Zoom.rst

Add documentation for the new CSS float and alignment support for images and figures introduced in render-guides 0.37.0. Split the monolithic Images.rst into three focused pages: - Images.rst: basics, parameters, Examples 1-2 - ImageZoom.rst: zoom modes, options, accessibility, Examples 3-7 - ImageAlignment.rst: float/align, clearing, responsive, Examples 8-10 Depends on: TYPO3-Documentation/render-guides#1174

ineswillenbrock

It might have been better to modernize the classes and use float-start and float-end: those are the replacements for float-left and float-right.

But this one might be the safer option: who knows where the float options are used besides the rendered content

linawolf · 2026-02-19T15:42:15Z

It would be great to have functional tests covering the changes to the figure directive

CybotTM · 2026-02-20T12:43:54Z

Added in 4322425 — integration tests covering:

Figure :align: left/right/center → maps to float-left/float-right/align-center CSS classes on <figure>
Image :align: left/right → maps to CSS classes on <img>
Figure :class: float-left → float class on <figure>, stripped from inner <img>
Mixed classes (:class: float-left with-shadow) → float stripped from inner image, extra classes preserved
Combined :align: + :class: → both applied to <figure> element

All 113 integration tests pass.

Add missing float and alignment CSS for images and figures, replacing the deprecated HTML align attribute with CSS class mapping. - Add float-left/float-right CSS rules for img and figure elements with max-width: 50% and responsive breakpoint at 575.98px - Add align-center CSS for centered images and figures - Map :align: left/right/center to CSS classes in Twig templates, replacing the deprecated HTML align attribute on <img> - Preserve :align: option on FigureNode (was being stripped) - Strip float classes from inner <img> inside <figure> to prevent caption wrapping issues - Add .clear-both CSS utility alias alongside existing .cc - Split ImagesAndFigures rendertest into Index, Zoom, and FloatAndAlignment pages

Cover all float/alignment scenarios: - Figure :align: left/right/center maps to CSS classes - Image :align: left/right/center maps to CSS classes - Figure :class: float-left/right (float stripped from inner img) - Mixed :class: float-left with-shadow (extra classes preserved) - Image :class: float-right - Combined :align: + :class: (both applied to figure element)

linawolf · 2026-02-28T06:33:14Z

Thanks for your contribution!

* docs: document image/figure float and alignment options Add documentation for the new CSS float and alignment support for images and figures introduced in render-guides 0.37.0. Split the monolithic Images.rst into three focused pages: - Images.rst: basics, parameters, Examples 1-2 - ImageZoom.rst: zoom modes, options, accessibility, Examples 3-7 - ImageAlignment.rst: float/align, clearing, responsive, Examples 8-10 Depends on: TYPO3-Documentation/render-guides#1174 * fix: correct heading underline characters for TYPO3 convention When ImageZoom.rst and ImageAlignment.rst were extracted from Images.rst into their own pages, heading underline characters were not promoted to match the new document hierarchy. Sections that were h3/h4 in the parent document need to become h2/h3 as standalone pages. TYPO3 heading convention: - h1: = above and below (page title) - h2: = below only (sections) - h3: - below only (subsections) - h4: ~ below only (sub-subsections) Signed-off-by: Sebastian Mendel <info@sebastianmendel.de> --------- Signed-off-by: Sebastian Mendel <info@sebastianmendel.de>

CybotTM force-pushed the fix/1172-image-figure-float branch 2 times, most recently from c63597b to 0cf2a02 Compare February 12, 2026 17:03

CybotTM changed the title ~~[BUGFIX] Add CSS float support for image/figure alignment~~ [FEATURE] Add CSS float support for image/figure alignment Feb 12, 2026

linawolf reviewed Feb 14, 2026

View reviewed changes

Documentation-rendertest/ImagesAndFigures/FloatAndAlignment.rst Show resolved Hide resolved

linawolf reviewed Feb 14, 2026

View reviewed changes

Documentation-rendertest/ImagesAndFigures/Zoom.rst Show resolved Hide resolved

ineswillenbrock approved these changes Feb 17, 2026

View reviewed changes

CybotTM mentioned this pull request Feb 17, 2026

[FEATURE] Modernize float classes to Bootstrap 5 with deprecation handling #1179

Open

3 tasks

CybotTM force-pushed the fix/1172-image-figure-float branch from d8cea7a to 3b6155f Compare February 18, 2026 07:08

CybotTM marked this pull request as draft February 18, 2026 08:27

CybotTM marked this pull request as ready for review February 18, 2026 09:29

CybotTM changed the title ~~[FEATURE] Add CSS float support for image/figure alignment~~ feat: add CSS float and alignment support for images and figures Feb 18, 2026

CybotTM mentioned this pull request Feb 18, 2026

feat: modernize float classes to Bootstrap 5 with deprecation handling netresearch/render-guides#4

Closed

5 tasks

CybotTM force-pushed the fix/1172-image-figure-float branch 2 times, most recently from eb0ec66 to 8eb929c Compare February 20, 2026 13:08

CybotTM marked this pull request as draft February 20, 2026 13:09

CybotTM force-pushed the fix/1172-image-figure-float branch from 8eb929c to e20a1b7 Compare February 20, 2026 13:18

CybotTM marked this pull request as ready for review February 20, 2026 13:19

CybotTM added 2 commits February 22, 2026 16:02

CybotTM force-pushed the fix/1172-image-figure-float branch from e20a1b7 to 9c48651 Compare February 22, 2026 15:02

linawolf approved these changes Feb 28, 2026

View reviewed changes

linawolf merged commit 2dddc8b into TYPO3-Documentation:main Feb 28, 2026
9 checks passed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: add CSS float and alignment support for images and figures#1174

feat: add CSS float and alignment support for images and figures#1174
linawolf merged 2 commits intoTYPO3-Documentation:mainfrom
CybotTM:fix/1172-image-figure-float

CybotTM commented Feb 12, 2026 •

edited

Loading

Uh oh!

Uh oh!

Uh oh!

ineswillenbrock left a comment

Uh oh!

linawolf commented Feb 19, 2026

Uh oh!

CybotTM commented Feb 20, 2026

Uh oh!

Uh oh!

linawolf commented Feb 28, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Conversation

CybotTM commented Feb 12, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Files changed

Test plan

Related

Uh oh!

Uh oh!

Uh oh!

ineswillenbrock left a comment

Choose a reason for hiding this comment

Uh oh!

linawolf commented Feb 19, 2026

Uh oh!

CybotTM commented Feb 20, 2026

Uh oh!

Uh oh!

linawolf commented Feb 28, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

CybotTM commented Feb 12, 2026 •

edited

Loading