I've been researching this a long time and experimenting and I can't seem to figure out what the best way to go about accomplishing this. I know I'm doing it wrong so some clarification as well as some quick examples would help a lot.
I was wondering about using a bootstrap3 theme from https://wrapbootstrap.com/ with Django. I researched into the django-bootstrap3 and django-bootstrap-themes packages. On the github page of django-bootstrap-themes it says it's compatible with bootswatch. I don't like their themes so I was wondering if it was compatible with wrapbootstrap.com themes. The themes I would select from wrapbootstrap.com are Responsive HTML themes. I wanted to know if out of personal experience anyone knows which of these packages are best for using themes from wrapbootstrap.com with django.
I understand it is possible to just take from the theme the stylesheets, scripts, place them into their respective folders in static, and turn the HTML base into a base template as well as other pages. Then install bootstrap from a CDN. I know this is also possible with django-bootstrap3. But I can't find the answer anywhere as to what is currently the best way to go about integrating one of those themes and twitter bootstrap3 into a Django website, and some quick examples of doing this.
Thanks, and any advice for doing so would help a ton.
The package django-bootstrap3 is a nice utility app which allows you to produce less HTML markup in your templates that would be otherwise required for bootstrap to work. It uses some additional template tags for this purpose.
I find this package a nice one and sometimes I use it, but it is usually after you have got involved well into bootstrap that you appreciate it.
The package django-bootstrap-themes seems to be an app which it too offers some template tags like the former package, but apparently less. But it also allows you to easily integrate themes from Bootswatch into your Django templates, which is nice if you find those templates appealing. Other than that I personally find no other reason to use it. But again, both packages could be used together if it fits you.
Some examples:
In order to get bootstrap going in your templates without any other package, you would have to include the following in your base html file:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">
{# HTML5 shiv and Respond.js for IE8 support of HTML5 elements and media queries #}
{# WARNING: Respond.js doesn't work if you view the page via file:// #}
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
And at the bottom:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
With django-bootstrap3 this becomes:
{% load bootstrap3 %}
{% bootstrap_css %}
{% bootstrap_javascript %}
But some other markup gets very much simplified. For instance a bootstrap form (see the official docs example) would become easy as:
<form action="/url/to/submit/" method="post" class="form">
{% csrf_token %}
{% bootstrap_form form %}
{% buttons %}
<button type="submit" class="btn btn-primary">
{% bootstrap_icon "star" %} Submit
</button>
{% endbuttons %}
</form>
To load bootstrap with django-bootstrap-themes:
{% load bootstrap_themes %}
{% bootstrap_script use_min=True %}
And apparently this is how you would use one of the themes from bootswatch:
{% bootstrap_styles theme='cosmo' type='min.css' %}
To sum up, if you wish to use any other ready-made bootstrap theme in your templates, you would still need to go with the standard approach that you describe in your question, possibly using some of the above tools on top.
Related
I have a regular website where HTML5, CSS3, JQUERY and static images have been used.
I also have a Blog written in Django and I would like to integrate it in the website.
I am really new to Django so I was wondering which is the best approach to use.
Should I integrate the website code as part of the Django project or there are some other solutions?
thanks!
You have 2 ways of integrating your current site with Django.
1) You can write API with DjangoRestFramework and make requests with jQuery AJAX in order to get content from Django.
2) You can use your current HTML files as your Django project templates for rendering content from Django.
You can use a Django template. The template defines placeholders and various bits of basic logic (template tags) that regulate how the document should be displayed. Usually, templates are used for producing HTML, but Django templates are equally capable of generating any text-based format.
If you've used a templating engine like ''. They look somehow similar.
<html>
<head>
<title>Ordering notice</title>
</head>
<body>
<h1>Ordering notice</h1>
<p>Dear {{ person_name }},</p>
<p>Thanks for placing an order from {{ company }}. It's scheduled to ship on {{ s\
hip_date|date:"F j, Y" }}.</p>
<p>Here are the items you've ordered:</p>
<ul>
{% for item in item_list %}
<li>{{ item }}</li>{% end for %}
</ul>
{% if ordered_warranty %}
<p>Your warranty information will be included in the packaging.</p>
{% else %}
<p>
You didn't order a warranty, so you're on your own when the products inevitably stop working.
</p>
{% endif %}
<p>Sincerely,<br />{{ company }}</p>
</body>
</html>
check here for more details https://djangobook.com/django-templates/
I am trying to set the background image using jinja2. I have managed to serve my file from my dev server and can post the image in the document, but I want it to form a nice background with everything else on top.
As an example, I tried this :
{% extends "layout.html" %}
{% block body %}
{% if current_user.is_authenticated %}
{% if commPageData.background_image %}
<body background="{{'/images/'+commPageData.background_image}}">
{% else %}
<body>
{% endif %}
A thing
</body>
I have a css file and a layout file that gives the default behaviour for a template. How can I have a nice background image which I am serving?
You seem to be trying to tell the front end to use application routing without passing it the right commands. I'm assuming you're using Flask. Really, there are two ways (that I can think of) to slice this bread, and it just depends on you. The first is just using standard html and not embedding python to route the app to look for the file, and looks like:
<body background="/path/to/image.jpg">
But, if you want to take advantage of the framework and the template, then you should use the built in method url_for
It looks something like this:
<body background="{{ url_for('static', filename=commPageData.background_image) }}">
'static' being the directory in the application where this image lives.
Now, I'm not sure where commPageData.background_image is coming from in your app. My code snip assumes it is being served as a value it will recognize if passed back to the logic, if that makes sense, and it needs to be where you tell the url_for method looks for it, even when dynamically generated. If you actually have a specific image you want to render as the background, it needs to be specified appropriately:
<body background="{{ url_for('static', filename='image.jpg') }}">
Of course, has been deprecated in HTML5 and may not render appropriately in many browser. It is much preferred to use CSS instead with
<body style="background:url({{'images/'+commPageData.background_image}});">
or put it directly in your CSS file
I'd like to make a simple website running on the GAE framework/service. It's very small, and i don't really need the whole powerful Django framework, and thus i'm opting for the google-made Webapp2 framework, coupled with the Jinja2 templating langage.
I'm coming from a really bare-PHP-and-HTML-oriented background, so I have a hard time adjusting to the way a real framework works. My current greatest interrogation comes from how the templating system and the request handlers are working together, especially if the the page's template has several "dynamic" elements.
I'll first explain what I used to do in PHP, so you may better understand what i want to achieve.
Let's say I want a website with :
a page title depending on the page being visited, eg : "Mysite.com | Control Panel"
a dynamic menu bar, that may change depending on the user's profile or logged-in status
obviously, a page body that completely depends on the page being viewed
The way i'd do it in PHP is thus here compressed into a simple example, index.php:
<?php
/*here use the $_GET or $_POST variable, and the $_SESSION variable
to figure out who's connected, which page is being displayed,
and store those values in global variables, for the
included modules to use */
include('page_header.php'); // renders the whole <head> </head> tag and its content
echo "<body>";
include('views/menu.php'); //generates the menu, displays it
switch($page_name){
case "home":
include('home.php'); //renders the page body for the homepage
break;
case "articles":
include('home.php'); //renders the page body for the blog articles listing
break;
case "guestbook":
include('home.php'); //renders the page body for the guestbook
break;
}
echo "</body>";
Each included module, using variables from the script that called them (index.php), and the $_POST, $_GET, $_SESSIOn superglobals, figures out what to display, and renders it to HMTL. here index.php also does some kind of very basic routing, using the switch statement.
Now,back to webapp2 and jinja2 framework:
I understand that, to have a modular approach to build a web page with Jinja, you need to use block structures, and extend those blocks. Thus, to build a similar page to the previous PHP example, i made the following template base.html:
<html>
<head>
<link rel="stylesheet" href="/static/css/reset.css">
{% block title %}
{% endblock title %}
</head>
<body>
<div class="menu">
{% block menu %}
{% endblock menu %}
</div>
<div class="body">
{% block content %}
{% endblock content %}
</div>
</body>
</html>
What i don't understand, is how you you'll build the different Handlers that, in turn, generate the context that Jinja will use to render the blocks, and avoiding redundency.
**Also, can I use several different template files that, alone, extend only one block (eg: menu.html, header.html, body_home.html, body_articles.html, ...) **
You can use as a base to answer, this example, from a small example that almost taught me all i needed to know.
Thanks for any help provided, sorry for any grammatical errors, english's not my native tongue.
There's a feature in jinja2 called macros which is pretty much a parameterized include.
So if the includes should be parametized, you would do:
{% macro menu(params) -%}
do something
{%- endmacro %}
And call the macro in your template:
<div> menu('bar') </dib>
If it is not necesary to provide parameters just leave it as static html in the parent template.
For the handler you can follow App Engine hello world example, just use your link to guide you to load jinja's enviroment.
I know you want to translate the php example, but try to do as much logic as posible in your handler instead of the template.
To your second question, yes you can extend just one block if you want, and if you need the parents content there's a {{super()}} block to get them.
I read several posts about which bootstrap package use (mainly Crispy-form VS django-toolkit-integration)
But I'm pretty new to Django and I still don't understand what is the real need about these packages.
I mean, Twitter bootstrap is nothing more than css/js files.
So, I thought using bootstrap by linking my Django forms and field to HTML classes (using widgets for .py forms, and directly in .html templates for other fields)
So, what are the benefits of these packages? Is it just convenience or am I really missing something if I choose to not use it?
Thank you for help!
It is just a convenience for forms. It provides you with template tags. Django provides two methods as_p, as_ul and as_table but none of them works smoothly with bootstrap. So you use something like instead.
{% extends 'base.html' %}
{% load crispy_forms_tags %}
{% block content %}
{% form|crispy %}
{% endblock %}
It also provides some convenient classes to configure in the Django Forms.
So, it is not necessary but it will save you some hassles to configure forms. You can start without them and when the problems come, you will find them useful.
As you yourself said, Twitter Bootstrap are only CSS and JS files that you will apply in your HTML structure and get a new face of its elements. The Bootstrap provides a number of ready-made elements and styles.
Many websites come ready structures and even site templates ready using Bootstrap, as: Bootsnipp, Bootswatch, Wrapbootstrap and many others. The big advantage I see is not wasting time with styles (I'm not disparaging the designers) and focus more on programming.
My final note is: give a chance to the Twitter Bootstrap, it is very useful in creating models and styles faster, more focused on the end product.
Some of this packages are made to be able to write your CSS in Less (the language), and compile them automatically. Also, some may add compression and concatenation of assets.
As Bootstrap is nothing more than a bunch of CSS and Javascript files (and I don't use Less) so far all I need is form integration, which is easily achieved by this:
NOTE: This is a very specific example of my own code, but you get the idea.
<div class="row">
<div class="span6 offset3">
<form id="form-history" class="form-horizontal text-center"
action="/somepath/" method="post">
<fieldset>
<legend><h3>History</h3></legend>
{% for field in form %}
<div class="row">
<div class="span3">{{ field.label }}</div>
<div class="span3">{{ field }}</div>
</div>
{% endfor %}
<div class="row pull-right">
<button class="btn btn-primary btn-large" type="submit">
<i class="icon-ok icon-white"></i> Find
</button>
</div>
</fieldset>
</form>
I'm very new to jinja2 and the use of templates in general so I was wondering if there's an easy way to load an external javascript. I was thinking of using:
{% block javascript %}
<script src="myscript.js"></script>
{% endblock %}
But I can't help to ask:
Is there a way of loading this script directly from within a template directive?
You have two choices here -- the first is the way you did it -- simply add the appropriate markup into a template (or a block if you want to be able to override it in templates which extend your first template.)
The second way is to use Jinja2's include function:
{% block javascript %}
<script type="text/javascript">
{% include "myscript.js" %}
</script>
<!-- The contents of myscript.js will be loaded inside the script tag -->
{% endblock %}
The advantage of using include is that Jinja2 will process your javascript before including it -- which means you can have variables in your javascript that change depending on the state of your program.
The disadvantage of using include in this manner is the same -- your .js file will be run through Jinja2 before being sent out -- if you are not using dynamic content you will just be processing the file unnecessarily for every request -- and if you are using a javascript templating library with Jinja2 syntax then trouble is likely.
This question is quite old, but there is another way of doing it that might be interesting as well. I found it while working with Jinja2 and flask.
I used the url_for() and it works fine:
{% block javascript %}
<script src="{{ url_for('static',filename='myscript.js') }}"></script>
{% endblock %}
And I have my myscript.js in my static folder. Specified in Jinja2 environment, or by default in flask.