Adding Images to Posts, Blog Entries, Articles, etc.

This article has been updated as of January 10, 2008 with information regarding image sizes. See below.

Introductory note: Some of what follows is based on experimentation. If anyone finds issues please advise me so the content can be updated as quickly as possible. Thank you!

On the old site I had written an article describing the process to be used when adding images. While some of the basic ideas about the images still apply with the new site, a lot of the information is now out of date. Unfortunately, the article in question is no longer available. It is there but got chopped off after the first few paragraphs in the migration to the new site.

As with the previous article, this is written with Windows in mind. I am sure things will be similar with other systems but I can't say for sure.

When you want to add an image to any content you are creating you basically have three options: Insert the image from your album in the gallery, insert the image using any web site URL (of the image itself) using one of two methods or, you can also insert an image directly from your own personal hard drive! There are a couple of options for this last possibility. One is pretty straight forward but does not appear to provide much flexibility while the second option requires additional software and involves a number of additional steps, especially if the content is NOT a blog entry!

We’ll start with the gallery but before you can add pictures from your gallery album you must have one that contains images!

Adding Images to your Gallery Album

Start by clicking the Gallery link at the top of the page. It is located between the Blogs and Links links. Once there you will see all the current albums listing in alphabetical order with eight albums per page.

At the bottom left will be link named Your Album. Click this to go your own album.

Once there you will see all the images currently in your album (again eight per page) and to the right of the page are a number of options for your album. The Add Album link allows you to create multiple albums while the Add Items link allows you to add images (and other items) to the current album.

When you click the Add Items links you will be taken to a page with two rows of tabs across the top. The first tab, (from Web Browser), is already selected and this is the tab you’ll be using to add images to your album. (The remaining tabs will not be discussed here).

Below the tabs is some explanatory test followed by spaces for the path to the desired image and a caption you wish to be used with this image. If you don’t want to type the entire path, or cannot remember it, use the Browse button to insert the path automatically.

By default two input areas are provided, if you need more click the More Upload Boxes… link for addition input areas. The process of adding an image to your album can also create a thumbnail for you. While this is optional it is recommended so ensure that option is checked!

Now click the Add Items button (at the bottom) to add the chosen images to your gallery!

Inserting an Album Image into Content

There are many places you wish to insert an image. You may be creating a new thread or blog entry; you may be replying to a post that that has already been made or you maybe writing an article. If the image you wish to insert is in your Gallery Album then the method is the same regardless!

At the bottom of the page is the input area for you to create the content and immediately above are three rows of icons (more or less depending on your screen resolution). The icon you are interested in is the small tree with G2 above it.

However, before clicking it be sure to position the cursor exactly where you want the image to appear. Now click the G2 icon!

A dialog will open which will look very similar to that shown here. (Ignore the Assignment Class frame for the purposes of this write up). Go to the Subalbums drop down list and select the album you wish to insert an image from. Most likely it will be yours! It is a long list but it does appear to be sequenced alphabetically! Once selected click Go.

The dialog will change to offer some more options and to display the images in the album. It will appear as shown here. Since we are primarily concerned with adding an image to our content we will not delve into the various available options here. Just accept the defaults for now. Once you have this down pat you can go back and play with the different options to see what they accomplish.

Choose the image you want to insert and click it! That's all there is to it! The Gallery image identifier will appear in the text box looking something similar to this. The image will actually be seen when you Preview or Submit the content. Note: The thumbnails that are automatically created for you are square, cropping image as necessary to create the thumbnail. When a reader clicks the thumbnail it will be displayed correctly!

Note: If you wish to change albums, just click on the Gallery link at the top in the Current Gallery frame and then select the new album.

And that is really all there is to adding an image from an album to content you are creating or editing!

Inserting an Image from the Internet (via its URL) into Content

It is equally easy to add an image from anywhere on the Internet simply by specifying its URL. There are two things to remember, however, first is the URL must point directly at the image and not the page containing the image and second is that the image should be housed on a site that doesn't require a login to access it! Both of these situations will result in no image being displayed!

