Focuspoint-Plugin für October CMS

von Michael Tellenbach

    Das Wichtigste in Kürze

  • Die Problematik mit den Bildern
    Bilder werden auf einer Website häufig nicht im Original-Format angezeigt, sondern in einen Rahmen eingepasst. Durch eine falsche Ausrichtung verlieren einige Bilder dabei ihre Aussagekraft.
  • Die Lösung dieser Problematik
    Durch das Focuspoint-Feature ist der Website-Administrator nun selber in der Lage, über das October CMS seine hochgeladenen Bilder zu fokussieren.
  • Simpler Vorgang
    Einfach das wichtigste Element eines Bildes per Mausklick fokussieren und der Rest übernimmt das Focuspoint-Plugin.

Die Herausforderung «Bildausschnitt»

Websites werden häufig geprägt von Bildern: In Form eines Headers, einzelnen Inhalten oder ganzen Galerien. Dabei muss man sich nicht nur überlegen, wie die Bilder auf einem grossen Desktop angezeigt werden sollen, sondern auch wie sich diese auf anderen Bildschirmgrössen (Mobile, Tablet etc.) verhalten müssen, um den Fokus nicht zu verlieren.

So sind Bilder im Zusammenspiel mit dem Responsive Design eine unerwartet grosse Herausforderung. Eine Möglichkeit, den beabsichtigten Fokus eines Bildes auf unterschiedlichen Anzeigegrössen und -formaten beizubehalten, bietet die Erweiterung des ResponsiveImages-Plugin für das October CMS mit dem Focuspoint-Feature, welches durch uns entwickelt wurde.

Mögliche Korrekturen

Hat man beispielsweise eine Reihe von Bildern in einer Galerie, werden die Bilder darin meistens automatisiert durch ein Plugin oder das Styling in einem einheitlichen Format und Ausschnitt angezeigt. Diese Standardisierung führt manchmal dazu, dass der falsche Bildteil unglücklicherweise in der Vordergrund des angezeigten Bildausschnitts gerückt wird.

Im nachfolgenden Beispiel wurde für die Bilder in der Galerie ein Seitenverhältnis von 3:4 definiert. Die originalen Formate der eingefügten Bilder entsprechen jedoch nicht diesem Format und werden nun vom System automatisch eingepasst, wie in diesem Beispiel zu sehen:

Standard-Bildausschnitt mit suboptimalem Fokus
Standard-Beschnitt eines Bildes, welches damit seinen Fokus verliert.

Bei einem Seitenverhältnis von 3:4 trennt das Standard-Styling links und rechts zwei gleich breite Teile ab und nur die Mitte des Bildes wird angezeigt. Der Fokus, welcher in diesem Bild das Base-Cap sein sollte, wird somit nur ungenügend dargestellt.

Nachfolgend sehen wir das Resultat anhand von vier Beispielbilder: Hierbei passt nur das letzte Bild schön in die vorgegebenen Masse. Die ersten drei Bilder sind deplatziert, da der Fokus des Bildes nicht dort liegt, wo das System die Bilder beschnitten hat. Dies führt dazu, dass die wichtigen Inhalte eines Bildes zur Nebensache oder gar nicht mehr angezeigt werden.

Galerie mit Bilder ohne Fokussierung auf eigentliche Bilszenen
Galerie mit Bilder ohne Fokussierung auf eigentliche Bilszenen.

Welche Alternativen bieten sich nun dem Entwickler?

  • Bilder manuell zuschneiden und neu integrieren: Dies bedeutet jedoch, dass Informationen des Bildes verloren gehen und das Bild für verschiedene Anwendungsfälle mehrere Male hochgeladen werden muss.
  • Manuelle Ausrichtung der Bilder über IDs und Klassen für jedes Anzeigeformat: Dies führt zu einer schöneren Darstellung, bläst das CSS jedoch auf und erschwert spätere Anpassungen enorm.

Kurz: Der Code wird ineffizient ‒ die Bilder ein «Gebastel». Ebenfalls ist es für jemand ohne Bildbeareitungs- oder Programmierkenntnisse schier unmöglich den Fokus der Bilder zu ändern oder ein zusätzliches Bild hinzuzufügen.

Die Lösung: Focuspoint

Die oben genannten Alternativen bieten aus unserer Sicht nie ein vollständig optimales Darstellungsresultat. Bei kleineren Anpassungen sind diese zwar schnell umgesetzt, dienen jedoch nicht als längerfristige Lösung.

