Herramienta de enfoque de imagen¿De qué se trata?

La Herramienta de enfoque de imagen es una herramienta que permite seleccionar rápidamente la ubicación de la zona de enfoque principal de cualquier imagen. Simplemente haciendo clic en la imagen, puede determinar fácilmente dónde se encuentra exactamente el punto focal de la imagen en los ejes x e y.

Esta posición x e y puede utilizarse en las propiedades CSS background-position u object-position. De este modo, las partes importantes de la imagen pueden verse independientemente del tamaño de la pantalla.

Por qué utilizar la herramienta Enfoque de imagen

A menudo, las imágenes que configuramos en el escritorio recortan las personas u objetos importantes cuando se ven en otros dispositivos. Este problema puede evitarse ajustando el enfoque de la imagen para garantizar que las partes importantes de la imagen estén siempre visibles.

Cómo aplicar

Para añadir la herramienta Image Focus a la biblioteca multimedia de WordPress, basta con añadir el código al fragmento de código PHP o al archivo functions.php del tema hijo.

Siga los pasos que se indican a continuación:

1. Acceda al panel de control de WordPress

2. Abra el editor de temas

1. En el menú de la izquierda, busque y haga clic en "apariciones".
2. En el menú desplegable, seleccione "Editor de archivos temáticos".

3. Edite el archivo functions.php.

En la lista de archivos de la derecha, busque y haga clic en el archivo "functions.php" (que puede aparecer como "Funciones del tema").

Nombre del fragmento de código: Add Image Focus Tool to Media Library

function add_focus_point_field($form_fields, $post) {
    $form_fields['punto_foco'] = array(
        'label' => 'Punto de enfoque de la imagen',
        '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() { ?

.attachment-info .thumbnail.thumbnail {
    max-ancho: 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 (!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() {
    // Sólo carga los scripts en el panel del editor de Bricks Builder
    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');

Cómo utilizar la herramienta Enfoque de imagen

Pasos de uso

1. Mediateca abiertaVaya a su backend de WordPress y navegue hasta la biblioteca multimedia.
2. Seleccionar imagen: Haz clic en cualquier imagen y a la derecha verás una nueva opción.
3. Enfoque: Haga clic en cualquier parte de la imagen y la herramienta utilizará automáticamente el xx% yy% actualiza la posición de enfoque.

advertencia

• La posición de enfoque no se guardaPosiciones de enfoque: Las posiciones de enfoque no se guardan en la base de datos para evitar confusiones innecesarias. Esto significa que el enfoque se puede restablecer cada vez para diferentes necesidades.

Aplicación de CSS

Cuando utilice elfondo-tamaño: portadaEl valor de enfoque puede utilizarse cuando la imagen de fondo del

• establecer background-position: 22% 40%; tal vez
• establecer background-position-x: 22%; background-position-y: 40%;

Para los ajustesajuste al objeto: cubiertade la imagen, utilizando los mismos valores:

• establecer posición-objeto: 22% 40%.

Uso en Elementor

Elementor proporcionaposición de fondoresponder cantandoobjeto-posiciónpero puede haber algunos problemas o faltar alguna de estas opciones. Por lo tanto, con el fin de establecer el enfoque correctamente, puede que tenga que utilizar CSS personalizado.

Ajustar el enfoque de la imagen de fondo

1. Acceso al editor de ElementorSeleccione el elemento para el que desea establecer la imagen de fondo.
2. Ajustar el tamaño del fondoEn Elementor UI, establece el tamaño del fondo en "cover".
3. Añadir CSS personalizado: Vaya a Avanzado > CSS Personalizado y añada el siguiente código:

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

Por supuesto, sustituya 22% 40% por su propio valor de enfoque.

Fija el enfoque de la imagen del objeto-fit: cover.CSS definido por el usuario de ElementorRemitible.

Para los ajustesajuste al objeto: cubiertanecesita añadir el siguiente CSS:

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

Asistencia al editor

La herramienta Enfoque de imagen funciona directamente al seleccionar imágenes en el Editor de bloques, el Editor de Elementor y el Editor de Bricks Builder.

En estos editores, puedes hacer clic en la pequeña imagen de previsualización de la esquina superior derecha:

1. editor de bloques: Después de seleccionar un bloque de imagen, haga clic en Vista previa de la imagen para establecer el enfoque.
2. Editor Elementor: Tras seleccionar un elemento de la imagen, haga clic en la pequeña imagen de previsualización situada en la esquina superior derecha para fijar el enfoque.
3. Bricks Builder Editor: Después de seleccionar un elemento de imagen, haga clic en Vista previa de la imagen para establecer el enfoque.

Funciona en todos los sitios de WordPress con acceso directo a la biblioteca multimedia.

Resumen:

Image Focus Tool es una herramienta que ayuda a los usuarios a seleccionar rápidamente la ubicación de la zona de enfoque principal de una imagen. Añadiendo esta herramienta a la biblioteca multimedia de WordPress, los usuarios pueden establecer fácilmente la posición de enfoque de una imagen, garantizando que las partes importantes estén siempre visibles cuando se muestren en diferentes dispositivos. Con esta herramienta, los usuarios pueden hacer clic en una imagen para determinar las coordenadas de los ejes X e Y de la posición de enfoque y utilizar estos valores de coordenadas para las propiedades CSS con el fin de garantizar que las partes importantes de la imagen se muestren en su totalidad en cualquier tamaño de pantalla. Añadiendo el fragmento de código adecuado al archivo functions.php, los usuarios pueden implementar esta funcionalidad en WordPress y utilizarla directamente en el Editor de bloques, el Editor de Elementor y el Editor de Bricks Builder.