Do not follow the "Goto" link to any realm. It will bring up the page not found error. Use the "Edit" link.
This user had a specialized request for information regarding how to insert an image into a site banner or footer. For most of us, what we want is the answer to the question Ripper started (Thank you Ripper!) to answer. Namely, that question is:
How do I place an image inside a post?
An answer is, it's a little bit complicated, but not nearly as difficult as it might seem. What is going to be difficult here is to present to you the HTML text that is required without causing that material in this post to be read as the commands to do the conversion actions.
Here is a typical example of a post that contains an image that is not in Photobucket. For simplicity, I have used Ripper's somewhat odd clown image (Sorry, Ripper!), which is stored in a special folder at Network54 (and for which I thank Ripper for not "ripping me a new one"). What follows is a description based on using the most recent version of Firefox, so you may have to adjust your own efforts according to the abilities (or limitations) of your own Web browser.
~ ~ ~ ~ ~ ~ ~ ~ 8 ~ ~ ~ ~ ~ ~ ~ ~
This is just some text to simulate what you might be typing for a typical post into your Network54 Web site. You would, of course, be using whatever material you desired instead. Then you want to put in an image to illustrate some point you are making. To do so, use the HTML "img" command, preceded by its appropriate 'less than" symbol and followed by its appropriate 'greater than' symbol. The result is as shown.
Then you can pick up the verbiage of your post as you usually would type the text, and your image will be presented where you wanted it when you click on the 'Respond!' link. Now there is more to it than just that. For those who are intimate with HTML commands and how to use them, go and do with my blessings. For those like me who are less familiar with HTML and need some prompting, in the next few paragraphs I will give you some more detailed instructions.
~ ~ ~ ~ ~ ~ ~ ~ 8 ~ ~ ~ ~ ~ ~ ~ ~
Caveat: These instructions are based upon doing the work using the latest version of the Firefox browser, so you may have to modify them a bit if you use a browser that has different capabilities (or limitations). Please forgive that I am a somewhat detail-minded person (which is how I became a senior tech writer) and that therefore these descriptions will be fairly detailed.
As you notice above, the image I selected for this demonstration is not one that belongs to me, nor is it in any repository I control. This in itself brings up an important point. For any image you post, if you want it to be permanently available it
must reside in a place on the Web that
you control. Personally, I do not consider Photobucket (or any other cloud-based repository) to qualify for that distinction. Companies come and go, site admins sometimes (deliberately or inadvertently) purge files, and there always is the rather awful prospect of some twerp breaking into a public site and wreaking havok upon any files (s)he can access. I prefer to have my stuff stored where I always can access it, even off line, and wheree I control both the access to the content and the backup of that content. I'm lucky that way, since I have my own business, and it has a Web node server that allows me to save whatever I want on my own server where I can access it even of the Web is down. You have to decide what you consider to be adequate security for the images you use, and put your images in that place.
Those images that you find already posted somewhere on the Web can be linked from their original places, but they are ephemeral in the sense that they may disappear if the original poster decides to make them disappear. This results in a 'broken link', and it can be very distressing and frustrating if you want to have a post up for a long time.
Let us assume you have an image you want to include in a post, and have answered the above issues to your satisfaction. In the case of Ripper's clown, I put my cursor on the image and right-clicked on it. From the drop-down dialog, I selected the 'Copy Image Location' task, which put a copy of the full URL for that image into the browser clipboard.
Then I put the cursor in the posting window and pasted that URL from the clipboard. Around that, I built the HTML commands I needed to get the resulting image, placed and sized as I wanted it. In the explanation that follows, I will use the brackets ( [] ) to substitute for the less-than and greater-than carats so you can see how I built the entire command. To use this, you
could copy my material and then change the brackets to the appropriate carets.
- First, I wanted the image centered. For that I used the HTML
command.
- I followed that with the HTML 'img' command opener ( [img ) and a space.
- Now I put the image sourcing parameter src="the URL copied from Ripper's clown", which is http ://
www.network54.com/PersonalPhotos/1373738114.JPG , and then added a space after the closing quote.
Here I must digress for a bit. If you just copy the URL for Ripper's clown and paste that into the command, you will see a very large image. This is because that URL is the one for the base image, not the thumbnail-sized one you see in Ripper's posts. I wanted to have the image appear in my example post about twice the size in both directions as he uses for his thumbnails. Therefore, I used the img 'width' and 'height' parameters to specify the size I wanted for it in my post.
- To specify the size of the image, I used width=200 height=200 , followed by a space.
- I closed the HTML img command with the command parameter alt="[linked image]"> .
NOTE: The brackets in this part of the command are correct and should not be changed to the less/greater-than carats.
- Finally, I also closed the centering command with its appropriate closure, .
The assembled command set then looks like this:
,
Again, note that the [] brackets around the term '[linked image]" are correct and should remain as such in the finished command.
Pretty much, that should do it, people. This allows a person to use any image, located anywhere, and pull it into a post.
One small additional note, though:
When using the centering command for text, like I did for the breaker line of tildes (~) and the numeral (8), for some reason the interpreter in Network54's site wants to insert a blank line under the material. Thus, if you do not want a double blank line, you have to put the succeeding material directly under the text. This also is true for images. If you want to have the image spaced only slightly away from the text before and after the image, you must enter an extra return above, and not enter one below.
Have fun with images!
Techwriter John
