Michael (masterslacker) wrote in component_help,
Michael
masterslacker
component_help

Graphics Above Entries (at top of the page)

The original version of this tutorial is on anchan218's journal HERE. I am putting it into the community so that it will always be accessible in the event that something happens to anchan218's journal. I have updated it to reflect the use of the print_custom_head() function which was created after this tutorial was originally made. Note also that even though the tutorial says you lose the navigation bar along the top, you can restore it by following THIS tutorial.
----------

Here's the tutorial as requested. It took longer to write than I anticipated. ^_^; Anyway, please feel free to ask questions about it because I am not that great at teaching.

Before I get to the tutorial, I'm going to assume you at least know the basics about making a theme and overriding functions. If not, take a look at this entry from </a></b></a>s2component to learn the basics about customizing components.

As a warning before we start, if you implement this you will lose the next/back link functionality in the NAVBAR. However, those links will still work fine in the navigation component, so I highly recommend switching to the navigation component if you are not using it currently. More on the reasons why later.

Ok, onto actually teaching stuff. Because we want to put pictures at the very top of the page with the components and entries below the pictures, the best place to do this in is page_layout(Page p), which is what that lays the foundation for every page. You'll notice like print_free_text(Page p), it has Page p between the parentheses. Basically this Page p is a specific page named p, which we will need to use a lot in our code. So, we will need to look at the documentation for the Page class quite a bit. You may even get sick of referring to this so much.

So, here's our starting point:

function layout(Page p) {
}

I'm going to start off first by talking a bit about HTML (for those of you who don't understand it at all.) You're probably familiar that pretty much every web page URL you have ever been to ends with either ".html" or ".htm" These indicate that you are using a file written in something called HTML. HTML is a mixture of normal sentences and commands that tell your webbrowser to do something. All of the commands start with < and end with > to let your webbrowser tell the difference between the normal sentences and a command. Some commands tell the webbrowser to put something in at that particular point in your webpage, while others mark off sections of the webpage to which the webbrowser is supposed to do something. For the latter, these sections are marked by an "opening tag" and a "closing tag". The opening tag looks like a normal command, and the closing tag appears exactly the same as the opening one, except it has / immediately following the <.

For example, <html> is an opening tag, and </html> is its closing tag. These two tags surround everything in every webpage because they let your webbrowser know everything in between them is written in HTML (sometimes your webbrowser may deal with javascript or java, and it needs a way to tell the difference). Because page_layout(Page p) prints the foundation of our webpage, we need it to print this out, so I'm going to add it to our function

function page_layout(Page p) {
"""
<html>
</html>
""";
}

Every webpage is divided into two major sections, the head (indicated by <head> and </head>) and the body (indicated by <body> and </body>). The head contains information that mostly concerns the webbrowser, like information for search engines, while the body contains what you think of as the webpage. Traditionally, head is written first in HTML code, and then the body. Obviously, most of our coding will be done in the body section of the webpage. However, we will be using both these sections. If we add them both, we get the following:

function page_layout(Page p) {
"""
<html>
<head>
</head>
<body>
</body>
</html>
""";
}

However, this doesn't really do anything, so if you compile it, you'll see just a blank page. Let's make our webpage actually do something by adding a style sheet.

In case you don't know, a style sheet is just a way of writing how you want your page to look so you do not have to keep typing the same code over and over again. Components is very dependent on its style sheet, so this is very important to include. The HTML tag to use a style sheet look like this: <link rel="stylesheet" href="url" type="text/css"/>, except that "url" should be the URL of the style sheet in quotes. This command goes between the head tags. You're probably wondering how we know where the style sheet is, but luckily S2 provides the answer.

But first, a quick programming aside. If you recall, I said that the Page class includes functions and some other stuff. Some of this "other stuff" is variables, which are just useful pieces of information a programmer might use. Every variable has a name (which you can make up when you create the variable), and is assigned some information. Once the variable is created, you can refer to it by $ in front of its name. Basically, whenever you refer to the variable, the webbrowser will replace the variable's name with the information it actually refers to. This is very useful when you don't know the information because it changes from webbrowser to webbrowser. We'll get back to variables more in a minute, but this is enough to at least get the S2 provied URL.