Wie wäre es denn, wenn man gleich bei der Erstellung einer Galerie einen spezifischen Fokuspunkt für eines einzelne Bild setzen kann, welcher im Frontend als solcher erkannt, interpretiert und fokussiert wird?

Mit diesem Gedanken haben wir das Feature «Focuspoint» für das October CMS ins Leben gerufen. Mit einem einfachen Picker soll es möglich sein, den Fokus eines Bildes zu definieren. Muss das Bild nun verkleinert oder beschnitten werden, soll das System automatisch den definierten Fokus beibehalten.

Wie funktioniert's?

Als Grundlage dient das «ResponsiveImages Plugin» für October CMS. Dieses wird mit dem Focuspoint-Feature erweitert.

Backend

Im Backend wurde dazu das config-form-Partial des Fileupload-Widgets erweitert, welches zur Konfiguration von Bilder und Dateien eingesetzt wird.

Neu wurden zwei versteckte Felder ergänzt, welche für die X- und Y-Achse eines Punktes auf dem Bild stehen. Diese werden befüllt, sobald der User auf einen Punkt im Bild klickt. Die Werte sind gleich des prozentualen Abstandes vom linken Rand (X-Achse) und oberen Rand (Y-Achse).

Das Fokuspoint-Feature ist opt-in: Um das Feature zu aktivieren, kann die Eigenschaft focuspoint: true im Fileupload-Widget des gewünschten Plugins verwendet werden.

Dies sieht dann als Beispiel folgendermassen aus:

fields:
    images:
        label: Bilder
        mode: image
        type: fileupload
        focuspoint: true

Danach sieht man im Upload-Widget, dass das Bild in den Hintergrund gesetzt wurde und im Vordergrund ein Punkt erscheint. Dieser dient dazu, den gewählten Fokus zu veranschaulichen. Klickt man nun auf einen beliebigen Punkt auf dem Bild, verschiebt sich der Fokus dorthin.

Focuspoint-Picker im October CMS
Config-Form mit Focuspoint-Picker.

Frontend

Im Frontend kann der Bildpfad mit der focus Methode ausgegeben werden. Diese nutzt die gleiche API wie die thumb Methode ‒ Breite, Höhe und Zuschnitt können also definiert werden.

<!-- 400x500px grosses Bild ausgeben -->
<img src="{{ image.focus(400, 500) }}" alt="">

Mit der focus Methode generierte Bilder werden beim Rendern der Seite mit der focuspoint-image CSS-Klasse sowie den object-fit und object-position Eigenschaften erweitert. Wer die Inline-Styles nicht mag oder mehr Kontrolle benötigt, kann diese auch deaktivieren und alternativ mit data Attributen arbeiten.

Das generierte Markup sieht dann folgendermassen aus:

<img src="/storage/temp/public/a9f/2bd/159/offline-focus_30_400_500_50_50_0_0_auto__400.jpg" alt="" 
     class="focuspoint-image"
     data-focus-x="50" 
     data-focus-y="50"
     style="width: 400px; height: 500px; object-fit: cover; object-position: 50% 50%;">

Zurück zu unserem Galerie-Beispiel

Bei der Galerie eingesetzt, übersteuern wir nun den Standart-Beschnitt und fokussieren auf den gewünschten Bildpunkt. Wenn wir den Beschnitt nun wieder visualisieren, erkennt man, dass sich der Fokus nun nach rechts verschoben hat. Somit rückt die eigentliche Bildszene in den Vordergrund.

Optimaler Bildausschnitt des Bildes
Der Bildausschnitt versetzt sich auf die eigentliche Bildszene.

Wie man nun in der Galerie erkennt, werden die Bilder nach der Anwendung des Focuspoint besser dargestellt:

Galeriebilder nach Fokussierung
Galerie mit Bilder mit Fokussierung auf eigentliche Bilszene.

Zum Vergleich alle Bilder ohne Focuspoint:

Galeriebilder vor der Fokussierung

Browser-Kompatibilität

Die CSS-Kompatibilität von object-position ist noch nicht auf allen Browsern komplett gegeben. Durch die data Attribute stehen dem Entwickler jedoch alle Türen offen um eine JavaScript basierte Focuspoint-Library einzusetzen.

Ein Beitrag aus dieser Serie
October CMS

Infos, Tutorials und News zu unserem lieblings CMS.

Weitere Beiträge anzeigen »
Mehr aus dieser Kategorie
Entwicklung
Hier findest du Blogartikel technischer Natur.
Weitere Beiträge anzeigen »

Los geht's!

Kontaktiere uns noch heute

Für Offerten, technische Anfragen oder einfach nur um Hallo zu sagen.