É possível definir um ponto focal para que uma parte importante da imagem não seja cortada. Os pontos focais são úteis principalmente em layouts responsivos, quando a mesma imagem pode ser exibida em tamanhos diferentes.
Pontos focais para imagens de plano de fundo
Limitações de disponibilidade de pontos focais:
- Tipo de dimensionamento da imagem: a propriedade "Dimensionamento" precisa estar definida como Cortar imagem para preencher ou Nenhum.
- Cortar imagem para preencher: a origem precisa ser local, e não um URL externo.
- Anúncios dinâmicos: os pontos focais não são compatíveis com anúncios dinâmicos.
- Animação: os pontos focais não podem ser animados. Se você animar as dimensões da imagem, o ponto focal definido será aplicado ao tamanho inicial dela.
A ativação de um ponto focal modifica as opções de alinhamento.
Definir um ponto focal
- Abra a caixa de diálogo Editar ponto focal da imagem usando um dos seguintes métodos:
- Selecione a imagem no cenário e clique na caixa de seleção Ativar ponto focal no painel Propriedades.
- Clique com o botão direito do mouse na imagem e selecione Definir ponto focal... no menu pop-up.
- Arraste o ponto focal para o local desejado.
- Por padrão, o ponto focal estará no centro da imagem.
- O controle de ponto focal aparece como um círculo branco para que você possa ver e clicar com facilidade. No entanto, o ponto focal real é indicado pela cruz no centro.
- Use as teclas de seta do teclado para mover o ponto focal um pixel de cada vez.
- Se você quiser redefinir o ponto focal para o centro, clique com o botão direito do mouse na imagem e selecione Redefinir no menu pop-up ou pressione Ctrl+R (Windows) ou ⌘+R (Mac).
- Acesse a guia Visualização para ver como o ponto focal afeta o corte da imagem em diferentes proporções.
- Clique em OK.
Se a origem da imagem for alterada, o Google Web Designer perguntará se você quer manter, editar ou descartar o ponto focal.
Editar um ponto focal
É possível alterar a posição de um ponto focal:
- Abra a caixa de diálogo Editar ponto focal da imagem usando um dos seguintes métodos:
- Clique com o botão direito do mouse na imagem e selecione Editar ponto focal... no menu pop-up.
- Selecione a imagem e clique no botão Definir a posição do ponto focal
ao lado da caixa de seleção Ativar ponto focal no painel "Propriedades".
- Arraste o ponto focal para o novo local.
- Clique em OK.
Alternar um ponto focal
É possível desativar um ponto focal para ver como a imagem será exibida usando as opções de alinhamento. Se você reativar o ponto focal, o Web Designer lembrará a posição definida anteriormente.
Use um dos seguintes métodos para alternar o ponto focal da imagem selecionada:
- Clique na caixa de seleção Ativar ponto focal no painel "Propriedades".
- Clique com o botão direito na imagem e selecione Ativar ponto focal ou Desativar ponto focal no menu pop-up.
Remover um ponto focal
- Clique na imagem com o botão direito do mouse.
- Selecione Remover ponto focal no menu pop-up.
Trocar uma imagem com um ponto focal
Ao usar a função Trocar imagem... ou alterar a origem de uma imagem com um ponto focal ativado, você pode decidir se quer manter, editar ou descartar o ponto focal na nova imagem.
Pontos focais e regras de mídia
Não é possível alterar a posição de um ponto focal usando regras de mídia. Se você quiser exibir imagens diferentes de acordo com o tamanho da janela de visualização, mas essas figuras não puderem usar o mesmo ponto focal, inclua-as no documento e use regras de mídia para definir a opacidade de cada uma delas como 0 para o tamanho da janela de visualização onde elas não devem ficar visíveis.
Pontos focais na Visualização de código
Na Visualização de código, as coordenadas do ponto focal são definidas no atributo focalpoint do elemento gwd-image. Exemplo:
<gwd-image class="gwd-image-1t0s" id="gwd-image_1" scaling="none" source="assets/moon_landscape.jpg" focalpoint="540 295"></gwd-image>