Puede definir un foco para que no se recorte una parte importante de la imagen. Los focos son especialmente útiles en diseños adaptables, en los que una misma imagen puede mostrarse en tamaños distintos.
Focos en imágenes de fondo
Limitaciones de la disponibilidad del foco:
- Redimensionado de la imagen: debe elegir Recortar imagen para rellenar o Ninguna en la propiedad Escala.
- Tipo de ruta de la imagen: la ruta debe ser local, no puede ser una URL externa.
- Anuncios dinámicos: no pueden utilizarse focos en los anuncios dinámicos.
- Animación: los focos no se pueden animar. Si anima las dimensiones de la imagen, el foco que asigne a esa imagen se aplicará al tamaño de imagen inicial.
Si habilita un foco, se anularán las opciones de alineación.
Definir un foco
- Abra el cuadro de diálogo Editar foco de imagen de una de estas formas:
- Seleccione la imagen en la escena y, a continuación, haga clic en la casilla Habilitar foco, situada en el panel Propiedades.
- Haga clic con el botón derecho en la imagen y seleccione Definir foco en el menú emergente.
- Arrastre el foco hasta donde quiera.
- De forma predeterminada, el foco se encuentra en el centro de la imagen.
- El control del foco se muestra como un círculo blanco para que sea fácil verlo y hacer clic en él, pero el foco real está representado por la cruz central.
- Pulse las teclas de flecha para mover el foco en intervalos de un píxel.
- Para volver a colocar el foco en el centro, haga clic con el botón derecho en la imagen y seleccione Devolver a la posición inicial en el menú emergente, o pulse Ctrl + R (en Windows) o ⌘ + R (en Mac).
- Cambie a la pestaña Vista previa para ver cómo afecta el foco al recorte de la imagen en distintas relaciones de aspecto.
- Haga clic en Aceptar.
Si cambia el origen de la imagen, Google Web Designer le preguntará si desea conservar el mismo foco, o bien editarlo o descartarlo.
Editar un foco
Puede cambiar la posición de un foco:
- Abra el cuadro de diálogo Editar foco de imagen mediante uno de los siguientes métodos:
- Haga clic con el botón derecho en la imagen y seleccione Editar foco en el menú emergente.
- Seleccione la imagen y haga clic en el botón Elegir la posición del foco
, situado junto a la casilla Habilitar foco del panel Propiedades.
- Arrastre el foco hasta su nueva posición.
- Haga clic en Aceptar.
Habilitar e inhabilitar un foco
Puede inhabilitar un foco para ver cómo se mostraría la imagen si aplicara opciones de alineación en su lugar. Si vuelve a habilitar el foco, Web Designer recordará la posición que tenía antes de inhabilitarlo.
Utilice uno de los siguientes métodos para habilitar e inhabilitar el foco de la imagen seleccionada:
- Haga clic en la casilla Habilitar foco del panel Propiedades.
- Haga clic con el botón derecho en la imagen y seleccione Habilitar foco o Inhabilitar foco en el menú emergente.
Quitar un foco
- Haga clic con el botón derecho en la imagen.
- Seleccione Quitar foco en el menú emergente.
Cambiar una imagen en la que se ha especificado un foco
Cuando usa la función Cambiar imagen o modifica el origen de una imagen en la que se ha definido un foco, puede decidir si quiere editar el foco de la nueva imagen, descartarlo o mantener el mismo.
Focos y reglas de medios
No se puede cambiar la posición de un foco utilizando reglas de medios. Si quiere mostrar imágenes diferentes en función del tamaño del viewport, pero esas imágenes no pueden usar el mismo foco, puede incluirlas en el documento y utilizar reglas de medios para cambiar la opacidad de cada una a 0 en los viewports en los que no deban verse.
Focos en la vista de código
En la vista de código, las coordenadas de los focos se especifican en el atributo focalpoint del elemento gwd-image. Por ejemplo:
<gwd-image class="gwd-image-1t0s" id="gwd-image_1" scaling="none" source="assets/moon_landscape.jpg" focalpoint="540 295"></gwd-image>