LINKING PHOTOS on BLOGSPOT

Have you ever wanted to include pictures on your blog? Well it is easy once you have decided how and where you plan to store those photos. This chapter explains the ins and outs of linking photos on BlogSpot and uses my AOL account as a guide. However the principles in this chapter apply to any photos that can be referenced by URL.

I have an AOL account and get 20 Mb of disk space for each screenname in my family. This space is located at http://members.aol.com/screenname. I get access to that space by going to AOL Hometown.

This is a general interface for managing your journals (Much more on that later), homepages, pictures, and other documents on the AOL server. I tend to compose my content on my local Mac and so pretty much go on to the "Try My FTP Space to upload them to Hometown." section of the interface.

Be sure to join AOL Hometown so that you can get the extra disk space! Now I can use the See My FTP Space interactive interface to access Open, Download Now, Utilities, Create Directory, Help, or select More. A good hint is that you should organized your files on you ISP server in a similar way as on you personal computer. I have parallel directory structures for documents, images, and other HTML resources between my Mac and AOL account.

Now create a directory for your photographs and double click that directory to open up the graphical interface for that directory. Test the URL to the newly uploaded photographs after you have uploaded them. This is accomplished by entering the direct URL http://members.aol.com/screenname/imagedir/image.jpg in the browser. When the photo comes up directly in your browser then you know that it is available to publish in any web site. This includes your Blogger blog. This also includes any web site home page that you may also be authoring. This makes banner and photo reuse very easy and limits the amount of wasted disk space. The frog logo and "bio photo" on John's Blogger blog is the same as the one used on his AOL web site. This also make updates to these elements painless. To change a banner or bio photo (in case you got new glasses like my son) all that is required is to update the picture.jpg on the AOL server. No HTML needs to be changed. Notice that at this point we have only be configuring the photos on your ISP server.

For those not using AOL as an ISP follow the directions for uploading personal web pages to your web space. The same principles of organizing images in a directory and testing them with a direct URL path applies. Once the photographs are visible with a direct URL then you are ready to go to the next step... linking them in Blogger.

Embedding Links in Blogger

Any URL link can be added to either the template or individual posts. These links can be either absolute paths or relative paths. The only requirement is that the URL be a valid address. That can always be tested directly in your browser. Examples of an absolute URL reference is http;//www.yahoo.com. You can place these links in your Blogger template by using the HTML fragment:

a href="http://www.yahoo.com"> Yahoo Link

The same could be done with any image on the internet:

img src="http://members.aol.com/jjwwcraft/i/accesslogo.gif"> or img src="http://members.aol.com/jwceichmgc/i/shell5.jpg">

Here is an example of my banner for the Access to Space web site and a picture in my Sea to Shining Sea family travel blog. In both cases these are long absolute paths and for the occasional entry the long addresses are not too bad. However, I hate to type so I prefer to use a relative path especially on Sea to Shining Sea where there will be tens of photographs in my Blogger posts. Also relative paths are nice because the web pages or blogs on your personal computer are the same as those on the ISP server. This make maintenance much easier! A blog page is just a HTML document and so follows all the normal HTML rules. These means that the location of that HTML document is the default BASE HREF used by the browser to navigate anything that does not have an absolute reference (http:// or ftp:// etc). On Blogger this means that the BlogSpot address is the default BASE HREF. The key to making the relative paths to your ISP server work is to reassign BASE HREF in the head of the Blogger HTML document. That document is rendered from the template so that means editing the template.

Template Edit in Blogger (top of file):

---------------------------------------------------

!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml1-transitional.dtd"> html> head>

BASE HREF="http://members.aol.com/JWCEICHMGC/"> the line to add

/head>

---------------------------------------------------

Now you can use any relative HTML path to your AOL account. This includes web pages or pictures! In fact I had a movie once (post about Bryce) and that movie was linked into my Blogger post. Unfortunately AOL did not have enough memory for it, so I removed the movie file. Always remember that you also can still use absolute paths to other sites or links! That means that you have not lost any flexibility by changing BASE HREF.

The proper format for the individual posts entry is:

BLOGGER ARCHIVES with BASE HREF CHANGE

Now that your page "sees" AOL you do need to update the archive links so that it will find the Blogger archives. This is because the links used in the default Blogger template expect that the BASE HREF is pointing to the local (to Blogger) generated Blogger page. Blogger has provided a number of KEY WORDS that their document generator uses to construct the final HTML page. This provides you a lot of power if you know how to tap into the syntax.

The keywords that will need to be used are $BlogArchiveLink$ and $BlogArchiveName$. They provide the information so that the archive url links will be correctly navigated. Now that the whole document is BASE HREF'ed to your AOL account, you need to specify an absolute path to the archive. The template fragment below shows how that is done: Back in the Template file (look for BloggerArchives key word):

---------------------------------------------------

ul> BloggerArchives> li> a href="http://seatoshiningsea.blogspot.com/archives/<$BlogArchiveLink$>"><$BlogArchiveName$> /li> /BloggerArchives> /ul>

---------------------------------------------------

Notice I added an absolute reference back to seatoshiningsea. This makes sure that the archive address can be resolved by your browser.

SUMMARY 1) Upload the photographs to your ISP space 2) Set BASE HREF to your ISP url 3) Point the archives back to Blogger 4) Just add the relative path to pictures or pages

I have found that this has work real well. I have a AOL user name for my son, daughter, me, and for Blogger pictures on Sea to Shining Sea. That way AOL disk quota's were not quite so bad. Also you should make sure that you add you AOL space to hometown to get the extra disk space: 20 Megs per username