Adding Images to Articles
- Details
- Category: Kyle's Articles
- Published on Wednesday, 25 May 2011 16:01
- Written by Kyle Wilson
- Hits: 68
Adding images to articles is a two step process. You first need to upload the image to the site so that it can be tagged in the article and then add the image tag to the appropriate spot in the article to make the image appear where you want it.
Using the Image button you will see a window pop-up on the screen showing folders and image files stored on the site.
At the bottom of this window is the upload button. Before pressing this button you should use the main panel of the window to navigate to the folder where you want the image to reside on the site. Keep in mind that the name that the image has on your local computer will be the same as the name it has on the site, so you may want to rename it before starting the upload. I don't believe that the front-end tools allow you to change the name of the file once it is stored on the site.
If you press this button you will be able to browse to the image on you local computer that you want to upload, select it and transfer it to the site.
press 'start upload' to transfer the image from your computer to the selected location on the site.
Once the image has been uploaded you need to select it in the main window you should see the 'Image URL' box updated with the site path to that image. Enter any text you like for the Image Description and Image Title and if you want the title to show up in the document as a caption for the image set the Caption drop list to Yes.
At this point you should be able to click the Insert button in the upper right corner of the window and an image tag will be added to your article at the point the cursor had been sitting when you started this process. The image will be sized 1 to 1 by default.
and you'll be back to your page edit screen with the image visible where you added it
You can change other aspects of how the image is displayed (or even add more images by hand) by pressing the 'Toggle editor' button and directly editing the HTML code for the article. This isn't really as scary as it might at first seem. The image is placed into the article by an 'img' tag that looks like this <img src="/images/img 0449.jpg" border="0"/> The stuff after the src= is the site path to the image and the border setting controls whether there is a border around the picture. You can control the width of the image in the final page by adding width="300" after the img. This will set the width to 300 pixels on the screen (and for most images likely make things more readable since modern cameras turn out very large and detailed pics).
