Ask a Question ?
Design & Publish Websites Faster

How to Keep Image Sizes the Same Across Your Pages

About the Image Propagation Feature

In this post, I’ll explain how to keep your images the same size (and cropped area) across all of your pages with our drag and drop website builder.

I’m referring specifically to app versions that contain images, that are installed on more than one page. For example, take a look at the following image. The same Image app version is installed on several pages (each of the larger boxes represents a page).

Image propagation sample before resize

The same image app version installed on several pages

So if you resize an image in one page (assuming geometry propagation is turned on), that change will affect the image in the rest of your pages.

Image propagation sample diagram

If you change the size of an image, it will resize on the rest of pages where that image is

Notes

  • Geometry (image) propagation affects all images in apps, with the exception of inline images (like in the Text app or the Banner app).
  • This is a feature that has just been released, and new image-related apps will have this option enabled by default. But it won’t affect current sites, so if you want to activate it, you must manually do so.

How to Enable the Image Propagation Feature

To enable the image propagation feature, go to an app that contains an image you want to keep the same in all your pages. Click the wrench icon to access the settings of that app.

Red arrow pointing to the "Edit Settings" button in the app's description

This will bring up the options. There, the only thing you have to do is click on the checkbox labeled “Propagate Geometry To All Pages”. A disclaimer will prompt “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?”. Click “Yes”.

Red arrow pointing to the "Propagate Geometry to All Pages" option

This image will be taken as the “base” image. In this moment, the rest of the images will gain the geometry of this one. But after, whenever you modify this or any of the others (size or crop/focus area), the rest of them will reflect these changes too.

How to Use the Image Propagation Feature

So let’s say that you have an image on page A. This will be the base image, the one where we activated the propagation.

Red square surrounding the image in sample page A

And you have that same version of the Image app on page B.

Red square surrounding the image in sample page B

If you decrease the size of the image on page A (base),

The resizing tool over Image "A"

The image on page B will also decrease.

A smaller version of Image "B"

This is also true for changes in cropping or focus area.

Image editor: cropping and changing focus

About Resizing

When increasing sizes, a “dependent” image will not grow larger than its current column. For example, increasing the image on page A, will cause the image on page B to resize as large as the column where it’s contained allows.

Image shown in a narrow column

Layout Changes

This can get a little bit tricky in some cases of layout changes. For example: moving the image from one column to another one, changing a predefined layout, merging or splitting columns, or column resizing. There can basically be two cases with layout updates; they will either cause a contained image to be larger (if the column ends up wider), or smaller.

The image shown while the column is being resized

If the layout change produces a smaller image, images on the rest of the site will remain without change (size will not decrease). So if columns are split on site A, causing the image to be tinier, the “linked” images in other pages will not be resized. This is also true for any other layout update that results in an image size reduction.

But if the layout-change causes the base image to be larger, the rest of the images will also increase. But the increment will be only as each of the images’ columns permit. The column will not grow to accommodate a larger image. This means that the maximum size of the image will be determined by the column, even if the base/changed image is larger.

Diagram illustrating a resize of image inside columns

An image will only grow as much as its column allows it

So that’s it! Use this feature to aid you to keep your design consistent. Questions? Please share on the comments!

Menu