Image-Header sind ein sehr häufig eingesetztes Element im Webdesign. In der Regel sind Image-Header im Querformat, haben eine definierte Höhe und das Bild wird als Hintergrundbild eines divs eingebunden. Das Problem hierbei ist oft, dass die Bilder hierdurch beschnitten werden, der Bildfokus aber nicht immer in der Bildmitte liegt somit u.U. außerhalb des sichtbaren Bereichs liegen.
Mit CSS lässt sich das Problem lösen indem man mit „background-position“ die Position des Bildfokus bestimmt.
background-position: 20% 80%;Das funktioniert aber natürlich nur, wenn man auch Zugriff auf das Stylesheet oder den Quelltext hat.
Für die Bestimmung des Fokuspunktes eines Beitragsbildes in WordPress habe ich das Plugin „Focal Point“ programmiert.
Mit „Focal Point“ kann der Fokuspunkt des Bildes im Backend mit einem Klick bestimmt werden. Im Template können die Werte dann mit folgendem Code als Inline-CSS ausgegeben werden.
$focal_point = get_post_meta( get_the_ID(), 'focal_point', true );
if ($focal_point) {
$x = esc_attr($focal_point['x']);
$y = esc_attr($focal_point['y']);
$focal_point_css = 'background-position: '.$x.'% '.$y.'% ;';
}Nächster Artikel
HDR-Videos vom iPhone in Final Cut nutzen