If we look the Page class documentation we discover that the variable string stylesheet_url contains the URL for the stylesheet. Since this variable is a member of the Page class, we can only get to it through our provided page, p. So, we will need to refer to it as $p.stylesheet_url rather than simply $stylesheet_url. Putting this all together we get:

function page_layout(Page p) {
"""
<html>
<head>
 <link rel="stylesheet" href="$p.stylesheet_url" type="text/css"/>
</head>
<body>
</body>
</html>
""";
}

If you compile it now, you'll see that we can see a background graphic, which isn't much but is a definite improvement. The next logical step for us to do is add a title to the titlebar. But first, I'm going to finish talking about variables.

As was explained in earlier tutorials, in the world of programming there are things called functions, which basically have a bunch of code in them and do stuff. However, sometimes a function doesn't just do something, but will also give some information which the programmer can store somewhere and use later. This is called "returning a value" and the ideal place to store this value is a variable. In S2, these "variables" come in three types: ones that store true or false (bool), ones that store numbers (int), and ones that store text (string). You may create other types, but for the purpose of this tutorial, these three are the only ones you need to know about. To make a variable you type in the following phrase: var type name; where type is one of the three types I listed above and name is whatever I wanted to call my variable. For example, if I want a variable that holds text named cat, I would type: var string cat;

You're probably thinking, "that's nice, but how do I make one of these 'variables' hold information?" Well, you just set it equal to the information you want it to hold. There are some rules for special cases, but we don't need to bother with them to do what we want to do. For example, if you want to take the information spit out by a function, you write: $cat = function();

Hopefully you're not too lost. If you didn't get anything else from this variable talk, remember functions can sometimes spit out information that needs to be stored somewhere. To store information you use something like the following: var int title = function(); and to use this information afterwards you refer to the variable as $title.

Ok, back to the task at hand: printing the title of the webpage in the browser's titlebar. Taking another look at the Page class documentation, we find page has a function called "title()" which returns a string containing the title of the page. Whew, got that? Basically it spits out the name of the page, which is the exact information we want. Since title() is part of the page class, as we did earlier with $stylesheet_url, we need to go through p to use title(). For functions, this means we add a $p-> in front of title(). Referring back to the previous few paragraphs, we can condense it all into one line: var string title = $p->title(); Now, for those of you who don't know any html, to get it to display in the titlebar, we need to put our information between <title> and </title>. Putting this all together, we get:

function page_layout(Page p) {
   var string title = $p->title();
"""
<html>
<head>
 <link rel="stylesheet" href="$p.stylesheet_url" type="text/css"/>
 <title>$title</title>
</head>
<body>
</body>
</html>
""";
}

Compile, and whee there's the title in the titlebar. If you browse around Page class documentation, you might notice that string head_content says "Layouts should include this in the head section if they are writing HTML" in its description. Since that's us, let's include that as well. Like before, we need to refer to the variable as $p.head_content because it is a part of the Page class. Also in the Page class is the function print_custom_head() which is so that users can override it to print custom head information for the html. So we must call this method in the head section.

function page_layout(Page p) {
   var string title = $p->title();
"""
<html>
<head>
 <link rel="stylesheet" href="$p.stylesheet_url" type="text/css"/>
 $p.head_content
 """; $p->print_custom_head(); """
 <title>$title</title>
</head>
<body>
</body>
</html>
""";
}

Don't bother compiling now because you won't see any visible different. Anyway, now that we're finished with the head part, we can actually move to the interesting stuff: the body. Let's start this part by reconstructing how components normally works and then adding the pictures at the top after that.

But first, an aside about HTML tables. These are somewhat confusing, but EXTREMELY useful once you figure them out. Yes, they can be the traditional table that holds sets of numbers (or other information), but you can also use them to make sure pictures show up in the right place, or to arrange your layout in the right manner. Components relies on tables a lot. Basically the components are all in one cell of a table, and the entries are in another. And because we are overriding the function which tells both components and entries to show up on a page, we will need to understand tables to code this function right.

