Up and Running with Frontier Web Site Management
by Matt Neuburg
Author of the book Frontier: The Definitive Guide

Prev | TOC | Next


Handling Images

Images in your site table

Images are GIFs and JPEGs that you want to use in your Web site. Since the whole idea of using Frontier to manage your site is that the entire site lives inside Frontier's database until it is rendered, Frontier provides a way to bring GIFs and JPEGs into the site table.

When Frontier renders a page with an image in it, it creates the GIF or JPEG file on disk, and generates the HTML <img> tag for it, by way of a handy macro.

Loading an image

Let's try it out. If you happen to have a GIF lying about, you can use it (or just grab one off the Web); I'm going to assume you're using "siteScriptedWithFrontier.gif", which is included with UserLand's version of the tutorial (which comes with the Frontier download), in the "images" folder.

First, select the #images subtable of myFirstSite. Do not select within the table; make sure the line representing the table itself is selected. This is so that Frontier will know where to put the image. Images should be placed in an #images subtable of the site table.

Next, from the Web menu, choose Load Image File, and when the file dialog appears, select and open this GIF. After a moment, the table websites.myFirstSite.#images opens, and it contains, in what is called "binary" form, a copy of the GIF, which is now called simply "siteScriptedWithFrontier". That's long, so now rename it "site".

The imageref macro

Now go into myFirstSite.#template, and add a line just before the pageFooter line. The new line should say:

{imageRef("site")}

Now go to myFirstSite.default and preview it in the browser. Presto! The GIF shows up in your Web page.

Everything has been taken care of for you by the imageRef macro call. First, imageRef created the GIF file on disk in an Images folder; then, it returned an <img> tag referring to the newly created file, and this tag was substituted for the macro call in the HTML for your page.

(The original GIF from which you loaded the picture into the database to begin with is completely out of the story at this point; you now have a copy inside Frontier's database that can be generated at any future time, and that's all you need henceforward.)

Be careful to get the syntax right when you write an imageRef macro call. Common errors include leaving out the quotes and omitting the final parenthesis or curly brace.

Imageref options

You probably know that an <img> tag can have a number of parameters, such as: alt, align, height, width, border, hspace, vspace, usemap, ismap, lowsrc, and rollsrc, as well as name and id.

The imageRef script automatically sets the height and width correctly, and asks for a border of zero (no border). Frontier also supplies a reasonable alt value so that some text will appear in case the reader isn't receiving pictures. Frontier doesn't automatically add any of the other parameters.

You are free to supply values for any of the parameters that Frontier doesn't automatically add (in which case it will add that parameter), and to override the value for any parameter that it does.

To supply a value, use the parameter name, a colon, and the value, delimited by commas -- except that for alt, the name is "explanation". So, for instance, this would be a legitimate call:

{imageRef("site", explanation:"Logo", align:"middle")}

You can have an #images table in each subtable of your site. The imageRef script will look first in the #images table that's in the same table as the page we're rendering (if there is one); but if it doesn't find your image there, it looks for an #images table in the containing table, and so on until it's reached the top level of the site.

You can take advantage of this to give your images organization, and also to give them hierarchical power just like directives: an image in the #images table that's together with the page we're rendering "overrides" an image with the same name at a higher level.

Another option is to keep the image anywhere you feel like in the database. For instance, we might keep our GIF in user.html.images. Then we could say:

{imageRef(@user.html.images.site)}

Notice that the syntax is different: there's a "@", and no quotes around the name of the database entry. When you use this syntax, Frontier doesn't put the disk version of the image into an images folder; it just puts it along with the HTML text file it's making.

A little background

In the case of background images, you don't need to use imageRef or a macro call. Just define a #background directive.

Just as with imageRef, its value can be the string name of an image in an #images table, or (using the "@" syntax) anywhere in the database -- for example you might define #background as "site" or as @websites.samples.["#images"].cactus (neither is a very good background image, though!).

The background parameter of the <body> tag is then generated for you, and the image is written from the database out to disk.

But you could alternatively give, as the value of #background, a string which is the actual URL of the image to be used, just as you would write it if you were creating the <body> tag yourself; it is then up to you to ascertain that the actual image file exists (it isn't created for you out of the database). This is particularly useful when the background image exists elsewhere on the Web, not in your site.


Prev | TOC | Next

All text is by Matt Neuburg, phd, matt@tidbits.com.
For information about the book Frontier: The Definitive Guide, see my home page:
http://www.tidbits.com/matt
All text copyright Matt Neuburg, 1997 and 1998. ALL RIGHTS RESERVED.
No one else has any right to copy or reproduce in any form, including electronic. You may download this material but you may not post it for others to see or distribute it to others without explicit permission from the author.
Downloadable versions at http://www.ojai.net/matt/downloads/webTutorial.hqx and http://www.ojai.net/matt/downloads/webTutorial.zip.
Please do not confuse this tutorial with a certain other Frontier 5 tutorial based upon my earlier work.
This page created with Frontier, 2/11/2000; 6:59:54 PM.