Why is my selected image not appearing correctly?

Some templates include a feature whereby a particular area will resize any image you select to a specified dimension.

You will need to note the message that appears when you hover over the image or that appears at the top of the Content Library (e.g. "The image will be resized to 100 pixels wide by 50 pixels high").

That means in order for an image to appear correctly and not stretch, the image you select for the area must be proportional to those dimensions that are listed before it is selected for the area. To continue the example from above, an image that is 200 pixels wide by 100 pixels high could work, as the dimensions have been doubled on each side.

To ensure your image does not stretch when it is placed in an image area, follow these steps:
  1. Click on the image area, and take note the dimensions it will use for resizing.
  2. When the Content Library window opens, locate the image you wish to insert in the area.
  3. Click the drop down arrow icon next to the image, and select Edit.
  4. By default, the "Resize" tool will be highlighted. Click the Enter Size text link.
  5. Determine if the width or height represents the longer dimension. Click into the input field for the longer dimension, and type a value that is directly proportional to the dimensions of the width or height of the image area (e.g. for our example, you would type 200 into the width field).
  6. Keep the "Constrain Proportions" box checked, and click the Resize button.
  7. Click the "Crop" text link to select the cropping tool.
  8. Click on the highlighted window to select it. Drag a corner to resize the highlighted window, and/or click on the highlighted window to move it. Adjust the highlighted area as needed until it reflects the correct width (200 pixels for our example) and height (100 pixels for our example).
  9. Click the Save or Save Copy button.
  10. Click the Go To Browse button.
  11. Click Use on the resized and cropped image to insert it into the area.