Monday, May 25, 2009

HTML, iframe and Blogger Template Headaches...

I've always been a "do it yourself" kind of guy when it comes to most things that I need. That's why I learned to build my own boats, make my own sails and many other skills that I would have never thought I would learn until the day came when I needed them. I used to hate computers and didn't want anything to do with them. For years my only use for them was for the word processor function, writing my books and articles and occasionally surfing the Net in the course of research. Then the time came a few years ago, when as a newly published author, I realized I had to have a website. Of course I didn't want to pay someone to build it for me. That would be expensive, and I would have to wait on someone else's schedule every time I wanted a simple change. So I started the process sometime back in 2003, and it continues to this day.

Building and updating my website and blogs has been an ongoing project filled with challenges and interesting problems. Since I do not have any formal training in writing code, learning to get the appearance and functionality I want on my various pages has been a hit and miss effort, requiring lots of searching online for instructions and tips. Fortunately, just about anything you need to know is freely available in various forums and on how-to sites and blogs.

Anyone who has been following my blogs or visiting this site for any length of time knows that I've made many changes over the years and have redesigned the whole site more than once. Hopefully, it is now in a form I can live with for awhile, and any changes will be simple additions, rather than major overhauls.

The main purpose of this front page blog, which is embedded in an "iframe" element, for those who may not know how that works, is to allow easy and updates and add dynamic content to an otherwise static page. I'm writing this right now as a post in my Blogger account, but as soon as I finish it and hit the "publish post" button, it will also appear on my main website page where you are likely reading it now in the iframe that starts a third of the way down the page.

I prefer to use Blogger for all my blogs, hosting them each on a separate blogspot address. It's easy to set them up, the templates can be modified as extensively as you require, search engines such as Google readily index new posts, and best of all - it's free. But despite this, I would never use a blogspot address for my main website. Instead, this site is hosted separately under the domain scottbwilliams.com, which allows me to build the pages anyway I like, but requires a site building software program to update it. What I wanted with this homepage blog is to integrate it more or less seamlessly with the main index page of the larger site, having the navigation bars and header that you see at the top of the page the same as on all the pages in the website.

In the previous version of this site, before this past weekend's update, I had my Scott's Boat Pages blog integrated into this home page in the form of a live feed from Feedburner. While that worked okay for displaying the text and posts from recent photos on the blog, the live feed does not include all the extra widgets in the blog like the sidebars you see to the right with links, recent posts, archives and other material. Instead, it converts everything to a basic text, which can be customized, but is real pain using CSS (cascading style sheets) and other advanced techniques.

The iframe option is a simple code element that is easy to install with the sitebuilder program I am using for this site, and it is a simple matter to set it up to display the content of a blog or any website in its own separate window that can be displayed on any webpage. The problem with this, as I discovered late yesterday after publishing all the new changes to my site, is that when you click on links within the site or blog that is displayed in the iframe, the new link opens within the iframe instead of the whole page you are viewing. For example, the links in this post or in the sidebar to the right would try to open the whole new site within this small window. In the case of sites with larger pages, such as SmugMug, where my photos are hosted, the page would expand over the iframe borders, but not allow you to use the "back" button to return back to my home page. I quickly realized this would not work, and so began yet another intensive search through web design forums looking for a solution, because I really wanted to keep the blog in this iframe and retain the colors, sidebars and any future widgets I might want to add later.

My searches turned up many discussions about this topic, with some people saying it couldn't be done and others saying it was easy. Some solutions required adding a tag to each link that would tell it to open in a new window. This would defeat the purpose of a simple and readily updated blog, if I had to go in and manually add HTML tags to every link from now on. At last, after working on this much later than I intended last night, I found a post on The Useful Blog that offered an easy way to make my links here behave the way I wanted them to.

It turned out that all I had to do was go into my template on Blogger and edit the HTML, adding this simple tag: base target="top" into the head section of the template code. This tells every link within the blog to open at the top of the page, breaking it out of the iframe and allowing the back button to function again.

Now that I've overcome that hurdle, I'm content to leave this blog in the iframe to maintain the appearance you see now and allow for full functionality of the sidebar widgets. Since the blog is hosted on its own blogspot address, search engines can still index the posts, even though they can't "see" the content within the iframe on a page. I don't really like having the header you see at the top of this post visible on the main website, but it needs to remain so that visitors who come directly to the blogspot address know what they are reading.

Another simple modification that I feel is necessary to put a blog into an iframe on a page like this is to get rid of the Blogger navigation bar that appears at the top of every blogspot page. This is another simple code addition to the template, which I found online and added as soon as I set this blog up. The code: #navbar-iframe { display: none !important;} placed under the head section of the template magically makes the annoying blue bar go away.

Working with this stuff gives me a headache and eats up an extraordinary amount of time, but it is an interesting learning experience, and it's all part of the process of writing and publishing using the awesome tools and resources available on the Internet.

Sunday, May 24, 2009

Photo Gallery Website

Regular visitors to my site may have noticed that I've removed all my photo galleries and slide shows from pages hosted on this site. Most of the images I had posted here had been around several years, and the process of updating pages and adding new photos was slow and time consuming. I've been doing a lot more photography in the last year or so, and the number of images that I want to post has become overwhelming.

To help with organizing all these photos and to make them easier for visitors to view, I've set up a pro account on Smug Mug, a photo hosting site that provides plenty of options for displaying and distributing photos. I get occasional requests from visitors who want to either purchase a print or the rights to use an image in a publication or online. With the Smug Mug account, this is all set up to be automated and purchases can be made through the site by the visitor. Options include many sizes of prints as well as electronic downloads. The images displayed on the account are protected by a watermark and are disabled from "right click" downloading. Once purchased, however, the the watermark is removed.

Example image: A small private schooner docked in Back Bay, Biloxi. For more images in this gallery, click here.

Another cool thing about hosting photos on Smug Mug is that I can upload them there just one time, and still use them in my various blogs and on the pages of my website by simply embedding an html source code that links back to them. This way they don't take up space anywhere else and the same watermark is carried to the other sites. Smug Mug galleries can also be set up for various levels of accessibility. Each gallery can be customized so that photos are visible to all visitors or just to the ones you give a password to. These options are useful to pro photographers who work with portraits and wedding for example, as all the photos can be available for selection by the customer, but not visible to anyone else.

It will take me months to get all the images I have to post in my galleries edited and online, and of course like all my websites, it will be an ongoing process for years to come. If you have a need to upload lots of photos for a similar purpose, I can highly recommend SmugMug based on my limited experience with it so far. To see all the galleries I've set up on my account so far, go to http://photography.scottbwilliams.com/

Saturday, May 23, 2009

New Projects of a Broader Scope

Recent preliminary work on two new book projects prompted me to set up a more general home page blog to replace my Scott's Boat Pages blog that has resided here for over a year. This doesn't mean that I'm doing away with Scott's Boat Pages. You will still find it at the same blogspot address where it has be hosted since I started it last year, and I plan to continue posting boat related articles there. I just needed a more flexible platform for my main website page, and I look forward to updating this page more frequently with a variety of photos, articles, commentaries and observations.