Ferramenta de focagem da imagemO que é que quer?

A ferramenta de foco de imagem é uma ferramenta que lhe permite selecionar rapidamente a localização da área de foco principal de qualquer imagem. Ao clicar simplesmente na imagem, pode facilmente determinar exatamente onde o ponto focal da imagem está localizado nos eixos x e y.

Esta posição x e y pode então ser utilizada nas propriedades CSS "background-position" ou "object-position". Desta forma, as partes importantes da imagem podem ser vistas independentemente do tamanho do ecrã.

Porquê utilizar a ferramenta Image Focus

Muitas vezes, as imagens que definimos no ambiente de trabalho cortam pessoas ou objectos importantes quando visualizadas noutros dispositivos. Este problema pode ser evitado se definir a focagem da imagem para garantir que as partes importantes da imagem estão sempre visíveis.

Como implementar

Para adicionar a ferramenta Image Focus à sua biblioteca multimédia do WordPress, basta adicionar o código ao snippet de código PHP ou ao ficheiro functions.php do tema filho.

Siga os passos abaixo:

1. aceda ao painel de controlo do WordPress

2. abra o editor de temas

1. No menu do lado esquerdo, localize e clique em "estado exterior".
2. No menu suspenso, selecione "Editor de ficheiros de temas".

3. edite o ficheiro functions.php.

Na lista de ficheiros à direita, localize e clique no ficheiro "functions.php" (que pode aparecer como "Theme Functions").

Nome do trecho de código: Adicione a ferramenta de focagem de imagem à biblioteca de mídia

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>', '
    ).

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

função add_focus_point_scripts() {
    ? ; function add_focus_point_scripts() { ?

.attachment-info .thumbnail.thumbnail {
    largura máxima: 210px;
    max-height: 210px;
}

.attachment-info .thumbnail.thumbnail img {
    largura máxima: 210px; altura máxima: 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');

        se (!imgParent) return;

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

        const img = imgParent.querySelector('img'); se (!img) regressa;

        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');

        se (!sharedParent) return;

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

        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() {
    // Carregue os scripts apenas no painel do editor do Bricks Builder
    se (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');

Como utilizar a ferramenta Foco da imagem

Etapas de utilização

1. Biblioteca multimédia aberta: Aceda ao backend do WordPress e navegue até à biblioteca multimédia.
2. Selecionar imagemClique em qualquer imagem e, do lado direito, verá uma nova opção.
3. Definir o focoClique em qualquer parte da imagem e a ferramenta utilizará automaticamente o xx% yy% actualiza a posição do foco.

advertência

• A posição de focagem não é guardadaNota: As posições de focagem não são guardadas na base de dados para evitar confusões desnecessárias. Isto significa que a focagem pode ser reposta de cada vez para diferentes necessidades.

Aplicação de CSS

Quando utiliza otamanho do fundo: capaO valor de focagem pode ser utilizado quando a imagem de fundo do

• preparar posição de fundo: 22% 40%; talvez
• preparar background-position-x: 22%; background-position-y: 40%;

Para as definições que estão definidas paraobject-fit: coberturada imagem, utilizando os mesmos valores:

• preparar posição do objeto: 22% 40%.

Utilize no Elementor

O Elementor forneceposição de fundoresponder com cânticosposição do objetomas poderá ter alguns problemas ou não ter acesso a estas opções. Por conseguinte, para definir corretamente o foco, poderá ter de utilizar CSS personalizadas.

Definir a focagem da imagem de fundo

1. Acesso ao Editor ElementorSelecione o elemento para o qual a imagem de fundo deve ser definida.
2. Definir o tamanho do fundoNo Elementor UI, defina o tamanho do fundo como "cover".
3. Adicione CSS personalizadoSelecione Avançadas > CSS personalizadas e adicione o seguinte código:

seletor {
    posição de fundo: 22% 40%;
}

Naturalmente, substitua 22% 40% pelo seu próprio valor de focagem.

Define o foco da imagem de object-fit: cover.CSS definido pelo utilizador do ElementorReferível.

Para as definições que estão definidas paraobject-fit: coberturaprecisa de adicionar o seguinte CSS:

seletor {
    posição do objeto: 22% 40%;
}

Suporte ao editor

A ferramenta Foco na imagem funciona diretamente quando seleciona imagens no Editor de blocos, no Editor Elementor e no Editor Bricks Builder.

Nestes editores, pode clicar na pequena imagem de pré-visualização no canto superior direito:

1. editor de blocosDepois de selecionar um bloco de imagem, clique em Pré-visualizar imagem para definir o foco.
2. Editor ElementorDepois de selecionar um elemento de imagem, clique na pequena imagem de pré-visualização no canto superior direito para definir o foco.
3. Editor do Bricks BuilderDepois de selecionar um elemento de imagem, clique em Pré-visualizar imagem para definir o foco.

Funciona em todos os sites WordPress com acesso direto à biblioteca multimédia.

Resumo:

A Ferramenta de Foco de Imagem é uma ferramenta que ajuda os utilizadores a selecionar rapidamente a localização da área de foco principal de uma imagem. Ao adicionar esta ferramenta à biblioteca multimédia do WordPress, os utilizadores podem definir facilmente a posição de foco de uma imagem, garantindo que as partes importantes estão sempre visíveis quando apresentadas em diferentes dispositivos. Utilizando esta ferramenta, os utilizadores podem clicar numa imagem para determinar as coordenadas do eixo x e do eixo y da posição de foco e utilizar estes valores de coordenadas para propriedades CSS, a fim de garantir que as partes importantes da imagem são apresentadas na íntegra em qualquer tamanho de ecrã. Ao adicionar o snippet de código apropriado ao ficheiro functions.php, os utilizadores podem implementar esta funcionalidade no WordPress e utilizá-la diretamente no Block Editor, no Elementor Editor e no Bricks Builder Editor.