Above the input area for your content are the same icons we discussed above but now we are interested in the tree icon without the G2! It appears as shown here. Note: You may also use this method to insert images from your Gallery Album providing you know the URL.

Position the cursor for image placement and then click this icon and you will be presented with a dialog that looks similar to the shown here. As you see there are three tabs: General, Appearance and Advanced. We'll discuss the first two but the Advanced tab may be left for another discussion.

The first thing to do is enter the URL of the image you want to include. Once you know what the URL is you can just type into the text box if you wish, but it is much easier to copy and paste! How do you find the URL? Pretty straight forward!

Navigate to the image you wish to include and right click on it. The last item on the pop-up menu is Properties; click on that and a dialog (part of which is shown here) will appear.

The URL you want is displayed as Address: (URL). Just make sure you select the entire URL and you may have to scroll a bit to do it. When you are selecting it, drag the mouse down to ensure you have the entire thing. Now copy it by using a Ctrl-c key press. To do this you may want to open the image in an entirely separate window (or tab) to keep it separated from the editing window.

Go back to the General tab, position the cursor in the first text box and paste the just copied URL. Do this with a Ctrl-v key press.

As an aside, these two key press combinations are standard to Windows and will work in all scenarios. Additionally, you may use Ctrl-x to cut and Ctrl-z to undo (multiple times).

Nothing will happen until you click in the Description text box, at which time the Preview area will be completed with the chosen image. You are not required to provide a Description or Title but it is a good idea.

At this point you could click the Insert button and have the image inserted directly in you content. However, before doing this you may wish to go to the Appearance tab. It will appear as shown here. The only two area that are of interest are the Alignment setting and the Dimensions.

The Alignment drop down list allows you to select from a number of options with the diagram on the right showing an example of what the result will look like. You will most likely only be concerned with the Left and Right options (at the bottom of the list).

The Dimensions area allow you to specify the size the image is to assume when displayed. Unfortunately there is no option to request the aspect ratio of the image be maintained, so you must specify both width and height. A definite short coming.

Anyway, once everything is the way you want it, click the Insert button to add the image to your content.

Adding an Image from your own personal hard drive

How many time have you read that doing this is just not possible? Well, it is - providing you use some rather specialized techniques!

The first method appears to be somewhat limited but is reasonably easy. On the right side of most pages, immediately under your ID is a list of your options. At the top of the list is a Create Content link! Click this and then select the Image sub-topic.

You will arrive at a page that looks similar to a normal create forum entry page. There are some differences! Provide a title for your content and then, right below, you will see a list of RSS Categories which defaults to <none>. Leave it like that!

Now select the image you wish to include. Click the Browse button and navigate to the image of interest. It's path will appear in the text box but nothing else will happen. Now go to the general input area and add whatever text you wish to supply that is related to the image.

When you click Preview the image will appear followed by any text you may have provided. Submit will submit the post! It would seem that the image must appear fist with any text provided following the picture. I see no way to change this (but that doesn't mean it's not possible).

The second method involves acquiring additional software. For now, think blogs only! There are a number of software packages on the market that are designed to assist you with creating your blog entries. I use Windows Live Writer and the rest of this section is based on this package although that the others operate in a very similar manner. Windows Live Writer is a Microsoft product is available free of charge and may be downloaded very easily. Here is an image of its overall appearance, albeit at a small size.

An earlier blog entry of mine discussed this product and how to download it: http://www.nscale.net/blog-entry/bryanc/2007/08/12/microsoft-windows-live-writer-blogging-tool. I am sure that WLW works in a similar manner to other packages. As part of the set up procedure you identify the blogs you wish to use this package with and it creates the necessary connection. From this point you enter your content, including images, and then Publish the blog entry and, low and behold, your blog entry appears on the target of your choice!

