[Grok-dev] Mini tutorial -- accessing static resource in page
design
Sebastian Ware
sebastian at urbantalk.se
Fri Jul 6 11:07:21 EDT 2007
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
More information about the Grok-dev
mailing list