[Grok-dev] Mini tutorial -- accessing static resource in page design

Sebastian Ware sebastian at urbantalk.se
Fri Jul 6 10:42:49 EDT 2007


###################################################
### Newbie Static Files in Page Design Tutorial ###
###################################################

*** Introduction ***
Static files are files that reside in your file system. This is a
typical place to put any graphics and css files that you use in
your page design.

*** Setup ***
You need a directory called "src/your_app/static". It should normally
be created when you create your Grok project. This directory
will hold your file system files, called static files.

*** Example ***
To access "style.css" that you have stored in the static directory you
put the following in your page template:

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

The framework understands in this case that the file resides
in the static directory.

In the CSS-file you simply refer to images as you would normally do.
The following references the file "static/images/tabs_tab.png":

   background: #ffffff url('images/tabs_tab.png');

The framework understands that the path is relative to the physical
"static" directory in your file system.

If you want access the same image from an <img> tag in your
page template, you would write:

   <img tal:attributes="src static/images/tabs_tab.png">

In this case "static" is replaced by the full URL to the static
directory. (Take a look at the page source in your browser)

If you want to access the same image from the style attribute, you
will need a slightly more elaborate version on the same theme:

   tal:attributes="style string:background: url('${static}/images/ 
tabs_tab.png')"

This is string expression where "${static}" is converted into a full  
URL. Note
that if you want to have more statements in your style attribute, you  
need to
use double semicolons ";;" to separate them. A single semicolon is  
used to
define several attributes in one expression (read more about TAL).

*** Learning More ***
More on TAL http://www.zope.org/Documentation/Books/ZopeBook/ 
2_6Edition/AppendixC.stx

Mvh Sebastian



More information about the Grok-dev mailing list