Image Uploading

Similar to adding Links, the first step to adding Images in the WYSIWYG is to place your cursor in the spot you wish for your future image to be set. Select the Image upload icon from the WYSIWYG tool bar to open the Image Properties window.

Screen_Shot_2013-07-31_at_5.26.26_PM.png

Linking to an Existing Image

If you're looking for an image that has already been uploaded to the web, grab it's URL and paste it in the URL field of the Image Info tab. After a valid image URL has been pasted into the URL field, you should see your image in the Preview box. If no image appears, check your URL again to make sure it's valid and pointing to an existing image. From here on, the settings apply to both uploading and existing images.

Screen_Shot_2013-07-31_at_5.28.58_PM.png

Uploading a New Image

If the image you are wanting on your page does not yet exist on the web, you most likely want to upload it from your computer. To upload a new image, select the Upload tab of the Image Properties window. Choose a file from your computer, and select "Send it to the Server" to upload your image.

Screen_Shot_2013-07-31_at_10.20.40_PM.png

Once uploaded, your image should appear in the Preview box. The Preview tries to give you some context as to how your image might look within some copy using placeholder Lorem Ipsum text. Use the settings on the left side of the window to manipulate your image until its format is to your liking.

Image Settings

First and foremost, don't forget Alternative Text! For both SEO and accessibility, you always want to include Alternative Text to describe the image. This helps search engines and the disabled understand what the image is referencing.

Notice that you may resize the image using the width and height parameters. The lock icon indicates the image will be constrained to the same ratio it was uploaded as. It's unlikely you'll ever want the aspect ratio unconstrained, but if for whatever reason you wish to warp the original dimensions of the image, unlock the constrain icon and you are free to set whatever width and height needed.

HSpace and VSpace stand for Horizontal and Vertical space, respectively, and apply padding to the left/right and top/bottom. Setting the Alignment will float your image either to the left or right within the copy. If you don't want the copy to wrap around the image, leave Alignment as "not set".

Screen_Shot_2013-07-31_at_5.33.19_PM.png

Link Your Image

Optionally, you can give your image a link to another page via the Link tab of the Image Properties window. This works just like the Link builder. Enter the URL of the page you want the image to link to, and set the Target. The default of "not set" will likely do in most scenarios.

Screen_Shot_2013-07-31_at_5.30.35_PM.png

Have more questions? Submit a request

0 Comments

Please sign in to leave a comment.