To create a table, you use <table> and </table>. Anything which appears between these is considered part of the table. Tables are further divided into rows by <tr> and </tr>. Anything that appears between one set of these is considered part of one row. Finally, rows are divided into cells with <td> and </td>. Anything that appears between these will go into one table cell. Anything can go in a table cell: text, pictures, even another table. HTML assumes that all rows in a table will have the same amount of cells in them, with all cells in one column being the same width. Here is an example of a very basic HTML table:

<table>
 <tr>
  <td> a </td>
  <td> apple </td>
 </tr>
 <tr>
  <td> b </td>
  <td> banana </td>
 </tr>
</table>

This table will look like the following:
a apple
b banana

Notice how the rows display from top to bottom (ie the earlier a row appears in the table, the closer to the top it is) and that cells appear from left to right (ie the earlier a cell appears in a row, the closer to the left it is).

This table doesn't have a lot of useful information, but hopefully it makes coding an HTML table more clear. HTML tags can also come with a lot of other extra information in them, such as widths and things, most of which are fairly explanatory. All plain numbers (ie not percentages) are assumed to be in pixels for this extra information.

Back to our original task: writing page_layout(Page p). Let's take one row of our simple but useless table and put it into our function:

function page_layout(Page p) {
   var string title = $p->title();
"""
<html>
<head>
 <link rel="stylesheet" href="$p.stylesheet_url" type="text/css"/>
 $p.head_content
 """; $p->print_custom_head(); """
 <title>$title</title>
</head>
<body>

<table>
 <tr>
  <td> a </td>
  <td> apple </td>
 </tr>
</table>

</body>
</html>
""";
}

Compile and see that we indeed have a table of two rows and two columns. For our purposes, we need to add some extra information to the table, row, and cell tags. In particular, information which specifies the width, border, spacing between cells, padding around cells, and placement of the cells/rows in the table. Rather than confuse you by explaining a lot of trivial information, I'll just give you the updated version:

function page_layout(Page p) {
   var string title = $p->title();
"""
<html>
<head>
 <link rel="stylesheet" href="$p.stylesheet_url" type="text/css"/>
 $p.head_content
 """; $p->print_custom_head(); """
 <title>$title</title>
</head>
<body>

<table width="100%" cellspacing="0" cellpadding="0" valign="top">
 <tr valign="top" width="100%">
  <td> a </td>
  <td> apple </td>
 </tr>
</table>

</body>
</html>
""";
}

Now we need to look at something different: the component specs. Although we cannot see the source code, from this page we can guess that print_my_components(Page p) probably prints out all the components and print_my_entries(Page p, string title) probably prints out all the entries. Since $p is a member of the page class, we can replace the "Page p's" with just $p. For "string title" lets use $title from when we were putting the title in the titlebar. Now we have: print_my_entries($p, $title) and print_my components($p).

By experimenting with these functions, I've found that both of them already have the <td> and </td> tags built into them, so we can remove those tags from our table when we add in these functions. Let's take a look at what we have now.

function page_layout(Page p) {
   var string title = $p->title();
"""
<html>
<head>
 <link rel="stylesheet" href="$p.stylesheet_url" type="text/css"/>
 $p.head_content
 """; $p->print_custom_head(); """
 <title>$title</title>
</head>
<body>

<table width="100%" cellspacing="0" cellpadding="0" valign="top">
 <tr valign="top" width="100%">
""";
   print_my_components($p);
   print_my_entries($p, $title);
"""
 </tr>
</table>

</body>
</html>
""";
}

Try compiling this and see how it looks. Not bad, the entires and components both show up. However, you might be irked that there is no space between the entries and components and there is no border between the entries/components and the edge of the browser window. To add these spaces, we need to add three more cells: one before the components, one in between the entries and the components, and one after the entries.

