How to: Imbedding Images Inline with Text

No replies
vmorris
vmorris's picture
User offline. Last seen 5 years 42 weeks ago. Offline
Joined: 06/08/2010

At the tutorial session the other night, there was much interest in being able to display an image within content.

This forum topic is intended to show the process of uploading an image to the site and then creating some new content with said image embedded within it.
Something like....... this:

First: Upload the image

The first thing you need to do is upload the image that you want to use.
Since the galleries are still in 'beta', you will be using these forums to store images. Keep in mind that at some point in the near future, image uploading can be done via the gallery instead of the forums.

In the create new forum topic dialog there are some options located below the large Body input box. Click on the File attachments option and then click on the Browse button. You will have to browse through your local hard drive until you find the image file you wish to upload. Select it and click "Open" or "Okay". Once the file is listed, you MUST click the "Attach" button. Once this is complete, click the "Save" button at the bottom of the form and your file will now be uploaded and viewable from the forum.

You can view the post I created to upload the V-22 image you see above over in The Soap Box forum. Just follow this link to view it now.

Second: Get the URL address of the image file itself

After creating the forum thread with the attached file, you need to click the attachment. This will bring up the image file in it's own window. At the top of your browser, you will find the URL. It will look similar to
http://www.blueskyairfield.com/sites/default/files/picture.jpg
where picture.jpg is the name of the file you attached.

Highlight this whole line of text and copy it. You can right-click and select "Copy" or find it under the Edit tab at the top of your browser.

This line of text is called a URL or Uniform Resource Locator. Simply stated, this is the world wide web's way of identifying exactly where your picture is stored.

Third: Insert the URL into the body of the content you are creating

The HTML code that you must type in to display an image looks like this:

where picture.jpg is the name of the file you attached. Since you copied the URL in the second step above, all you should have to do is type the portions surrounding the URL and paste it inside the quotation marks.

Last Step: Change the Input format to Full HTML

This is perhaps the most important step to complete the whole process. Under the Body input box, click on the Input format option and change it to Full HTML.

After saving your content and upon viewing it, the image should show up exactly where you inserted the img src HTML tag.

Hope this helps to clarify some of the confusion on how this technique is done. Try it yourself and see if you can make it work!