bootstrap_find_resource do not serve local files - python

I am using Flask-Bootstrap package for my Flask application, however when I am creating a template as described in docs:
{% extends "bootstrap/base.html %}
<!-- Rest of the template is here -->
page source displays this:
<!-- Bootstrap -->
<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
I don't know why this resource is taken from cdnjs.cloudflare.com instead of local files in Flask-Bootstrap package.
cdnjs.cloudflare.com is referred in more places in page source code.
Can I somehow change this behavior in my template, to make it serve resources from local directory?
base.html template uses bootstrap_find_resource template filter, so I guess it have something to do with CDN settings, how can I change them?

Add this to your configuration :
app.config['BOOTSTRAP_SERVE_LOCAL'] = True
Check out Flask-Bootstrap link for more info.

Related

xhtml2pdf - loading static CSS files and images in Django

How do I use xhtml2pdf in Django to create a PDF document from an HTML file, using my css stylesheet and bootstrap styles?
The xhtml2pdf docs describe adding stylesheets / images via a link_callback function.
I tried the below:
1: I copied the "Using xhtml2pdf in Django" code from the docs into my project:
https://xhtml2pdf.readthedocs.io/en/latest/usage.html#using-xhtml2pdf-in-django
2: Created an html template. In the html template, I use {% load static %} tag along with <link rel="stylesheet" href="{% static 'subs_app/css/main.min.css' %}">
I get the following error:
SuspiciousFileOperation at /invoice/pdf/1 The joined path
(C:\static\subs_app\css\main.min.css) is located outside of the base
path component (C:\Users\office\dev\subs\subs_project\static)
3: I also tried ditching the {% load static %} method and linking to the stylesheet directly via the relative path, but this doesn't work either.

Using a Bootstrap theme with Flask-Bootstrap

I'm new to UI web development with Flask and have tried some sample projects with Flask-Bootstrap. Is it possible to use a custom Bootstrap "theme" with Flask-Bootstrap? I'd like to use this theme for my website: https://github.com/kristopolous/BOOTSTRA.386
But because I'm relatively new to UI stuff/JS/CSS, I can't tell if it's possible to use the Bootstrap.386 theme with Flask-Bootstrap.
Can anyone with experience tell me this if this is technically feasible and maybe point me towards a tutorial or something where someone has done similar? I haven't had much luck with Googling.
Flask-Bootstrap has a built-in base template with some pre-defined macros, you can rewrite the styles macro to use your own Bootstrap CCS files.
Suppose you have downloaded the Bootstrap theme file, it will contain the main CCS file called bootstrap.min.css. Put this file to your static folder. Then overwrite the styles macro in your base template to include it:
{% extends 'bootstrap/base.html' %}
{% block styles %}
<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='path/to/your/bootstrap.min.css')}}">
{% endblock %}

Django include tag

We are using django with python. I am facing a problem with include tag. I want to include a header in all modules of application.
In application templates directory contains all the html files with subfolders of modules. In any sub-module if I am creating header html and including this tag in base.html then it is working.
But if I place the header html in parent directory, its not working for any sub-modules.
I even tried {% include "../header.html" %} in html with django template, but no luck.
The project structure fo my application, in which root directory I have templates, static, handlers folder. Inside templates I have sub1 and sub2 folders. In sub1 I have base.html and in templates parent directory base.html, header.html, index.html. See below:
Root
----templates
----------Sub1
-----------------base.html
----------Sub2
----------base.html
----------header.html
----------index.html
----static
----handlers
Django templates include tag does not recognize relative paths. You need to give it the path under your templates directory, so try using the following instead:
{% include "Sub2/header.html" %}
Update:
Seems like your "header.html" are on the "Sub2" level and not inside it i.e. it's directly under templates directory So you should try:
{% include "header.html" %}
I am not sure if I have understood you. Just try {% include "header.html" %}, the search of django template should start from template folder.
The template folder is configured in Django config file "setting.py".
TEMPLATE_PATH = os.path.join(BASE_DIR, 'templates')
In addition, I have a project which can seprate Django template develop from the back-end using webpack and support jade, es6 and scss. The readme is in chinese :(, but you can run the project and check the source code.
https://github.com/njleonzhang/webpack-django-starter

HTML Image Insertion Django

I'm working to build a django web application. I'm using adobe brackets for the html and I'm trying to use an image from my folders on the website. The image appears during the brackets simulation, but not during django runserver.
here is my folder directory:
mysite-
Images-
livestream-
helloworld.jpg
templates-
livestream-
helloWorld.html
This is a very simplified version of the site, but you get the idea.
My html code asks for the image:
<img src="../../Images/livestream/helloworld.jpg" alt="helloWorld" width="590" height="269">
when I run the django server it returns:
[18/Jul/2013 09:11:40] "GET /livestream/Images/livestream/helloworld.jpg HTTP/1.1" 404 2605
Does anyone know how to fix this issue?
This has to do with how your staticfiles app related settings are set up for your project.
You should also use the static template tag in order to fetch your static media.
For example, assuming that your structure under the location of any filepath within the STATICFILES_DIRS tuple is the following:
{{STATICFILES_ROOT_DIR}}/Images/livestream/helloworld.jpg
you can fetch the static file using:
{% load static from staticfiles %}
{% static "Images/livestream/helloworld.jpg" as myimg %}
<img src="{{ myimg }}" alt="helloworld" />
Why don't you set your {{ STATIC_URL }} in your settings, as per the docs to point to your Images folder and then just type in
<img src="{{ STATIC_URL }}livestream/helloworld.jpg" alt="helloWorld" width="590" height="269">
This is the standard approach to manage static files, and will turn out useful in the future as well

How to modify the admin template in django

i use the django's default admin for the admin site, and i create a app named "project"
Then in the project change form, i want to show and dynamic image, i plan to draw some charts using the google API, so i must put change the html form to add a in the html file as below:
So my question is that how can i modify the django's default templates for this page, i can not find the form in templates/ folder, is this page named "change_form"? "change_list"? or some other names. If so ,how do i only change the form for app "Project" since maybe i will create some other apps in the same level with "project"
You need a place for static files which is valid.
Then place an admin directory inside that static files directory.
Then add your addname as a directory like this:
Root
yourapp
static
admin
yourapp
file_to_overwrite
Find your Django files. Then go to:
contrib/admin/templates/admin
On OSX this would be:
/Library/Python/2.7/site-packages/django/contrib/admin/templates/admin
Copy the file you want to overwrite to yourapp directory like above.
EDIT:
If you want to change a single form for a single app:
For example:
Root
yourapp
static
admin
yourapp
modelname
change_form.html
Only the model "modelname" will be affected by this html-file.
A good way to do this as the docs suggests is go with #Rickard Zachrisson answer but instead of copying it use the "extends" block and import super.
this should be a better approach since you are not directly overriding the admin templates but instead inheriting them.
This is how the docs suggests to do it when inserting JS for example:
{% extends 'admin/change_form.html' %}
{% load static %}
{% block admin_change_form_document_ready %}
{{ block.super }}
<script type="text/javascript" src="{% static 'app/formset_handlers.js' %}"></script>
{% endblock %}

Categories

Resources