Bildfokus-WerkzeugWas ist das?

Das Bildfokus-Werkzeug ist ein Werkzeug, mit dem Sie schnell die Position des Hauptfokusbereichs eines beliebigen Bildes auswählen können. Durch einfaches Anklicken des Bildes können Sie genau bestimmen, wo sich der Brennpunkt des Bildes auf der x- und y-Achse befindet.

Diese x- und y-Position kann dann in den CSS-Eigenschaften background-position oder object-position verwendet werden. Auf diese Weise können die wichtigen Teile des Bildes unabhängig von der Bildschirmgröße gesehen werden.

Warum das Werkzeug Image Focus verwenden?

Oft werden bei Bildern, die wir auf dem Desktop einstellen, wichtige Personen oder Objekte ausgeschnitten, wenn sie auf anderen Geräten betrachtet werden. Dieses Problem kann vermieden werden, indem der Bildfokus so eingestellt wird, dass die wichtigen Teile des Bildes immer sichtbar sind.

Wie man es umsetzt

Um das Image Focus-Tool zu Ihrer WordPress-Mediathek hinzuzufügen, fügen Sie den Code einfach in das PHP-Code-Snippet oder in die Datei functions.php des Child-Themes ein.

Folgen Sie den nachstehenden Schritten:

1. in das WordPress Dashboard einloggen

2. öffnen Sie den Themen-Editor

1. Suchen Sie im Menü auf der linken Seite und klicken Sie auf "Erscheinungen".
2. Wählen Sie aus dem Dropdown-Menü "Editor für Themendateien".

3. bearbeiten Sie die Datei functions.php.

Suchen Sie in der Liste der Dateien auf der rechten Seite die Datei "functions.php" und klicken Sie sie an (sie kann als "Theme Functions" erscheinen).

Code Snippet Name: Bildfokuswerkzeug zur Medienbibliothek hinzufügen

function add_focus_point_field($form_fields, $post) {
    $form_fields['focus_point'] = array(
        label' => 'Bild-Fokuspunkt',
        'input' => 'html',
        'html' => 'ID . '" class="focus-point" readonly>', '
    ).

    return $form_fields.
}
add_filter('attachment_fields_to_edit', 'add_focus_point_field', 10, 2);

function add_focus_point_scripts() {
    ? ; function add_focus_point_scripts() { ?

.anhang-info .thumbnail.thumbnail {
    max-width: 210px;
    max-height: 210px;
}

.anhang-info .thumbnail.thumbnail img {
    max-width: 210px; max-height: 210px; }
    max-height: 210px; }
}
</style
    
document.addEventListener('DOMContentLoaded', () => {
    document.addEventListener('click', (event) => {
        const imgParent = event.target.closest('.thumbnail-image, .attachment-media-view, .wp_attachment_image');

        if (!imgParent) return;

        const img = imgParent.querySelector('img');

        const img = imgParent.querySelector('img'); if (!img) return;

        const imgWidth = img.width; const imgHeight = img.height; if (!img)
        const imgHeight = img.height; const offsetX = event.offsetX; event.height; event.offsetX
        const offsetX = event.offsetX; const
        const offsetY = event.offsetY; const xPercent = ((offsetX / /))
        const xPercent = ((offsetX / imgWidth) * 100).toFixed(0); const yPercent = ((offsetY / imgWidth) * 100).
        const yPercent = ((offsetY / imgHeight) * 100).toFixed(0); const sharedParent = img.
        const sharedParent = img.closest('.media-frame-content, #post-body-content');

        if (!sharedParent) return;

        const focusPoint = sharedParent.querySelector('[id^="focus-point-"]');
        if (!focusPoint) return;

        focusPoint.value = `${xPercent}% ${yPercent}%`;
    });
});
    </script
    <?php
}
add_action('admin_head', 'add_focus_point_scripts');
add_action('elementor/editor/after_enqueue_scripts', 'add_focus_point_scripts');

function add_focus_point_scripts_for_bricks() {
    // Lädt die Skripte nur im Editorbereich des Bricks Builders
    if (function_exists('bricks_is_builder_main') && bricks_is_builder_main()) {
        add_focus_point_scripts(); }
    }
}
add_action('wp_enqueue_scripts', 'add_focus_point_scripts_for_bricks');

So verwenden Sie das Werkzeug Bildfokus

Verwendungsschritte

