Wiki

für WordPress-Entwickler

Anleitungen, Snippets und mehr…

Individuellen Bild-Fokus in WordPress mit ACF setzen – So geht’s!

Lesezeit: ca. 4 Minuten

So kannst du mit Advanced Custom Fields (ACF) in WordPress einen individuellen Bild-Fokus festlegen und im Frontend perfekt anzeigen.

Warum einen individuellen Bild-Fokus setzen?

Wenn Bilder in WordPress automatisch zugeschnitten oder skaliert werden, kann es passieren, dass wichtige Bildbereiche verloren gehen. Mit Advanced Custom Fields (ACF) kannst du den Fokuspunkt eines Bildes individuell setzen und das Bild genau so ausrichten, wie du es möchtest.

In dieser Anleitung erfährst du:

✅ Wie du ACF-Felder für einen Bild-Fokus anlegst

✅ Wie du den Fokus interaktiv im Backend setzt

✅ Wie du den Fokuspunkt im Frontend perfekt anzeigst

1. ACF-Felder für den Bild-Fokus anlegen

Erstelle in ACF benutzerdefinierte Felder:

• image_focus_x (Zahlenfeld, 0–100) → Horizontale Position

• image_focus_y (Zahlenfeld, 0–100) → Vertikale Position

• bericht_image (Bildfeld) → Das Bild, dessen Fokuspunkt du setzen willst

Diese Werte werden später genutzt, um das Bild im Frontend optimal auszurichten. Ich übernehme sie in das Style-Attribut des Bildes:

$image = get_field('bericht_image');
$focus_x = get_field('image_focus_x') ?: 50; // Standardwert 50%, falls nicht gesetzt
$focus_y = get_field('image_focus_y') ?: 50;

<img src="<?php echo $image['url']; ?>" 
    title="<?php echo $image['title']; ?>" 
    alt="<?php echo $image['alt']; ?>" 
    style="object-position: <?php echo esc_attr($focus_x); ?>% <?php echo esc_attr($focus_y); ?>%; object-fit: cover;" />

2. Interaktiven Fokuspunkt im WordPress-Backend setzen

Damit du den Fokuspunkt direkt durch einen Klick im Backend setzen kannst, erweitern wir das Admin-Panel mit einem benutzerdefinierten jQuery-Skript.
Füge diesen Code in das WordPress-Backend ein, damit das Fokus-Setzen per Klick funktioniert. Der Code kann als separates Admin-JavaScript eingebunden werden.

// Focuspoint für Headerbild
jQuery(document).ready(function($) {
    function setFocusPoint($img) {
        // Die gespeicherten Werte aus den ACF-Feldern abrufen
        var x = $('input[name*="xxxxxxxxxx"]').val() || 50; // Standardwert 50%
        var y = $('input[name*="yyyyyyyyyy"]').val() || 50;

        // Falls das Bild existiert, den Fokuspunkt setzen
        if ($img.length) {
            $('.focus-point').remove();
            var $dot = $('<div class="focus-point"></div>').css({
                left: x + '%',
                top: y + '%',
                position: 'absolute',
                width: '10px',
                height: '10px',
                background: 'red',
                borderRadius: '50%',
                transform: 'translate(-50%, -50%)'
            });
            $img.parent().append($dot);
        }
    }

    // Fokuspunkt neu setzen nach dem Laden
    $(window).on('load', function() {
        $('.acf-field[data-name="bericht_image"] img').each(function() {
            setFocusPoint($(this));
        });
    });

    // Fokuspunkt aktualisieren, wenn auf das Bild geklickt wird
    $(document).on('click', '.acf-field[data-name="bericht_image"] img', function(event) {
        var $img = $(this);
        var offset = $img.offset();
        var width = $img.width();
        var height = $img.height();
        if (!width || !height) return;

        var x = Math.round(((event.pageX - offset.left) / width) * 100);
        var y = Math.round(((event.pageY - offset.top) / height) * 100);

        var $focus_x = $('input[name*="xxxxxxxxxx"]');
        var $focus_y = $('input[name*="yyyyyyyyyy"]');

        if ($focus_x.length && $focus_y.length) {
            $focus_x.val(x).trigger('change');
            $focus_y.val(y).trigger('change');
        }

        // Neuen Fokuspunkt setzen
        setFocusPoint($img);
    });
});

Anstelle von xxx… und yyy… werden die Field-IDs gesetzt. Bei mir sind diese Werte vorhanden:
xxxxxxxxxx = field_67c0699b61eeb
yyyyyyyyyy = field_67c069c461eec
Man kann sie finden, wenn man das Inputfeld über die Entwicklerkonsole analysiert.

3. CSS für Fokuspunkt

Dieses Admin-CSS macht sichtbar, wo der Benutzer geklickt hat.

.focus-point {
    position: absolute;
    width: 10px;
    height: 10px;
    background: red;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
}
.acf-field[data-name="image_field"] {
    position: relative;
}

4. JavaScript & CSS in WordPress-Admin einbinden

function enqueue_acf_focus_picker_scripts() {
    wp_enqueue_script('acf-focus-picker', get_template_directory_uri() . '/js/admin-focus-picker.js', array('jquery'), null, true);
    wp_enqueue_style('acf-focus-picker-css', get_template_directory_uri() . '/css/admin-focus-picker.css');
}
add_action('admin_enqueue_scripts', 'enqueue_acf_focus_picker_scripts');

Fazit: Bessere Bildkontrolle in WordPress mit ACF

einen individuellen Bild-Fokus setzen
Darstellung im Backend mit gesetztem Bildfokus. Die Werte für Fokus horizontal und vertical aktualisieren sich automatisch.

✅ Der Benutzer klickt im WordPress-Backend auf das Bild → X/Y-Koordinaten werden gespeichert.

✅ Ein roter Punkt zeigt an, wo Du den individuellen Bild-Fokus gesetzt hast.

✅ Beim Laden der Backend-Seite: Das Skript liest die Werte aus den ACF-Feldern und setzt den roten Punkt an die gespeicherte Position.

✅ Beim Klick auf das Bild: Der neue Fokuspunkt wird gesetzt und gespeichert.

✅ Der Punkt bleibt sichtbar, auch nach einem Reload des Backends.

✅ Im Frontend wird das Bild basierend auf diesen Werten ausgerichtet.

✅ Das Bild bleibt responsive und zentriert sich immer um den gewählten Fokuspunkt.

✅ object-fit: cover; sorgt dafür, dass das Bild immer den Container ausfüllt, ohne dass wichtige Inhalte abgeschnitten werden.