Image Sizing

Image Sizing

To add an image, all you need to do is add the placeholder for the image field. However, the system will size the image automatically and usually this is not what you desire. To get the best image output and fit for your template, we suggest you try the following approaches:

1. Use a Table to Size Images (Word only)
A recommended option to control the size of your images is to wrap your image placeholder in a Word table cell that has fixed width defined on its column. To define a fixed width on a table column in Word:

  1. Go to Table | Table Properties, Table tab, and click the Options button.
  2. Clear the "Automatically resize to fit contents" check box and click OK. 
  3. Specify the desired column widths on the Column tab (of the Table Properties dialog box).

You can nest tables inside each other, so wrapping your image placeholder should be easy to do no matter where it is placed. When the output is rendered, if the immediately-surrounding table is of fixed width then it will be used as the bounding area for the image and your image will be resized to fit within the fixed width space.

Note that the relative proportions of the image will be preserved, so you may have an image that is still fairly tall if the image was shot in portrait aspect. To counter this, reduce your bounding table column width as required.

2. Using Columns to Size Images (Excel only)

In Excel, the column that contains your image placeholder will be used as the bounding width for the image.

This means you can easily control the size of your images by either:

  • Setting an explicit width on the column that holds the {{ }} placeholder,
    OR
  • By merging the placeholder's cell with other cells to form a larger width. This is useful when other parts of your template share the same column.

We recommend the second approach - i.e., merging cells to gain the desired width - since it means fewer issues if you want to change the layout of other items above or below the image.

3. Specify Image Dimensions

You can specify the exact height and width in pixels for image answers that will be inserted into your template. You do so by adding “|WIDTHxHEIGHT” to the end of your placeholder. For example:

{{person_photo|400x100}}

When the system sees this additional formatting information, it automatically resizes the image answer to the specified dimensions. Note that pixels are converted to Word point sizes, so you will need to try a few settings to get the desired output.


    • Related Articles

    • Sizing images to fit a device screen dimension

      If you can precisely measure the width of your screen or know the screen's exact dimension in pixels, you can calculate the pixels needed to mirror the physical size of the screen on a printed-out copy of the image. Here's how: Determine the width or ...
    • Using Image Columns

      Data Sources allow you to specify columns as containing a specific type of data, and Image is one of these types. This enables you to display images on the app in situations where rows of your Data Source are in use. Examples would include a ...
    • Dynamically Displaying Images from Data Source, Web or Map sources

      TABLE OF CONTENTS Data Source-hosted Images Displaying an Image in a Media Field via a Choices Field Displaying an Image within a Section Field Web-hosted Images Location-based images The "Dynamic Image" property allows you to load images dynamically ...
    • Using Images in your Apps

      Our platform has a number of different ways that you can include images in screens to improve display and usability. Images in Data Sources On the data source side, you can add columns to your data source that have a type of "Image"; this then allows ...
    • Capture Google Maps Images in eForms Mobile

      Using Google’s Open API, forms designed in eForms Mobile can easily display map images from Google Maps right on the screen for users to reference and annotate! In short, the eForms Mobile Media field allows any image to be captured from a URL. The ...