”;
Often it is required to include in the template response some resources that remain unchanged even if there is a certain dynamic data. Such resources are called static assets. Media files (.png, .jpg etc), JavaScript files to be used for executing some front end code, or stylesheets for formatting HTML (.css files) are the examples of static files.
Pyramid serves these static assets from a designated directory in the server”s filesystem to the client”s browser. The add_static_view() method of the Configurator object defines the name of the route and path for the folder containing the static files such as images, JavaScript, and CSS files.
As a convention, the ”static” directory is used to store the static assets and the add_static_view() is used as follows −
config.add_static_view(name=''static'', path=''static'')
Once the static route is defined, the path of static assets while using in HTML script can be obtained by request.static_url() method.
Static Image
In the following example, Pyramid logo is to be rendered in the logo.html template. Hence, “pyramid.png” file is first placed in static folder. It is now available for using as src attribute of <img> tag in HTML code.
<html>
<body>
<h1>Hello, {{ name }}. Welcome to Pyramid</h1>
<img src="{{request.static_url(''app:static/pyramid.png'')}}">
</body>
</html>
Example
The application code updates the configurator with add_static_view(), and defines index() view renders the above template.
from wsgiref.simple_server import make_server
from pyramid.config import Configurator
from pyramid.response import Response
from pyramid.view import view_config
@view_config(route_name=''index'', renderer=''templates/logo.html'')
def index(request):
return {''name'':request.matchdict[''name'']}
if __name__ == ''__main__'':
with Configurator() as config:
config.include(''pyramid_jinja2'')
config.add_jinja2_renderer(".html")
config.add_route(''index'', ''/{name}'')
config.add_static_view(name=''static'', path=''app:static'')
config.scan()
app = config.make_wsgi_app()
server = make_server(''0.0.0.0'', 6543, app)
server.serve_forever()
Output
Run the above code to start the server. Use http://localhost:6543/Guest as the URL in your browser. Here ”Guest” is the path parameter picked up by the view function in matchdict object and passed to the logo.html template as the context. The browser displays the Pyramid logo now.
Javascript as Static Asset
Here is another example of static file. A JavaScript code hello.js contains a definition of myfunction() to be executed on the onload event in following HTML script (templateshello.html)
<html>
<head>
<script src="{{request.static_url(''app:static/hello.js'')}}"></script>
</head>
<body onload="myFunction()">
<div id="time" style="text-align:right; width="100%"></div>
<h1><div id="ttl">{{ name }}</div></h1>
</body>
</html>
Example
The hello.js code saved in static folder is as follows −
function myFunction() {
var today = new Date();
var h = today.getHours();
var m = today.getMinutes();
var s = today.getSeconds();
var msg="";
if (h<12)
{
msg="Good Morning, ";
}
if (h>=12 && h<18)
{
msg="Good Afternoon, ";
}
if (h>=18)
{
msg="Good Evening, ";
}
var x=document.getElementById(''ttl'').innerHTML;
document.getElementById(''ttl'').innerHTML = msg+x;
document.getElementById(''time'').innerHTML = h + ":" + m + ":" + s;
}
Output
The function detects the value of current time and assigns appropriate value to msg variable (good morning, good afternoon or good evening) depending on the time of the day.
Save hello.js in static folder, hello.html in templates folder and restart the server. The browser should show the current time and corresponding message below it.
”;