Inserting Media

Using pictures or graphics on your website is almost a "must" to keep the visitors' interest and essential for having an attractive site.  Inserting pictures is a fairly easy task, but can cause problems to the speed of your website if done wrong.  Here are some tips to follow when putting pictures on your website. 

STEP 1: Making the pictures "Web Friendly"

First of all, the picture should be located on your hard drive.  Before ever uploading a picture into WebMedley, you should make the picture as "web friendly" as possible. 

3 main points to a "Web friendly" picture:

• The format of the picture must be JPG or GIF.  This means the filename for the picture must end in ".jpg" or ".gif". 

• The size of the picture (which is measured in pixels) should be no larger than 250x250.  This is just a general rule to follow, of course there are cases where you would want a picture bigger or smaller, but this is a good default size to stick to when you are not sure.

• The resolution (measured in DPI, or "dots per inch") should always be set to 72.  This is the most important attribute of the pictures, since this determines the file size of the pictures, which ultimately determines how long it will take for that picture to load up on your page. 

If you are familiar with any of the "garden variety" photo editors out there, then you can easily alter your pictures to these specifications using that software.  However, if you would like a small photo-editing program which will easily and quickly allow you to make your pictures "web friendly", download irfanview photo software.

STEP 2: "Uploading into a Media Library"

Now its time to upload the picture into a media library.  First of all click on the folder that says "Media Libraries" on the left side of the WebMedley management console.  If this picture is going to go into an existing media library click on the name of that library, if it will go into a new library, click on "create library". 

To insert the picture into the library, click on "create new media".  The next screen is where you will upload the picture and give it a media name.  Click on the "browse" button on the right side of the screen.  This will open a "choose file" window, from this window choose the file on your hard drive and click "open".  After clicking "open", you should see the path name for your picture (usually something like "c:\my documents\picture.jpg).  After browsing for the file, give it a name in the "media name" field (this name is just a way to recognize the picture later).  Once the picture has been chosen and given a media name, click on the "save" button.  You should now see an actual size preview of the picture below the "save" and "delete" buttons. 

STEP 3: "Inserting the picture onto a page"

Now that the picture is uploaded, it's time to insert it onto the appropriate page.  Choose the page you want to insert the picture on and click on "edit this page".  In the edit screen, place your cursor at a point in the content area where you would like to insert the picture.  Click on the "insert media" button on your toolbar.  From the "Media Manager" window that appears, choose the library containing your picture in the "library selection" pull down box.  Next, click the appropriate picture and click "insert".  Your picture should appear at the insertion point where your cursor was. 

STEP 4: Image Properties

Click on the picture you inserted and click on the "properties" button on your WebMedley toolbar. The various properties of the picture can be changed in the "image properties" pop up box. These properties include: setting the alternate text of the image.  Alternate text is a small message that will appear when you "hover" the mouse over the image.  This feature is commonly used along with a hyperlink (for example, an image with a link to the "directions" would have alternate text reading "click here to get directions").  The alignment field will give the image a "word wrap" effect.   Word wrap enables the surrounding text the start at the top of the picture, and continue to "wrap around" the picture as it goes down the page.  All the pictures on the page currently have the word wrap effect enabled right now.  The next field is "border".  This feature allows you to place a border around the image (1 being the smallest border, 2 being larger, etc.). 

Finally, there is the dimensions area of the image properties window.  This allows you to resize the image to a specified pixel size (keep in mind that this will only change the way the picture looks, not the actual file size of the image.  So, a 900x800 picture sized to 200x200 will load up just as slow).  Putting a check mark in "keep aspect ratio" will ensure you do not distort the picture when the size is changed.