Download the PHP package e-spin/contao-backend-size-bundle without Composer

contao-backend-size-bundle

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

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:

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.

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:

Daneben steht die Größe als Custom Property --espin-backend-icon-size am Body. Wer eigene Regeln schreibt, rechnet damit, statt die Zahl ein zweites Mal zu pflegen:

Wie es arbeitet

Das Bundle erweitert be_main.html.twig und setzt am Body die beiden Klassen und die Custom Property. Contao sieht dafür bodyAttributes vor, das die Vorlage mit dem Gesetzten zusammenführt — es wird also nichts an der fertigen Seite nachträglich verändert.

Die Regeln selbst liegen in einer gewöhnlichen backend-size.css. Sie enthält keine Zahl, sondern rechnet überall mit der Property, und sie hängt durchgehend an body.icon_size. Wer keine größeren Icons eingestellt hat, bekommt zwar dieselbe Datei ausgeliefert, aber keine einzige greifende Regel; damit ist sie für alle gleich und normal zwischenspeicherbar.

Die 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.

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

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:

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.

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:

The size also sits on the body as the custom property --espin-backend-icon-size. Rules of your own can work off that instead of repeating the number:

How it works

The bundle extends be_main.html.twig and puts the two classes and the custom property on the body. Contao offers bodyAttributes for exactly that, and the template merges in what is set — so nothing is rewritten in the finished page.

The rules live in a plain backend-size.css. It holds no number of its own but works off the property throughout, and every rule hangs off body.icon_size. Anyone who did not ask for larger icons is served the same file but not a single rule that applies, which keeps it identical for everyone and cacheable like any other asset.

The 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.