function page_layout(Page p) {
   var string title = $p->title();
"""
<html>
<head>
 <link rel="stylesheet" href="$p.stylesheet_url" type="text/css"/>
 $p.head_content
 """; $p->print_custom_head(); """
 <title>$title</title>
</head>
<body>

<table width="100%" cellspacing="0" cellpadding="0" valign="top">
 <tr valign="top" width="100%">
  <td width="3"></td>
""";
   print_my_components($p);
"""
  <td width="3"></td>
""";
   print_my_entries($p, $title);
"""
  <td width="3"></td>
 </tr>
</table>

</body>
</html>
""";
}

If you actually tried to compile this one, though, you'll notice it doesn't make any difference in the way things look. This is because webbrowsers do not print out empty table cells. We need something in the new cells to make them actually show up, but this something needs to be transparent so the cell seems to be empty. Luckily components provides us a transparent gif, which we can use by writing <img src="http://www.livejournal.com/palimg/component/clear.gif" width="3" height="1" alt="" border="0">. Let's see our code with this image in place.

function page_layout(Page p) {
   var string title = $p->title();
"""
<html>
<head>
 <link rel="stylesheet" href="$p.stylesheet_url" type="text/css"/>
 $p.head_content
 """; $p->print_custom_head(); """
 <title>$title</title>
</head>
<body>

<table width="100%" cellspacing="0" cellpadding="0" valign="top">
 <tr valign="top" width="100%">
  <td width="3">
   <img src="http://www.livejournal.com/palimg/component/clear.gif" width="3" height="1" alt="" border="0"></td>
""";
   print_my_components($p);
"""
  <td width="3">
   <img src="http://www.livejournal.com/palimg/component/clear.gif" width="3" height="1" alt="" border="0"></td>
""";
   print_my_entries($p, $title);
"""
  <td width="3">
   <img src="http://www.livejournal.com/palimg/component/clear.gif" width="3" height="1" alt="" border="0"></td>
 </tr>
</table>

</body>
</html>
""";
}

Now if you compile, you'll find the components and entries are spaced from each other like we wanted... But, some of you are probably thinking, "I don't want my components on the left! I want them on the right." We can fix that with a little help from something known as the "if statement". An "if statement" is basically a programming structure which flows the following logic: If something, then do this. Else if something else, then do that. Else then do the last resort. In S2 programming it's accomplished by writing this:

if (something) {
   do this;
}
elseif (something else) {
   do that;
}
else {
   do last resort;
}

The elseif and else parts are optional. And you can have it do multiple things if you want by putting multiple lines of code between the curly brackets. Now, if we take another look at the the component specs, we can deduce by experimentation that when the components are on the left, the property $*comp_state is "left" and when the components are on the right, $*comp_state is "right". So, we can use this property to determine where to place the components. For example, if we write

if ($*comp_state == "left") {
   print_my_components($this);
}

the components will only print if the components are supposed to be on the left. If we changed $*comp_state == "left" to $*comp_state == "right", it would only print the components when they are supposed to be on the right. So, let's add both of these to our function, the left one before the entries print and the right one after the entries print. This way the components will show up as desired on our page. We'll also need to take out the original print_my_components($p), so that we don't end up printing the components two times.

function page_layout(Page p) {
   var string title = $p->title();
"""
<html>
<head>
 <link rel="stylesheet" href="$p.stylesheet_url" type="text/css"/>
 $p.head_content
 """; $p->print_custom_head(); """
 <title>$title</title>
</head>
<body>

<table width="100%" cellspacing="0" cellpadding="0" valign="top">
 <tr valign="top" width="100%">
  <td width="3">
   <img src="http://www.livejournal.com/palimg/component/clear.gif" width="3" height="1" alt="" border="0">
  </td>
""";
   if ($*comp_state == "left") {
      print_my_components($p);
   }
"""
  <td width="3">
   <img src="http://www.livejournal.com/palimg/component/clear.gif" width="3" height="1" alt="" border="0">
  </td>
""";
   print_my_entries($p, $title);
   if ($*comp_state == "right") {
      print_my_components($p);
   }
"""
  <td width="3">
   <img src="http://www.livejournal.com/palimg/component/clear.gif" width="3" height="1" alt="" border="0">
  </td>
 </tr>
</table>

</body>
</html>
""";
}

