Dealing with Images in the Content Builder

 

Images have some unique properties in the Content Builder. Some snippets include CSS animations on images. Some snippets contain several images, or a single image nested within text. No matter the case, image editing principles will apply.

Basic Image Properties

With any snippet that contains an image, you'll be presented with some extra options related to the image itself.

  • You can add or edit a link from an image to a webpage (either within your domain or outside it) or to a file hosted in your WebAlliance File Manager. Click the orange "link" button. See below for details.
  • You can upload an image directly from your computer to your new content page. Click the blue "camera" button and select your file. After selecting the image, you can zoom in or out and crop the image before displaying it on the page.

This button allows you to, among other things, replace the current image with an image file hosted in your File Manager. To make images available in this context, place them inside the "Images" folder available in the File Manager.

This button also allows you to set an image as a clickable link. For detailed information about adding links to your images, see our article "Dealing with Links in the Content Builder".

This "Link" button is also the path to include GIF files in your Content Builder properties. Check out our "Using GIF Files" article for step-by-step instructions.

The Blue "Camera" Button

Click the blue "camera" button to  select the image that you'd like to display. By default, new snippets will have stock photos included, and replacing them with your own images is easy.

When you've clicked the blue button, you'll be able to select an image from your local computer's hard drive.

After you've selected the image, you can choose to either "Resize to Fit" (to display the image in the size of the frame) or "Keep Dimensions" (to import the image as-is).

When the image is in place, use the Content Builder to reset to the previous image, zoom out, zoom in, and accept your changes. You can also drag the image to resize it. After you click OK, the image will be applied to the page. It will be saved to your WebAlliance hosting folder after you click "Save".

TIP: When applying images to a Content Page or Blog Post, "Save and Publish" frequently. Each time you "Save and Publish", any recently applied images are saved to the file system. If you try to apply several large images at once, you run the risk of a browser time-out, which would result in loss of recent changes and image uploads. Frequent Save and Publish clicks will apply images more frequently, and the browser will allow plenty of time to apply each one.

Resizing the Image

Once you have applied the image to the page, you can use a variety of image resizing tools.  Click the image to get started.

  1. You can drag the image resizing handles in the corner of the image to adjust its size.  It will adjust the width and height of the image proportionally so it doesn't look distorted.
  2. You can undo any changes you make to the size of the image by clicking "Undo Resize".
  3. Clicking the Settings button on the image will give you some additional tools to adjust the image size (see below).
  1. You can set the image size to Small, Medium and Large. These quick-adjust presets will maintain the proportions of the image to keep it looking great on the page.
  2. You can also set a specific width and height for the image.  You can set these values to any size, even allowing you to distort the image if you want.
  3. Click "Apply" to save your image size adjustments to the page.