Knowledgebase
EZWeb Editor - How to Insert an Image
Posted by Ryan Ross on 03 May 2011 02:04 PM

EZWeb has always made things simple. From Inserting a Hyperlink to creating a Photo Album, EZWeb has made common web tasks simple and easy to do. Keeping with that tradition, has always been the ability to Insert your own Images into your pages and articles. If there are two things every EZWeb user should know, it's Inserting a Hyperlink, and Inserting an Image. We've already covered hyperlinks, so let's visit the images arena and take a look at the options and tools available in EZWeb.

Uploading an image - In order to use your own images in EZWeb, you'll first need to upload them to your Image/File Center. Please refer to this Tutorial on how to upload an image: Back to Basics: Hyperlinks and Images. Alternatively, you are welcome to use the Stock Images folder which is already available in your Image/File Center, and includes many free images for you to use.

Inserting an image via Content - The most versatile way to insert an image to a Page, Article, or Box is to use the Insert/Edit Image Wizard. This tool can be found in your editor tool bar. It is located in the top row with a yellow background and appears to have a mountain with a sun in it.

Insert/Edit Image:

  1. In the Content editor section, click your cursor where you would like the image to be placed, and click the Insert/Edit Image button. 
  2. The Image Properties prompt displays (see right). Now click the Browse Server button
  3. Your Image/File Center window opens. Click My Images (or Stock Images) and navigate to the image you would like to insert
  4. Click on the image you would like to insert. You return to the Image Properties prompt with the image you selected in the Preview section
  5. The Width and Height attributes are filled in automatically for you. Add Alternative Text, and define the Border, HSpace, VSpace, and Align attributes if applicable.
  6. Click OK.
  7. Success! The image is now in the Content section. Remember to Save your changes.

TIP: If you ever need to update or define any of the attributes mentioned on step 5, you can easily revisit the Image Properties for a given image by Right-Clicking on the image in the Content section, and selecting Image Properties.

Attributes Explained:

Alternative Text - Also known as "ALT" text, specifies the text to be substituted for the image if the image cannot be displayed for whatever reason. Some reasons include slow connection, an error in the src attribute, or if the user uses a screen reader. EZWeb does not require an ALT attribute, but it is highly recommend you add one.
Width & Height - These attributes define the dimensions you want the image to be displayed as. This is different from the actual dimensions of the image itself. Although, EZWeb defaults these values to their actual size. You can scale images larger or smaller depending on your needs just be updating these values. It's worth pointing out that updating these values does not physically update the image. By default the aspect ratio is locked so the width or height will automatically scale itself when you adjust the other value. If you need to scale in only one direction, you can click the padlock first and then scale the image accordingly.
Border - This attribute defines the width of the border around the image. The border attribute takes a positive integer and the Preview will update to show you what it will look like. You may consider defining the border as 0 (zero) to eliminate the border when you apply a hyperlink to an image. The image will still be clickable but it will not display the link colored border.
HSpace - This attribute specifies the white space on left and right side of an image. Values can be any positive integer. Typical values are 5 and 10.
VSpace - This attribute specifies the white space above and below an image. Values can be any positive integer. Typical values are 5 and 10.
Align - Specifies the alignment of an image according to surrounding elements. The most common values here are left or right. Text will wrap around the image if you use left or right alignment.

Inserting an image via Layout/Images - A simplified version of inserting an image can be accomplished using the Images section of a Page or Article in conjunction with the Layout section. For pages and articles, a layout can be defined to place a single image. Layouts for pages and articles are similar to the Align attribute above. Layouts include Left Picture, Right Picture, Center Picture, and No Picture.

Define a Layout of a Page or Article by clicking Layout. Select the desired option, and Save your changes. If you select a layout with an Image, select Images from the left hand menu. A preview of your page/article displays with the image you selected, or a purple box if you haven't already select an image. In either case, to change the image, simply click on the image or purple box. Just like the above instructions, navigate to the image you would like to use, and click on it. You are returned to the Preview section with your image included. Remember to Save your changes.

(495 vote(s))
This article was helpful
This article was not helpful

Comments (0)
Post a new comment 
 
Full Name:
Email:
Comments:
Copyright © 1999 - 2013 CatholicWeb.com
CatholicWeb.com