Add Image Focus Tool to WordPress Media Library

What is the Image Focus Tool?

The Image Focus Tool is a tool that allows you to quickly select the location of the main focus area of any image. By simply clicking on the image, you can easily determine the exact location of the image's focal point on the x and y axes.

This x and y position can then be used in the background-position or object-position CSS properties. This way, the important parts of the image can be seen regardless of the screen size.

Why Use the Image Focus Tool

Often, images we set on the desktop crop out important people or objects when viewed on other devices. This problem can be avoided by setting the image focus to ensure that the important parts of the image are always visible.

How to implement

To add the Image Focus tool to your WordPress media library, simply add the code to the PHP code snippet or child theme's functions.php file.

Follow the steps below:

1. Login to the WordPress Dashboard

2. Open the Theme Editor

1. In the left-hand menu, find and click on "exterior condition".
2. From the drop-down menu, select "Theme File Editor".

3. Edit the functions.php file.

In the list of files on the right, find and click on the "functions.php" file (which may appear as "Theme Functions").

Code Snippet Name: Add Image Focus Tool to Media Library

function add_focus_point_field($form_fields, $post) {
    $form_fields['focus_point'] = array(
        'label' => 'Image Focus Point',
        '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() {
    ? >

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

.attachment-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 (!
        const imgHeight = img.height; const offsetX = event.offsetX; event.height
        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() {
    // Only load the scripts in the Bricks Builder editor panel
    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'); }

How to use the Image Focus tool

Procedure for use

1. Open Media Library: Go to your WordPress backend and navigate to the media library.
2. Select Image: Click on any image and on the right side you will see a new option.
3. Setting the Focus: Click on any part of the image and the tool will automatically use the xx% yy% value updates the focus position.

caveat

• Focus position is not saved: Focus positions are not saved to the database to avoid unnecessary confusion. This means that the focus can be reset each time for different needs.

Applying CSS

When you use thebackground-size: coverThe focus value can be used when the background image of the

• set up background-position: 22% 40%; maybe
• set up background-position-x: 22%; background-position-y: 40%;

For settings that are set toobject-fit: coverof the image, using the same values:

• set up object-position: 22% 40%.

Use in Elementor

Elementor providesbackground-positionrespond in singingobject-positionoptions, but there may be some problems with or missing from these options. Therefore, in order to set the focus correctly, you may need to use custom CSS.

Setting the background image focus

1. Access to the Elementor Editor: Selects the element for which the background image needs to be set.
2. Setting the background size: In Elementor UI, set the background size to "cover".
3. Add custom CSS: Navigate to Advanced > Custom CSS and add the following code:

selector {
    background-position: 22% 40%;
}

Of course, replace 22% 40% with your own focus value.

Sets the image focus of object-fit: cover.Elementor user-defined CSSReferable.

For settings that are set toobject-fit: coverimage, you need to add the following CSS:

selector {
    object-position: 22% 40%;
}

Editor Support

The Image Focus tool works directly when selecting images in the Block Editor, Elementor Editor and Bricks Builder Editor.

In these editors, you can click on the little preview image in the upper right corner:

1. block editor: After selecting an image block, click Preview Image to set the focus.
2. Elementor Editor: With the image element selected, click on the small preview image in the upper right corner to set the focus.
3. Bricks Builder Editor: After selecting an image element, click Preview Image to set the focus.

It works on all WordPress sites with direct access to the media library.

Summary:

The Image Focus Tool is a tool that helps users quickly select the location of the main focus area of an image. By adding this tool to the WordPress media library, users can easily set the focus position of an image, ensuring that important parts are always visible when displayed on different devices. Using this tool, users can click on an image to determine the x-axis and y-axis coordinates of the focus position and use these coordinate values for CSS properties to ensure that important parts of the image are displayed in full at any screen size. By adding the appropriate code snippet to the functions.php file, users can implement this functionality in WordPress and use it directly in the Block Editor, Elementor Editor and Bricks Builder Editor.