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.
Related
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 %}
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.
I am using Django and i want to import an image to my about.html file
Both the picture and the about.html are in the same file, see the picture down
i am trying to insert the image like this, but i get a broken picture icon
<img src="templates/WebApp/rolomatik_logo_crna_verzija.png"
Any suggestions please?
You cannot insert an image in that way. You need to keep that in a static folder.
Create a folder named static and place your image inside it.
Then use {% load static %} at the top of your template.
Your img tag should look like this: <img src="{% static "rolomatik_logo_crna_verzija.png" %}" />
For more details refer: https://docs.djangoproject.com/en/1.11/howto/static-files/
You should create a folder static in your app. Inside that you have to create another folder with name same as your app name. In your case it should be SmartApp/static/SmartApp/ and put your image in the folder.
After this use {% load static %} at the top of your template,inside your <head> tag. After this you can use the image like this:
<img src="{% static 'SmartApp/rolomatik_logo_crna_verzija.png' %}" >
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
I'm using Sphinx to document a python project. I'm using the canvas to visualize some results in the documentation. My documentation needs to support Firefox and IE. I need to include the excanvas.js library in the documentation, but only if the browser is IE. How can I conditionally include this library so the relative paths are correct?
Example....
Documentation folders
/sphinx
/source
working_test_page.rst
test_block.html
/nested
non_working_test_page.rst
test_block_copy.html
/_templates
layout.html
/_static
excanvas.js
...
Per the notes at Sphinx' documentation pages, the file layout.html was modified. This modification was to insert a conditional block of HTML in the template head which adds excanvas.js on if the page is viewed on IE.
{% extends "!layout.html" %}
{% block extrahead %}
<!--[if IE]>
<script type="text/javascript" src="_static/excanvas.js"></script>
<![endif]-->
{% endblock %}
The file working_test_page.rst and non_working_test_page.rst have the same contents. The contents follow. The only difference is the location of the files.
Script Test
==========
.. raw:: html
:file: test_block_1.html
The file test_block.html and test_block_copy.html have the same contents. The two files contain a some HTML which sets up a canvas and uses it.
When sphinx compiles the rst files into the HTML build directory, the following files structure results:
/sphinx
/build
working_test_page.html
/nested
non_working_test_page.html
/_static
excanvas.js
...
The file working_test_page.html has the correct path to excanvas.js and loads correctly. The file non_working_test_page.html has the wrong path to excanvas.js and does not load correctly.
How can excanvas.js be conditionally loaded so that the relative paths in the sphinx documentation are correct regardless of the location of the rst files?
The conditional link will be formatted properly if the helper function pathto(...) is used to modify the conditional HTML snipet. See documentation on pathto(file,1).
{% extends "!layout.html" %}
{% block extrahead %}
<!--[if IE]>
<script type="text/javascript" src="{{pathto("_static/excanvas.js", 1)}}"></script>
<![endif]-->
{% endblock %}