- Python Pyramid - Discussion
- Python Pyramid - Useful Resources
- Python Pyramid - Quick Guide
- Python Pyramid - Deployment
- Python Pyramid - Security
- Python Pyramid - Logging
- Python Pyramid - Testing
- Command Line Pyramid
- Creating A Project Manually
- Python Pyramid - Package Structure
- Python Pyramid - Project Structure
- Python Pyramid - Creating A Project
- Python Pyramid - Cookiecutter
- Pyramid - Using SQLAlchemy
- Python Pyramid - Message Flashing
- Python Pyramid - Events
- Python Pyramid - Sessions
- Python Pyramid - Response Object
- Python Pyramid - Request Object
- Python Pyramid - Static Assets
- Pyramid - HTML Form Template
- Python Pyramid - Templates
- Python Pyramid - Route Prefix
- Python Pyramid - View Configuration
- Python Pyramid - Url Routing
- Pyramid - Application Configuration
- Python Pyramid - Hello World
- Pyramid - Environment Setup
- Python Pyramid - Overview
- Python Pyramid - Home
Selected Reading
- Who is Who
- Computer Glossary
- HR Interview Questions
- Effective Resume Writing
- Questions and Answers
- UPSC IAS Exams Notes
Python Pyramid - Static Assets
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 cpent 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 apppcation 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()"> <span id="time" style="text-apgn:right; width="100%"></span> <h1><span id="ttl">{{ name }}</span></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.
Advertisements