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

[Sebastian Ware]

There was a bug here... The example on how to link a CSS-file was  
wrong. It's updated below.

###################################################
### 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"
         tal:attributes="href static/style.css">

The framework replaces "static" with the full URL to 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


6 jul 2007 kl. 16.42 skrev Sebastian Ware:

> ###################################################
> ### 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
>
> _______________________________________________
> Grok-dev mailing list
> Grok-dev at zope.org
> http://mail.zope.org/mailman/listinfo/grok-dev