However, if you compile this and try switching the side where the components appear a few times, you'll notice the spacing doesn't work correctly when the components are on the right now. We need to add the spacing between the components/entries to the if statements instead, to make the spacing work correctly. For the case where the components will print out on the left, that means it needs to go after the components print, but still in the if statement. For the case where the components will print out on the right, it will need to go before the components print, but still in the if statement. This way no matter which of the two if statements print, the spacing will always print between the entries and the components. Here's our corrected code:

function page_layout(Page p) {
   var string title = $p->title();
"""
<html>
<head>
 <link rel="stylesheet" href="$p.stylesheet_url" type="text/css"/>
 $p.head_content
 """; $p->print_custom_head(); """
 <title>$title</title>
</head>
<body>

<table width="100%" cellspacing="0" cellpadding="0" valign="top">
 <tr valign="top" width="100%">
  <td width="3">
   <img src="http://www.livejournal.com/palimg/component/clear.gif" width="3" height="1" alt="" border="0">
  </td>
""";
   if ($*comp_state == "left") {
      print_my_components($p);
"""
  <td width="3">
   <img src="http://www.livejournal.com/palimg/component/clear.gif" width="3" height="1" alt="" border="0">
  </td>
""";
   }
   print_my_entries($p, $title);
   if ($*comp_state == "right") {
"""
  <td width="3">
   <img src="http://www.livejournal.com/palimg/component/clear.gif" width="3" height="1" alt="" border="0">
  </td>
""";
      print_my_components($p);
   }
"""
  <td width="3">
   <img src="http://www.livejournal.com/palimg/component/clear.gif" width="3" height="1" alt="" border="0">
  </td>
 </tr>
</table>

</body>
</html>
""";
}

Now if you compile this and try making the components switch sides, you'll find it prints correctly in both cases. But if you have your components set to use a navbar, you may have noticed the navbar hasn't been showing up since you started overriding this function. Either we need to find a function that will print out the navbar, or we need to code it into page_layout(Page p). Looking at the component specs shows that there doesn't seem a function to print the navbar, which means we do indeed have to code it ourselves. But, when you look through Page class documentation, you'll notice there is no sign of next or back links. This is because some other function, which is part of a class but written by </a></b></a>xevinx when he coded components, handles the HTML code for these links. So, we can't find this function in the S2 manual. You might think, "That's no problem. Just look at the component specs like we have been so far, and that should tell us the function." However, if you look there, you will not see any function that sounds like it does what we want. This is because that page only lists global functions (ie functions that are not a part of any class). It does not list functions that are a part of a class. So, we have no idea what function prints out the next/back links and can't use it. Although it is possible to reconstruct the rest of the navbar, for simplicity's sake, I am not going to include that in this tutorial because the navbar has lost its main purpose anyway.

Since we've reconstructed all of component's original page_layout(Page p) function that we can, now let's move on to actually adding the graphics at the top. This can be easily done just by adding an image tag above the table that contains your entires and components.

function page_layout(Page p) {
   var string title = $p->title();
"""
<html>
<head>
 <link rel="stylesheet" href="$p.stylesheet_url" type="text/css"/>
 $p.head_content
 """; $p->print_custom_head(); """
 <title>$title</title>
</head>
<body>

<img src="http://www.url.com/picture.gif" width="y" height="x" alt="" border="0">
<table width="100%" cellspacing="0" cellpadding="0" valign="top">
 <tr valign="top" width="100%">
  <td width="3">
   <img src="http://www.livejournal.com/palimg/component/clear.gif" width="3" height="1" alt="" border="0">
  </td>
""";
   if ($*comp_state == "left") {
     print_my_components($p);
"""
  <td width="3">
   <img src="http://www.livejournal.com/palimg/component/clear.gif" width="3" height="1" alt="" border="0">
  </td>
""";
   }
   print_my_entries($p, $title);
   if ($*comp_state == "right") {
"""
  <td width="3">
   <img src="http://www.livejournal.com/palimg/component/clear.gif" width="3" height="1" alt="" border="0">
  </td>
""";
      print_my_components($p);
   }
"""
  <td width="3">
   <img src="http://www.livejournal.com/palimg/component/clear.gif" width="3" height="1" alt="" border="0">
  </td>
 </tr>
</table>

</body>
</html>
""";
}

