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. Save the GIF below to disk. (Right-click, or click-and-hold, or drag to the desktop -- whatever makes sense with your browser and platform.)

From the Web menu, choose Load Image File..., and when the file dialog appears, select this GIF. After a moment, the table user.html.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."

You could leave the GIF here, but it is probably more convenient to keep it in your site. So, do this. Go to myFirstSite and choose New Sub-Table from the Table menu.

Call the new table "images" (without the quotes); the exact name is important. Open the myFirstSite.images table. Go back to user.html.images and select and Cut the "site" entry; go back to the myFirstSite.images table and Paste. (Get rid of the "item #1" entry if it is still there.)

There's a quicker way to do this. By default images are loaded into the user.html.images table, but if you have a table selected in the odb when you choose the Load Image File... command the image will be loaded into that table. So in the future one would select websites.myFirstSite.images before importing the graphic -- that way you can save the steps of cutting and pasting.

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 view 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 could even delete it if you wanted to, since you now have a copy inside Frontier's database that can be generated at any future time.)

Be careful to get the syntax right in the 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, namely: alt, align, height, width, border, hspace, vspace, usemap, and ismap. The imageRef macro automatically sets the height and width correctly, and asks for a border of zero (no border).

You are free to set the values for alt, hspace, align, and usemap; if you don't, Frontier supplies a reasonable alt value so that some text will appear in case the reader isn't receiving pictures, and it supplies no value for the others.

To supply a value, use its 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 macro will look first in the images table that's in the same table as the page we're rendering; but if it doesn't find your image there, it looks for an images table in the table containing them, 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. Suppose we had left 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.

Something parallel is done with background images. There is a #background directive that works much like the imageRef macro.

To use a background image in your site, import a gif into your website. Then create a #background directive that's the name of the image, minus the file extension.

For instance, this web tutorial has #background directive that reads "bgYellow" -- and the background image is written to disk as bgYellow.gif, and it's automatically placed in the images folder.