Image
The Image Structure allows users to upload images in virtually any image format. Vae will automatically crop and resize images to the exact specifications that you need.
| Common Use Examples: |
Photos, Backgrounds |
| Supported Validations: | None. |
| Related VaeML Tags: | The <v:img> tag is used to render an image stored in an Image structure. |
Backstage Look and Feel
The Image structure shows a file upload widget in the backstage:
Once an image has been uploaded, the widget expands to show a thumbnail of the image and provide options to delete, adjust quality, crop (if the image has sizes defined) and replace:
Sizing / Encoding
Vae can resize uploaded images in two different ways: on demand, or on upload. To resize images on demand, simply use the proper size attributes in your VaeML tags. However, you might want to have images resized on upload if you need them in an exact size. Vae will prompt your user to crop the image so that it can be cleanly resized to the exact pixel size that you need. You can also have Vae prompt the user to crop an uploaded image, even if you don't want to fix a specific size.
In the Edit view for the Image structure, click on the link under the section to add a new custom size.

This will bring up an box with the following fields:
-
- Name you give to the size. You will use this name to reference this size in your VaeML/integration code.
-
- Select Fixed Ratio Crop to specify an exact pixel size and have Vae prompt the user to crop the image to that exact ratio. Select Fluid Crop to allow any size but still prompt the user to crop the image.
-
- Image width in pixels.
-
- Image height in pixels.
Click the button to complete the addition of the size.
Defining an image size is only necessary if you wish to have images cropped in the backstage. Otherwise, resizing can be done through VaeML or the PHP interface.
To delete an image size, simply click the red button next to the image size in the list. The image size will be immediately removed from your account.