« Back In The Saddle | Main | New Bio Page »

Saturday, September 26, 2009

Start With a Background Image

I have started designing a new Thingamablog template for my next blog(s).

One thing I like to do on my web pages is to have a nice, relaxing background throughout. I think that looks better than having a solid background or a bunch of complex graphics. So I have found a nice tile, which looks like parchment. I have adjusted the brightness of the image using The GIMP so that the background is less intrusive than it would be if it were darker. Here is the tile:

Parchment Tile  

Before moving on to the use of the tile, I want to address (once again) how images get added to a blog.

Adding an image like the one above to the blog is somewhat tricky if you try to get too smart about it. I imported my background image into the media folder, which will cause it to be automatically uploaded by Thingamablog, and that was easy. The tricky part is how the image is made accessible to the blog out on the web.

When I use the image tool to put the image into the blog, I navigate to the file on my disk drive and the tool puts the URL of the file into the html. This, of course, will not be accessible out on the web even after the image has been uploaded. However, if I leave the file: specification in the blog text, the uploader in Thingamablog will automatically translate the file: URL into the appropriate http:// URL. I did not understand that before, and I mucked around with the image URL until I broke it.

The fact is that Thingamablog handles the image URL's quite nicely if you let it.

Right after I add the image with the editor, when I look at the html, it has the file URL pointing to the image on my disk. For example:

<img src="file:/home/brian/blogsdatabase/1247882990333/web/media/parchment-30.jpg" 
height="265" width="300">

After I publish the blog to the web, the uploader translates the file: URL in the blog text to the appropriate, fully qualified http:// URL and publishes that text instead. Hence, the image will work fine on the blog. It actually changes the text in the blog. After publishing, the above img tag looks like this in the html editor:

<img alt="Parchment Tile" src="http://www.thekimerers.com/brian/blogs/TAMB/media/parchment-30.jpg" 
height="265" width="300";>

So, as long as you use the tools in the editor to add imported images, and you don't mess around with the URL's in the html editor, it all works out just fine when you publish. I have touched on this problem with the image URL's before, and I fixed it back then by manually correcting the URL and uploading the blog again. I have now figured out how to use the Thingamablog editor properly, and I just let Thingamablog do the grunt work for me. The secret is:

  1. Import the images into the media folder
  2. Enter the image into the blog using the image tool (not using the html editor)
  3. Don't muck with the URL until after you have published the blog.

Well, I got off the subject a bit. But I do have the background image for my new template. Next I think I will enhance the blog by creating a bio page to see how the background image works in actual use. Once I have the bio page done it will reside outside of the blog so that I can use it for any of my future blogs.

 

Posted by Brian S. Kimerer at 9:19 AM

This site and all of its contents are copyright Brian S. Kimerer 2009