e-spin/contao-backend-size-bundle

Let each backend user scale the icons of the Contao backend to a size that suits them.

1.0.0 2026-08-11 14:38 UTC

Requires

• php: ^8.3
• contao/core-bundle: ^5.7
• symfony/config: ^7.4
• symfony/dependency-injection: ^7.4
• symfony/event-dispatcher: ^7.4
• symfony/http-kernel: ^7.4
• symfony/security-bundle: ^7.4

Requires (Dev)

• contao/manager-plugin: ^2.2
• phpcq/runner-bootstrap: ^1.0@dev
• phpunit/phpunit: ^12.0

LGPL-3.0-or-later

• e-spin

• backend
• accessibility
• icon
• contao
• size

Published on Packagist.org on 2026-08-11 14:53 UTC

README

English below

Contao zeichnet seine Backend-Icons mit 16 Pixeln. Wem das zu klein ist, der kann sich hier eine eigene Größe einstellen — je Benutzer, im eigenen Profil unter Größen im Backend.

Installation

composer require e-spin/contao-backend-size-bundle

Danach die Datenbank aktualisieren (Contao-Manager oder contao:migrate).

Verwendung

Im Benutzerprofil Eigene Icon-Größe anhaken — das genügt bereits, es gelten dann 22 Pixel. Wer möchte, wählt daneben eine andere Größe. Die Einstellung gilt nur für den eigenen Zugang.

Ab etwa 26 Pixeln wird die Spalte mit den Schaltflächen so breit, dass lange Bezeichnungen umbrechen: Gemessen an einer Liste mit dreizehn Operationen wuchs sie bei 32 Pixeln um 120 Pixel, und ein Drittel weniger Zeilen passte auf den Bildschirm. Werte unter 16 zeichnen die Icons kleiner als Contao selbst.

Auswahl einschränken

Welche Größen zur Wahl stehen, lässt sich je Projekt festlegen:

espin_contao_backend_size:
    icon_size:
        sizes: [18, 19, 20, 21]
        default: 20

Ohne Angabe stehen 14 bis 24 zur Wahl, voreingestellt ist 22. Eine Vorgabe außerhalb der angebotenen Größen legt das Backend nicht lahm: Es gilt dann die nächstkleinere angebotene Größe, und eine Meldung im Backend sagt das.

Steht nur eine Größe in der Liste, bleibt nichts zu wählen — die Benutzer können die größeren Icons dann nur noch ein- und ausschalten. Das Feld wird aber weiterhin angezeigt, nur gesperrt: So sieht jeder, welche Größe gilt, und kann bei Bedarf eine andere anfragen.

espin_contao_backend_size:
    icon_size:
        sizes: [22]
        default: 22

Anknüpfungspunkte für eigenes CSS

Solange eine Größe gilt, trägt das Body-Element zwei Klassen: icon_size sagt, dass überhaupt eine gilt, icon_size_22 sagt welche. Damit kann ein projekteigenes Stylesheet darauf reagieren:

body.icon_size_22 .tl_listing .tl_right { gap: 4px }

Wie es arbeitet

Ein Listener fügt beim Ausliefern der Backend-Seite ein <style> ein. Dessen Regeln setzen sich aus drei Gruppen zusammen:

Die Icons selbst. Contao gibt sie auf zwei Wegen aus — die meisten als <img> mit Größenattributen, die übrigen als Hintergrundbild. Bei letzteren muss der Innenabstand des Elements mitwachsen, sonst schiebt sich das Icon über die Beschriftung, und bei den Navigationsgruppen zusätzlich die Höhe, die unabhängig vom Icon bei 18 Pixeln festliegt.

Contaos feste Pixelwerte. Contao rückt Icons an mehreren Stellen um einzelne Pixel zurecht, alle abgestimmt auf 16 Pixel:

• in Listen drei Pixel nach oben,
• beim Umschalter einen Pixel nach oben,
• an Beschriftungen einen Pixel nach unten,
• in der Kopfleiste sogar auf eine eigene Größe.

Größere Icons ragen dadurch aus der Zeile heraus. Beschneidet die ihren Inhalt, fehlt dem Icon die Oberkante. Diese Werte werden deshalb zurückgesetzt — Contao richtet Bilder ohnehin mittig auf der Zeile aus, mehr braucht es nicht.

Platzhalter. MetaModels setzt einen empty_icon dort ein, wo eine andere Zeile ein Icon hat, damit die Spalten fluchten. Er ist ebenfalls auf 16 Pixel festgelegt und wächst hier mit.

Icons und Inhaltsbilder werden am Pfad unterschieden: Icons kommen aus dem Theme, aus einem Bundle oder aus dem Assets-Verzeichnis, wohin manche Erweiterungen eine Kopie der ihren veröffentlichen. Inhaltsbilder liegen in assets/images — als einziger Zweig ausgenommen. Vorschaubilder in der Dateiverwaltung bleiben deshalb unberührt, ebenso das Contao-Logo.

Lizenz

LGPL-3.0-or-later

contao-backend-size-bundle (English)

Contao draws its backend icons at 16 pixels. Anyone who finds that too small can pick a size of their own here — per user, in their own profile under Backend sizes.

Installation

composer require e-spin/contao-backend-size-bundle

Then update the database (Contao Manager or contao:migrate).

Usage

Tick Custom icon size in the user profile — that alone is enough, 22 pixels then apply. Pick a different size next to it if you like. The setting applies to your own account only.

From about 26 pixels on, the column holding the operations grows so wide that long labels start to wrap: measured on a listing with thirteen operations, it grew by 120 pixels at 32, and a third fewer rows fitted on the screen. Anything below 16 draws the icons smaller than Contao does.

Narrowing the choice

Which sizes are on offer can be set per project:

espin_contao_backend_size:
    icon_size:
        sizes: [18, 19, 20, 21]
        default: 20

Without it, 14 to 24 are offered and 22 is preselected. A default outside the offered sizes does not stop the backend: the next smaller size on offer is used instead and a message in the backend says so.

With a single size on the list there is nothing left to choose — users can then only switch the larger icons on and off. The field stays visible all the same, just locked: everyone can see which size applies and ask for a different one if need be.

espin_contao_backend_size:
    icon_size:
        sizes: [22]
        default: 22

Hooks for your own stylesheet

The body element carries two classes while a size is in force: icon_size says there is one, icon_size_22 says which. So a project stylesheet can act on it:

body.icon_size_22 .tl_listing .tl_right { gap: 4px }

How it works

A listener appends a <style> when the backend page is sent. Its rules fall into three groups:

The icons themselves. Contao emits them two ways — most as <img> with size attributes, the rest as background images. For the latter the indent of the element has to grow along, otherwise the icon slides over the label, and the navigation groups need their height as well, which sits at 18 pixels no matter what the icon does.

Contao's fixed pixel values. Contao nudges icons about in several places, all tuned to 16 pixels:

• three pixels up in listings,
• one pixel up on the toggler,
• one pixel down on legends,
• a size of its own in the header bar.

Larger icons stick out of the row because of it. Where the row clips its content, the icon loses its top edge. Those values are therefore reset — Contao already centres images on the line, which is all that is needed.

Spacers. MetaModels puts an empty_icon where another row carries an icon, so the columns line up. It is pinned to 16 pixels as well and grows along here.

Icons and content images are told apart by their path: icons come from the theme, from a bundle, or from the assets directory where some extensions publish a copy of theirs. Content images sit in assets/images, the one branch left out. Thumbnails in the file manager are therefore left untouched, as is the Contao logo.

License

LGPL-3.0-or-later