This entire document was created using Windows Live Writer and all the images appearing herein originated from the C: drive on my PC! In fact they actually originated from the clipboard and were never even saved! I used a screen capture utility (Grabbit 3) to create the images which were then saved to the clipboard. From there they were pasted into the text at the appropriate place. Selecting the image allows you to then choose text alignment and margin settings amongst others (from a list of menu options on right side of the page). You may drag the images about if you wish. This seems to only work in a small distance at a time though!

And that is basically how this document was created! It was written, proof read (I probably still missed a couple of things though) and then Published. Now you are reading it!

Now, originally I said to think blog only since that's what these software packages are only concerned with! What about forum posts and other content? All is not lost. This is something I have done only once, but it worked very well!

Create your forum post (or what ever) as if it were a blog entry and publish it as a blog entry - you may want to give it a title such as "Temporary entry - please ignore". Now open your blog entry and copy the entire content (select everything and use the Ctrl-c thing again). Go to your post, article, or whatever and paste (Ctrl-v) the content into its input area. And there you go, text and images (from your hard drive)!

Once you have submitted your content, go back to your temporary blog entry and delete it! No one is any the wiser - except those of use in the know!

That is the exact technique I will using to submit this as an article!

I hope you have found this document of some use!

Original article published October 26, 2007. Updated January 10, 2008

Note: This update was prompted by two things: A PM from another member inquiring about image sizes and the Gallery and my discovery, finally, of how to adjust image sizes in Windows Live Writer! (Nothing above has been updated).

Image Size and the Gallery

This is definitely a situation where size does matter; not just a little bit but a whole lot! Each registered member has 10 megabytes allocated for their individual albums; should you fill up this space you will not be allowed to add any more images to your albums. For example, if you add images which are over 3000 pixels wide, each image will take up about 1 MB give or take. Won’t take long till your album is full!

So, within reason, the smaller the better! Images with 640 pixels as the longest side were once the norm and are still used extensively. However, given today’s resolutions that is a little small and images with their longest sides being 800, or even 1024 pixels are becoming quite common place. Anything larger and you can expect to run into space issues!

This means that once you have copied images from your digital camera to your PC you will (almost certainly) need to resize them before adding them to your album. If you want to keep the images at their original size for some other reason then make a copy of the images of interest and resize them.

Adjusting Image size with Windows Live Writer

As I indicated above I use WLW exclusively for creating new blog entries. It provides a "real" word processing environment with spell check as you type, I can include images directly from my PC and I can publish it directly.

The only thing that concerned was the size of the inserted images. By default it creates a thumbnail to include in the body which is 240 pixels wide/tall. When a reader clicks on the image it is then displayed at 640 pixels! I didn't mind the 240 pixels (in fact that is what I use on my web site) but the 640 pixel "full size" display bothered me since the images were actually 800 pixels and I wanted them displayed at that size!

Well, I have finally found out how to adjust the size of both images; the version included in the body and the version displayed when the other is clicked. It is, of course, very simple and straight forward once you know how!

To change the size of the image insert in the body insert the image as normal using the Insert Image... link then make sure the image is selected. The right side of the page will list all the image properties that may be adjusted (most of which have already been discussed); at the bottom there is a Source Image drop down list with an Options... button immediately below.

Click this button and you will be presented with a dialog allowing to set the image size that will be used when the image is clicked. You may select Small, Medium or Large or specify another size. You also indicated whether or the not the aspect ration is to be locked and whether or not the display is to open in a new window.

To adjust the size of the image displayed in the body of the entry click the Advanced tab at the top of the properties and you will be presented with the option of changing the size of the initially displayed images.

Both dialogs allow you change the default sizes by clicking the icon to the immediate right of the Size drop down list.

Note: The original article on the old site contained a fairly length discussion about images sizes in general, getting images from the camera to your PC, image processing programs and their use as well as other related information. Obviously it has not ben included here, because of its length and the fact that I was no longer sure just how necessary it might be. If, however, you would like to see it here, I still have the original text and will add it if requested.