Obviously, you need to replace http://www.url.com/picture.gif with the URL of your picture. You'll also notice I used the letters "x" and "y" to stand for the height and width of the picture respectively. You'll need to replace those with the number of pixels for your image's height and width. Most image editors should have an option in one of the menus to give you these values. The letters "x" and "y" will show up again in my code shortly. Every place that "x" appears in the code from now on indicates the height of this picture, even if it appears in other places other than this image tag. That goes for "y", and it will also go for "z", when I start using that for a pixel width value.

A lot of you probably feel a bit cheated by this because we spent so much time reconstructing page_layout(Page p) and now the alteration takes 1 line, and others will note, "Your picture above the entries/components stretches when you change the width of the browser window," so let's go a step further and put this picture in a table that goes the full width of the page.

function page_layout(Page p) {
   var string title = $p->title();
"""
<html>
<head>
 <link rel="stylesheet" href="$p.stylesheet_url" type="text/css"/>
 $p.head_content
 """; $p->print_custom_head(); """
 <title>$title</title>
</head>
<body>

<table width="100%" height="x" cellspacing="0" cellpadding="0" valign="top">
 <tr valign="top" width="100%">
  <td>
   <img src="http://www.url.com/picture.gif" width="y" height="x" alt="" border="0">
  </td>
 </tr>
</table>

<table width="100%" cellspacing="0" cellpadding="0" valign="top">
 <tr valign="top" width="100%">
  <td width="3">
   <img src="http://www.livejournal.com/palimg/component/clear.gif" width="3" height="1" alt="" border="0">
  </td>
""";
   if ($*comp_state == "left") {
      print_my_components($p);
"""
  <td width="3">
   <img src="http://www.livejournal.com/palimg/component/clear.gif" width="3" height="1" alt="" border="0">
  </td>
""";
   }
   print_my_entries($p, $title);
   if ($*comp_state == "right") {
"""
  <td width="3">
   <img src="http://www.livejournal.com/palimg/component/clear.gif" width="3" height="1" alt="" border="0">
  </td>
""";
      print_my_components($p);
   }
"""
  <td width="3">
   <img src="http://www.livejournal.com/palimg/component/clear.gif" width="3" height="1" alt="" border="0">
  </td>
 </tr>
</table>

</body>
</html>
""";
}

But this is pointless work because it results in exactly the same thing as before, except using more code. So just for fun, let's put another cell in the table, and put another table in that cell. What does that accomplish? Well, two nifty things about tables is that 1) if you put width="100%" in them, they expand to stretch the full width of whatever they are in. If they are not in anything, this is the whole width of the browser window. If this is another table cell, they fill the table cell as far as that cell can stretch. 2) tables can have a background image, which will tile if it is too small to fill the whole table, or get cut off if it is too big for the table. When you combine these two properties, you get a picture that is not part of the background image for your whole page, but will stretch and shrink with the page as if it were the page background image. If you edit this stretching/shrinking image carefully, you can make it almost impossible to tell that the image is tiling, and you can also make it blend with your background so functionally the picture is part of your background, even if technically it is a separate image. Another nice perk to this method is you can even put text on top of the image if you felt like it. Let's try putting the code in and see what happens.

