Optimalen Bildausschnitt definieren bei einer responsiven Website – das Focuspoint-Feature für WordPress hilft

Wer schon einmal eine Website abgefüllt hat, kennt das Problem: Bilder werden oft unvorteilhaft abgeschnitten, wenn sie auf unterschiedlichen Devices angeschaut werden. Das Responsive-Images-Plugin mit dem Focuspoint-Feature hilft einem, diese Herausforderung anzugehen.

Was ist das Focuspoint-Feature?

Oft trifft man auf das Problem, dass Bilder auf einer Website nicht im Originalformat angezeigt werden oder kein fixes Format aufweisen. Wenn die Bilder nicht richtig ausgerichtet werden, können diese an Aussagekraft und Wirkung verlieren. Schlimmstenfalls und schon fast ein Klassiker sind Bilder, auf denen Menschen ohne Kopf angezeigt werden. Bist du an einem Redesign oder Relaunch interessiert, unterstützen wir dich gerne bei deiner neuen Website.

Durch das Focuspoint-Feature von WordPress kann ein Website-Administrator selbst einen Fokus für die Bilder hinzufügen. Hierzu muss man lediglich durch einen Mausklick das wichtigste Element auswählen und das Focuspoint-Feature zeigt das Bild automatisch mit dem gesetzten Fokus an. So kann genau ausgewählt werden, welcher Punkt das Zentrum des Bildes darstellen und somit immer angezeigt werden sollte (also zum Beispiel der Kopf einer Person).

Wie funktioniert das Focus-Point Feature?

Um dieses Feature nutzen zu können, wurde im Backend das config-form-Partial des Fileupload-Widgets mit einer Erweiterung versehen. Dieses dient dazu, um Bilder und Dateien konfigurieren zu können. Um dieses Feature nutzen zu können, wurden zwei versteckte Filter hinzugefügt. Diese repräsentieren die X- und Y-Achse eines Punktes auf dem Bild. Sobald ein User auf einen Punkt in einem Bild drückt, befüllen sich diese Punkte. Die Werte ergeben sich durch den prozentualen Abstand vom linken und oberen Rand, welche die X- und Y-Achse verkörpern. Das Fokuspoint-Feature ist Opt-in, das heisst, dass dies eine Option ist, welche ausgewählt und zugestimmt werden muss. Die Eigenschaft focuspoint:true aktiviert dieses Feature, welches man im Fileupload-Widget des gewünschten Plugins verwenden kann.

Im Frontend werden mit der Focus Methode generierte Bilder mit der focuspoint-image CSS-Klasse wie auch den object-fit und object-position Eigenschaften erweitert. Eine andere Möglichkeit wäre, die Inline-Styles zu deaktivieren und mit data Attributen zu arbeiten, sollte eine grössere Kontrolle für die Bildkonfiguration gewünscht sein.

Fazit

Das Focuspoint-Feature ist ein sehr hilfreiches Werkzeug, welches bisher für Coverbilder zur Verfügung steht. Bei gewöhnlichen Bildern ist dieses Feature zurzeit nicht gegeben. Dies macht jedoch Sinn, da Coverbilder oft kein festes Format aufweisen und im Responsiven Design richtig anzeigt werden müssen. Hier hilft das Feature Focuspoint enorm weiter. Brauchst du Unterstützung bei deiner WordPress Website, dann zögere nicht uns zu kontaktieren.