Diseña y publica tus sitios rápidamente

Cómo ser consistente con el tamaño de tus imágenes

Acerca de la opción de “Geometry Propagation”

Explicaremós cómo puedes hacer que tus imágenes tengan el mismo tamaño dentro de tu diseño web (y que estén cortadas igual) en todas tus páginas de tu sitio usando nuestro creador de sitios web.

Con esto nos referimos a versiones de las apps que contengan imágenes y que estén instaladas en más de una página. Por ejemplo, observa la siguiente imagen. La misma app de imagen está instalada en varias páginas (cada una de los cuadros grandes representa una página).

Ejemplo de la propagación geométrica

La misma versión de la app de imagen en diferentes páginas

Al cambiar el tamaño de una imagen en una página (cuando tengas la opción de propagación de imagen habilitada), ese cambio se verá reflejado en las imágenes de las demás páginas de tu sitio web.

Ejemplo de la propagación geométrica

Si cambias el tamaño de una imagen, también cambiará el tamaño de las otras imágenes en las otras páginas donde tengas instalada dicha app

 

 

 

Notas

  • La opción de “Geometry Propagation” (propagación de imagen) afecta a todas las imágenes en las apps a excepción de aquellas que tengan imagen como su contenido secundario (como la app de Text o de Banner).
  • Esta funcionalidad es reciente, lo que quiere decir que las nuevas apps de imágenes que instales tendrán esta opción habilitada de forma predeterminada. Sin embargo, esta función no se aplicará a tus sitios existentes. Si quieres activar dicha opción, tendrás que hacerlo manualmente.

Cómo habilitar la opción de “Image Propagation”

Para habilitar esta función, dirígete a la app que contenga la imagen que quieres modificar para que quede igual en todas tus páginas. Haz clic en el ícono de la herramienta para entrar a la configuración de dicha app.

"Edit Settings" en la barra de herramientas de la app

Esto abrirá un recuadro con varias opciones. Ahí tendrás que marcar la casilla de “Propagate Geometry To All Pages”. Al hacerlo, te aparecerá el siguiente mensaje: “By propagating image sizes, all the images in other pages will be resized to the size of the images in this page. Are you sure you want to do this?”. Esta es una ventana de confirmación que te hace saber que al elegir esta opción, todos los tamaños de las imágenes de todas tus páginas cambiarán para ser iguales que el tamaño de la imagen en la que estás. Si estás seguro de que quieres llevar a cabo esta modificación, haz clic en “Yes”.

La opción de "Propagate Geometry to All Pages"

Esta será la imagen “base”. En este momento, tus otras imágenes adquirirán la geometría de esta. Después de esto, cada vez que modifiques el tamaño de esta o de cualquier otra imagen (ya sea su tamaño o al recortarla), las demás también se modificarán.

Cómo usar la opción de “Geometry Propagation”

Por ejemplo, puedes tener una imagen en tu página “A” como tu imagen base en la que activaste la opción de propagación.

Estado inicial para el ejemplo en la página A

Y tienes la misma versión de la app de imagen en la página “B”.

Estado inicial para el ejemplo en la página B

Si reduces el tamaño de la imagen en la página A (la base),

Cambia el tamaño de la imagen "A"

la imagen en la página B también se reducirá.

Una versión más pequeña de la imagen B

Esto también sucede al cortar la imagen.

El editor de imágenes al recortar una imagen

Sobre el cambio de tamaños

Cuando hagas más grande el tamaño de la imagen, la imagen “dependiente” no podrá crecer más que la columna en la que esté posicionada. Por ejemplo, al incrementar el tamaño de la imagen en la página A, la imagen en la página B será tan grande como su contenedor se lo permita.

Imagen en una columna estrecha

Cambios en el layout

Esto puede ser un poco complicado en cuanto a cambios en el layout. Por ejemplo, al mover la imagen de una columna a otra, al cambiar el layout predefinido, al fusionar o dividir columnas o al cambiar el tamaño de las columnas. Solamente puede haber dos casos con los cambios en el layout: que la imagen contenida se vuelva más grande (al hacer la columna más ancha) o más pequeña.

Una columna a la que le cambian el tamaño

Si el cambio del layout provoca que la imagen se haga más pequeña, el resto de las imágenes permanecerán del mismo tamaño (es decir, no se harán más pequeñas). Así que, si decides dividir las columnas en la página A, lo cual hará que la imagen sea más pequeña, las imágenes “vinculadas” no cambiarán de tamaño. Esto también aplica a cualquier otro cambio en el layout que ocasione la reducción de la imagen.

Por otro lado, si el cambio del layout ocasiona que la imagen incremente su tamaño, el tamaño de las demás imágenes incrementará también (hasta donde su columna se los permita). Las columnas no se acomodarán a su nuevo tamaño. Esto quiere decir que el tamaño máximo de cada imagen será dictado por la columna en la que esté (aunque la imagen “base” sea más grande).

Un diagrama que ilustra imágenes en diferentes columnas

La imagen crecerá hasta el tamaño que su columna se lo permita.

¡Y eso es todo! Tienes esta opción para ayudar a que tu diseño sea consistente.

¿Dudas? ¡Compártelas en la sección de comentarios!