function page_layout(Page p) {
   var string title = $p->title();
"""
<html>
<head>
 <link rel="stylesheet" href="$p.stylesheet_url" type="text/css"/>
 $p.head_content
 """; $p->print_custom_head(); """
 <title>$title</title>
</head>
<body>

<table width="100%" height="x" cellspacing="0" cellpadding="0" valign="top">
 <tr valign="top" width="100%">
  <td>
   <img src="http://www.url.com/picture.gif" width="y" height="x" alt="" border="0">
  </td>
  <td>
   <table width="100%" height="x" cellspacing="0" cellpadding="0" valign="top" background="http://www.url.com/picture2.gif">
    <tr valign="top" width="100%">
     <td ></td >
    </tr>
   </table>
  </td >
 </tr>
</table>

<table width="100%" cellspacing="0" cellpadding="0" valign="top">
 <tr valign="top" width="100%">
  <td width="3">
   <img src="http://www.livejournal.com/palimg/component/clear.gif" width="3" height="1" alt="" border="0">
  </td>
""";
   if ($*comp_state == "left") {
      print_my_components($p);
"""
  <td width="3">
   <img src="http://www.livejournal.com/palimg/component/clear.gif" width="3" height="1" alt="" border="0">
  </td>
""";
   }
   print_my_entries($p, $title);
   if ($*comp_state == "right") {
"""
  <td width="3">
   <img src="http://www.livejournal.com/palimg/component/clear.gif" width="3" height="1" alt="" border="0">
  </td>
""";
      print_my_components($p);
   }
"""
  <td width="3">
   <img src="http://www.livejournal.com/palimg/component/clear.gif" width="3" height="1" alt="" border="0">
  </td>
 </tr>
</table>

</body>
</html>
""";
}

So then you try compiling all this, and find that the stretchy picture doesn't show up. We forgot to put something in the cell so that webbrowser will actually display that cell. We can fix that by either 1) using that clear gif like we did earlier or 2) if the picture is taller than 1 line of text, put a space into the cell. Let's do the second way. To specify you want a space for a case like this in HTML, you need to use &nbsp;.

function page_layout(Page p) {
   var string title = $p->title();
"""
<html>
<head>
 <link rel="stylesheet" href="$p.stylesheet_url" type="text/css"/>
 $p.head_content
 """; $p->print_custom_head(); """
 <title>$title</title>
</head>
<body>

<table width="100%" height="x" cellspacing="0" cellpadding="0" valign="top">
 <tr valign="top" width="100%">
  <td>
   <img src="http://www.url.com/picture.gif" width="y" height="x" alt="" border="0">
   </td>
  <td>
   <table width="100%" height="x" cellspacing="0" cellpadding="0" valign="top" background="http://www.url.com/picture2.gif">
    <tr valign="top" width="100%">
     <td >&nbsp;</td >
    </tr>
   </table>
  </td >
 </tr>
</table>

<table width="100%" cellspacing="0" cellpadding="0" valign="top">
 <tr valign="top" width="100%">
  <td width="3">
   <img src="http://www.livejournal.com/palimg/component/clear.gif" width="3" height="1" alt="" border="0">
  </td>
""";
   if ($*comp_state == "left") {
      print_my_components($p);
"""
  <td width="3">
   <img src="http://www.livejournal.com/palimg/component/clear.gif" width="3" height="1" alt="" border="0">
  </td>
""";
   }
   print_my_entries($p, $title);
   if ($*comp_state == "right") {
"""
  <td width="3">
   <img src="http://www.livejournal.com/palimg/component/clear.gif" width="3" height="1" alt="" border="0">
  </td>
""";
      print_my_components($p);
   }
"""
  <td width="3">
   <img src="http://www.livejournal.com/palimg/component/clear.gif" width="3" height="1" alt="" border="0">
  </td>
 </tr>
</table>

</body>
</html>
""";
}

Now if you try compiling, you will find that whatever you put for picture2.gif appears and will tile and untile as the size of your browser window. If you want to get fancy, you could even add a picture to the other side of the stretchy one by adding another table cell with a different picture. Let's put that in, although my layout doesn't use the third picture.

