4.8 Logo

As a first step toward we are going to add the logo on the top of the page: we have to replace the following lines inside lib/template.cws:

<div id="header">
  Logo
</div>

Sources described in this section and next ones can be found under directory site-02 in the examples archive downloadable from http://www.g-cows.org.

First, let's create a directory called images:

$ mkdir images

we already created the images, so let's get the logo (file logo.png) and put it inside. Now, you could be tempted to write something like:

<div id="header">
<img src="../images/logo.png" alt="Animal Rights Site" />
</div>

This won't work: the logo image is seen as images/logo.png from index.html but is seen as ../images/logo.png from vegetarianism/index.html. In practice, template.cws shouldn't make any assumption about its location within the directory tree since its content can be included from different files with different locations.

So we can refer to images and links as if they were seen from site's root directory and place a variable number of `../' sequences before. How many `../' sequences do you need ? Exactly the number of directories traveled to reach the output file from the root directory. The number of ../ sequences will be evaluated by Cows while including the file, once you request it by the mean of the linkadjust () function.

<div id="header">
<img src="@@ linkadjust () @@images/logo.png" alt="Animal Rights Site" />
</div>

Now, let's update the site:

$ make
cows   index.cws index.html
cows   vegetarianism/suffering.cws vegetarianism/suffering.html
cows   vegetarianism/health.cws vegetarianism/health.html
cows   vegetarianism/hunger.cws vegetarianism/hunger.html
cows   vegetarianism/index.cws vegetarianism/index.html
cows   vegetarianism/act.cws vegetarianism/act.html

All pages has been correctly updated since we changed the template included by each of them.

If you look inside index.html and vegetarianism/index.html you'll find respectively:

• <img src="images/logo.png" alt="Animal Rights Site" />

• <img src="../images/logo.png" alt="Animal Rights Site" />

Finally, I've silently included the stylesheet as:

<link rel="stylesheet" type="text/css" href="../css/style.css">

This is wrong, in fact the relative file name works for file vegetarianism/hunger.cws but non for index.cws. So, let's use the following:

<link rel="stylesheet" type="text/css"
      href="@ linkadjust () @css/style.css">