Blogware Mechanic.

Suppose you've got a blog with a standard text title, like the one below...



...and you've got an image file that you'd love to use in the place of your blog title, say this one...



...so that your blog looks like this:



This article will show you how.

Three Steps to Image Titles

The process of using an image for your blog's title can be broken down into three steps:
  1. Upload the image to your blog's file space
  2. Create a custom component for your image title
  3. Add the new component to your blog's layout

Step 1: Upload the image to your blog's file space

In order to use an image as the title for your blog, you need to provide the image with a place in which to "live". Luckily, all Blogware blogs have storage space for files. You can manage this space using the File Manager, which you can access by clicking on the File Manager tab in the Publisher Control Panel:



Blogware's filesystem is pretty much like a filesystem that you'd get at a web hosting service. You can upload as many files as your disk space allotment will allow (the amount of disk space will depends on the sort of account you have, and you can always purchase more) and you can create any number of directories and subdirectories. You can even use FTP to access it, which is handy when you want to upload or download whole directories.

The URL for your blog's filesystem's home directory is the hostname for your blog. For instance, if your blog's hostname is example.blogware.com and you've stored your photo in a file called mypicture.jpg in the home directory, the URL for that photo would be http://example.blogware.com/mypicture.jpg. If you create a directory called pictures in your home directory and then move mypicture.jpg to that directory, the URL for the photo would be http://example.blogware.com/pictures/mypicture.jpg.

I typically have a directory called pictures in my blogs' home directories into which I put image files. Within the pictures directory, I typically have a directory called layout, which holds images that I use as part of my blogs' layouts, such as title images, my custom permalink icons, ans so on. For this example, we'll assume this convention, which is illustrated in the screenshot of the File Manager below:



For this example, I've uploaded the image file I want to use as my blog title -- release_the_cats.jpg -- to the /pictures/layout directory in my blog. I've copied the URL for the image (shown below) because I'm going to need it in the next step.



Step 2: Modify the "Blog Name" component

There are a couple of ways to incorporate a given image in the layout of your blog. If you want to include the image within the header, sidebars or footer of your blog, the simplest way is to add it to a new or existing component.

Navigate to the Components page by clicking the Look & Feel tab in the Publisher Control Panel and then clicking the Layout link. Click the Components tab on the smaller set of tabs that appears on the page. You should see a page that looks something like this:



We're going to do things the easy way in this demonstration: rather than create a brand new component for your image title, we'll simply modify an existing component -- the Blog Name component. If you scroll down the components page, you'll see a list of all the built-in components:



To edit the Blog Name component, click the Customize link that corresponds to it. A window like the one below will appear:



Let's take a closer look at the content of the Blog Name component:
<div class="component">
  <div class="componentBlogname">
    <a href="{{blog.url}}">{{blog.name}}</a>
  </div>
</div>
component and componentBlogname are the names of a couple of CSS classes. We won't worry about them for now -- suffice to say that all components should be contained within a component div and the componentBlogname class is used to style the text of a blog's title.

Let's take a look at what's in the {{braces}}. Inside Blogware components and templates, anything inside braces is first interpreted by Blogware's scripting language and then converted into the corresponding HTML.

The first item in braces is {{blog.url}}. As you may have guessed, this represents the URL of the blog. Blogware will replace {{blog.url}} with the actual URL of the blog when rendering the blog page. Since we want to observe the convention that clicking on the blog's title takes the reader to the home page, we won't touch it.

The second item in braces is {{blog.name}}. As you may have also guessed, this represents the name of the blog (which you can set in the General page of the Settings & Security section of the Publisher Control Panel. Blogware will replace {{blog.name}} with the name of the blog when rendering the blog page.

Since we want to use an image for the title of the blog rather than plain text, let's remove {{blog.name}} and replace it with an <img> tag pointing to our title image:

<div class="component">
  <div class="componentBlogname">
    <a href="{{blog.url}}">
    <img src="http://example.blogware.com/pictures/layout/release_the_cats.jpg" width="412" height="137" alt="Release the Cats!">
    </a>
  </div>
</div>
Note that I've included the height, width and alt attributes for the <img> tag. Strictly speaking, they're not absolutely necessary, but including the height and width information on all images makes the blog appear to load faster (in truth, it defers image rendering until after everything else has been rendered) and the alt attribute makes sure that something informative appears if for some reason the image fails to load.

Once you've added the tag, click the Save Changes button. Note that there will now be two components called Blog Name: the original one, located in the System Components list, and the new one, located in the Custom Components list.

Step 3: Add the new component to your blog's layout

We have the image, and we've put it into a component. Now it's time for the last step: adding it to your blog's layout.

To do this, click on the Header tab so that you see this:



Note that the original Blog Name component -- the one with the plain text -- is in the left column. Your customized Blog Name component appears as Custom: Blog Name in the Inactive column.

We want to add the Custom: Blog Name component to the layout and remove the plain Blog Name component. Do this by dragging the Custom: Blog Name component to the left column, placing it at the very top:



Once you've done that, do the opposite for the Blog Name component -- drag it from the left column and into the Inactive column.

Once that's done, your blog layout should look like this:



Click the Save button, then click View Blog to see the result!