1. Mediathek öffnenGehen Sie zu Ihrem WordPress-Backend und navigieren Sie zur Medienbibliothek.
2. Bild auswählenKlicken Sie auf ein beliebiges Bild und auf der rechten Seite sehen Sie eine neue Option.
3. Den Schwerpunkt setzenKlicken Sie auf einen beliebigen Teil des Bildes und das Tool verwendet automatisch die xx% yy% Wert aktualisiert die Fokusposition.

caveat

• Fokusposition wird nicht gespeichertFokusposition: Die Fokusposition wird nicht in der Datenbank gespeichert, um unnötige Verwirrung zu vermeiden. Dies bedeutet, dass der Fokus jedes Mal für unterschiedliche Bedürfnisse neu eingestellt werden kann.

Anwendung von CSS

Wenn Sie dieHintergrund-Größe: CoverDer Fokuswert kann verwendet werden, wenn das Hintergrundbild des

• aufstellen Hintergrund-Position: 22% 40%; vielleicht
• aufstellen background-position-x: 22%; background-position-y: 40%;

Für Einstellungen, die aufObjektpassung: Abdeckungdes Bildes, wobei dieselben Werte verwendet werden:

• aufstellen Objekt-Position: 22% 40%.

Verwendung in Elementor

Elementor bietetHintergrund-Positionim Gesang antwortenObjekt-PositionOptionen, aber es kann einige Probleme mit diesen Optionen geben oder sie fehlen. Um den Fokus richtig zu setzen, müssen Sie daher möglicherweise benutzerdefiniertes CSS verwenden.

Einstellen des Fokus des Hintergrundbildes

1. Zugriff auf den Elementor EditorWählen Sie das Element, für das das Hintergrundbild festgelegt werden soll.
2. Einstellen der HintergrundgrößeIn Elementor UI setzen Sie die Hintergrundgröße auf "Cover".
3. Benutzerdefiniertes CSS hinzufügenNavigieren Sie zu Erweitert > Benutzerdefiniertes CSS und fügen Sie den folgenden Code hinzu:

Selektor {
    Hintergrund-Position: 22% 40%;
}

Ersetzen Sie natürlich 22% 40% durch Ihren eigenen Fokuswert.

Legt den Bildfokus von object-fit: cover fest.Elementor benutzerdefinierte CSSEmpfehlenswert.

Für Einstellungen, die aufObjektpassung: AbdeckungBild zu erstellen, müssen Sie das folgende CSS hinzufügen:

Selektor {
    Objekt-Position: 22% 40%;
}

Editor-Unterstützung

Das Bildfokus-Werkzeug funktioniert direkt bei der Auswahl von Bildern im Block-Editor, Elementor-Editor und Bricks-Builder-Editor.

In diesen Editoren können Sie auf das kleine Vorschaubild in der oberen rechten Ecke klicken:

1. BlockeditorNachdem Sie einen Bildblock ausgewählt haben, klicken Sie auf Bildvorschau, um den Fokus zu setzen.
2. Elementor-EditorNachdem Sie ein Bildelement ausgewählt haben, klicken Sie auf das kleine Vorschaubild in der oberen rechten Ecke, um den Fokus zu setzen.
3. Bricks Builder EditorNachdem Sie ein Bildelement ausgewählt haben, klicken Sie auf Bildvorschau, um den Fokus zu setzen.

Es funktioniert auf allen WordPress-Seiten mit direktem Zugriff auf die Medienbibliothek.

Zusammenfassung:

Das Image Focus Tool ist ein Werkzeug, mit dem Benutzer schnell die Position des Hauptfokusbereichs eines Bildes auswählen können. Durch das Hinzufügen dieses Tools zur WordPress-Mediathek können Benutzer die Fokusposition eines Bildes einfach festlegen und so sicherstellen, dass wichtige Teile immer sichtbar sind, wenn sie auf verschiedenen Geräten angezeigt werden. Mit diesem Tool können Benutzer auf ein Bild klicken, um die x- und y-Achsenkoordinaten der Fokusposition zu bestimmen und diese Koordinatenwerte für CSS-Eigenschaften zu verwenden, um sicherzustellen, dass wichtige Teile des Bildes auf jeder Bildschirmgröße vollständig angezeigt werden. Durch Hinzufügen des entsprechenden Codeschnipsels in die Datei functions.php können Nutzer diese Funktionalität in WordPress implementieren und direkt im Block-Editor, Elementor-Editor und Bricks-Builder-Editor verwenden.