function page_layout(Page p) {
  var string title = $p->title();
"""
<html>
<head>
 <link rel="stylesheet" href="$p.stylesheet_url" type="text/css"/>
 $p.head_content
 """; $p->print_custom_head(); """
 <title>$title</title>
</head>
<body>

<table width="100%" height="x" cellspacing="0" cellpadding="0" valign="top">
 <tr valign="top" width="100%">
  <td>
   <img src="http://www.url.com/picture.gif" width="y" height="x" alt="" border="0">
  </td>
  <td>
   <table width="100%" height="x" cellspacing="0" cellpadding="0" valign="top" background="http://www.url.com/picture2.gif">
    <tr valign="top" width="100%">
     <td>&nbsp;</td>
    </tr>
   </table>
  </td>
  <td>
   <img src="http://www.url.com/picture3.gif" width="z" height="x" alt="" border="0">
  </td>
 </tr>
</table>

<table width="100%" cellspacing="0" cellpadding="0" valign="top">
 <tr valign="top" width="100%">
  <td width="3">
   <img src="http://www.livejournal.com/palimg/component/clear.gif" width="3" height="1" alt="" border="0">
  </td>
""";
   if ($*comp_state == "left") {
      print_my_components($p);
"""
  <td width="3">
   <img src="http://www.livejournal.com/palimg/component/clear.gif" width="3" height="1" alt="" border="0">
  </td>
""";
   }
   print_my_entries($p, $title);
   if ($*comp_state == "right") {
"""
  <td width="3">
   <img src="http://www.livejournal.com/palimg/component/clear.gif" width="3" height="1" alt="" border="0">
  </td>
""";
      print_my_components($p);
   }
"""
  <td width="3">
   <img src="http://www.livejournal.com/palimg/component/clear.gif" width="3" height="1" alt="" border="0">
  </td>
 </tr>
</table>

</body>
</html>
""";
}

Finally, since you might be picky about spacing like I am and want some space between the pictures at the top and the entries/components, let's add that in. We can accomplish this using the same clear image as we did before, but since we aren't going to put it in a table, let's surround it by <div> and </div> tags, which just marks off whatever is between them as a section of the page.

function page_layout(Page p) {
  var string title = $p->title();
"""
<html>
<head>
 <link rel="stylesheet" href="$p.stylesheet_url" type="text/css"/>
 $p.head_content
 """; $p->print_custom_head(); """
 <title>$title</title>
</head>
<body>

<table width="100%" height="x" cellspacing="0" cellpadding="0" valign="top">
 <tr valign="top" width="100%">
  <td ><img src="http://www.url.com/picture.gif" width="y" height="x" alt="" border="0"></td >
  <td >
   <table width="100%" height="x" cellspacing="0" cellpadding="0" valign="top" background="http://www.url.com/picture2.gif">
    <tr valign="top" width="100%">
     <td >&nbsp;</td>
    </tr>
   </table>
  </td>
  <td>
   <img src="http://www.url.com/picture3.gif" width="z" height="x" alt="" border="0">
  </td>
 </tr>
</table>

<div>
 <img src="http://www.livejournal.com/palimg/component/clear.gif" width="1" height="3" alt="" border="0">
</div>

<table width="100%" cellspacing="0" cellpadding="0" valign="top">
 <tr valign="top" width="100%">
  <td width="3">
   <img src="http://www.livejournal.com/palimg/component/clear.gif" width="3" height="1" alt="" border="0">
  </td>
""";
   if ($*comp_state == "left") {
      print_my_components($p);
"""
  <td width="3">
   <img src="http://www.livejournal.com/palimg/component/clear.gif" width="3" height="1" alt="" border="0">
  </td>
""";
   }
   print_my_entries($p, $title);
   if ($*comp_state == "right") {
"""
  <td width="3">
   <img src="http://www.livejournal.com/palimg/component/clear.gif" width="3" height="1" alt="" border="0">
  </td>
""";
      print_my_components($p);
   }
"""
  <td width="3">
   <img src="http://www.livejournal.com/palimg/component/clear.gif" width="3" height="1" alt="" border="0">
  </td>
 </tr>
</table>

</body>
</html>
""";
}

And there you have it, our final version of page_layout().
Subscribe

  • Post a new comment

    Error

    Anonymous comments are disabled in this journal

    default userpic

    Your reply will be screened

  • 32 comments
Previous
← Ctrl ← Alt
Next
Ctrl → Alt →
Previous
← Ctrl ← Alt
Next
Ctrl → Alt →