?Qué es la herramienta de enfoque de imagen?

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, sólo tiene que 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 "estado exterior".
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 de 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 proporcionafondo-posiciónresponder 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 imágenes, 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.

Contacte con nosotros
?No puede leer el tutorial? Póngase en contacto con nosotros para obtener una respuesta gratuita. Ayuda gratuita para sitios personales y de peque?as empresas	Servicio de atención al cliente WeChat
① Tel: 020-2206-9892
② QQ咨詢：1025174874
(iii) Correo electrónico: info@361sale.com
④ Horario de trabajo: de lunes a viernes, de 9:30 a 18:30, días festivos libres