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

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.

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.

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”.

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.

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

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

The image on page B will also decrease.

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

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.

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.

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.

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