I'm trying to serve an image on my Django web app, but it seems to be giving me a broken image link. I put the picture I want to serve in the static folder but the hello.html is in templates folder , hoping that would work although it didnt. Here is the hello.html
{% load static %}
<html>
<body>
<form method="post" enctype="multipart/form-data">
{% csrf_token %}
{{ form }}
<input type="submit" value="Upload">
<p>Hello</p>
{% load static %}
<img src="{% static "filecomparison/Example.jpg" %}" alt="My image"/>
</form>
</body>
</html>
This is what I see on the website
I'm new to django and I've been reading guides and watch youtube videos but they dont seem to help me to do what i actually i want, any help is appreciated
When you're using django you have to put images, CSS, JS, etc. in a static files directory. Read up on this: https://docs.djangoproject.com/en/2.0/howto/static-files/
Make sure you load static files in your HTML with the line {% load static %} at the top!
Related
I am currently a beginner in html and I have seen this problem many times and I do not know how to solve it. I copied a source code from a video in an attempt to make a social media. The following code is in the file home.html:
{% extends 'base.html' %}
{% block title %}
home
{% endblock title %}
{% block content %}
{{hello}}
<br>
{{user}}
{% endblock content %}
{% block scripts %}
<script>
$(document).ready(function(){
console.log('working')
})
</script>
{% endblock scripts %}
However, in the video the html page seems correct and all buttons and functions are working. On the other side my html page is like this:
...
The guide you have seen concerns Flask, a framework for applications written in Python. The code will not work because there is no preprocessor that can process it. In this case the browser will show you plain text without formatting.
I'm using django-inlinecss to style emails.
Here's a snippet of my email template:
{% extends "base/email.html" %}
{% block content %}
{% load inlinecss %}
{% inlinecss "base/css/email.css" %}
<p class="c-c-test">test</p>
{% endinlinecss %}
{% endblock %}
When rendering the template, an error occurs saying:
No such file or directory: '/usr/src/project/static/base/css/email.css'
Although, trying to use the same css file path (i.e. "base/css/email.css") with static template tag works fine.
What am I doing wrong here?
EDIT:
I'm using docker, django-inlinecss seems to load the css file from local storage (i.e. from docker image) where there's no such file. The actual file is located on my machine. Is there a workaround to solve this issue? something like how static template tag work?
I have a template home.html which is the view of an app in Django. Now, I've added some templating in the html file to allow dynamic generation of HTML. For example I use {% load static %} and then href="{% static "path/to/resources" %}". So, when I open the app, after running the server, the path is dynamically created.
Now, the problem is that the static files, that are dynamically loaded, also need to load other static files (and extend a template as well). I thought that DjangoTemplating might be working recursively, and will work on the called file too, but sadly that is not true.
So, what should I do to make sure that all my templating logic is taken into consideration by Django, and is allowed to run?
home.html snippet:
{% load static %}
<area alt="andhra" title="Andhra Pradesh" name="andhra" href="{% static "personal/pages/andhra.html" %}" shape="poly" ... />
andhra.html looks something like:
{% extends "personal/post.html" %}
{% blockcontent %}
<style>
#slider
{
width: 80%;
....
<div class="carousel-inner">
<div class="carousel-item active">
{% load static %}
<img class="d-block w-100" src="{% static "personal/images/andhraImages/1911-1915.jpg" %}" alt="First slide">
</div>
...
{% endblock %}
Which wants to extend the template:post.html which has {% blockcontent %}and {% endblock %} in it's body.
The andhra.html is not being template-processed. That is, when I open the app home.html is loaded correctly, but when I go to andhra.html from home.html, it isn't processed by DjangoTemplating at all.
So, as Daniel Roseman said in the comments, loading the files as a static file won't work. We want django to render them. So, I created a function state in my views.py as :
def state(request,state):
return render(request,'personal/pages/'+state+'.html')
That means it tries to render a file at templates/personal/pages/<state>.html. Now my urls.py looks like:
urlpatterns = [
path('',views.index,name='index'),
path('<state>',views.state,name="state")
]
Note that this belongs to the app polls. Now, since the urls.py of mysite has polls/, thus now the link to these views will be accessible by localhost:8000/polls/<state>.
Now at every place I wanted a static link, I made a dynamic one by:
href="{% url 'state' 'uttarakhand' %}"
where 'state' is the name of the urlpattern and 'uttarakhand' is the input value.
Currently learning basics of Django. I kind of understand the concept of url and views. I've downloaded a bootstrap template and I wanted to set it as main page. I know, that I could redo all the page, making it template and put css files into static folder, then link it with url and it should probably work. I managed to display the page creating a lambda HttpResponse function, but I am unable to link css there. Is such thing possible? Can I somehow drop a webpage with css into folder and link it, or do I have to do it django way?
I know, that django way is less messy and probably better, but this is for test and learning purposes only.
Sorry, if it was already asked, I tried looking for the answer before asking.
Copy your css, and put it in HTML page inside <style> </style> tag.
I'm guessing you're going that route because it seems complex to get the static file serving working. Serving your static files is something that's really easy to do - and once you've pointed your static file at something, you can just use if for testing anything:
https://docs.djangoproject.com/en/1.9/howto/static-files/
STATIC_URL = '/static/'
STATICFILES_DIRS = ("/Users/you/path/to/static",)
Then you just need to use static in the url for that page.
I use a base.html that is extended by all of my templates. You can either have it {% include %} your css, or simply reference it. So you can change 1 variable (I do it in my master context file) and have all of your templates go along for the ride. E.g.
In base.html:
<html>
<head>
{% if testing %}
<!-- directly include stylesheet in page -->
<style>{% include "my.css" %}<style>
{% else %}
<!-- standard stylesheet link -->
<link rel='stylesheet' type='text/css' href='my.css'>
{% end %}
</head>
<body>
{% block content %}
{% endblock content %}
</body>
</html>
In your templates:
{% extends "base.html" %}
{% block content %}
Hi, Mom!
{% endblock content %}
BTW, a base.html that has your full site design and makes very liberal use of {% block %} can make the majority of your view templates short and sweet. The template docs are your friend!
I have a small GAE app that's working fine. I use it to serve a few static files as well like (About page, Privacy and contact page). I put the "about.html" in a /static folder along with the /css, /img and /js. In "app.yaml" I declared the handler:
- url: /static
static_dir: static
It all works fine. Now I've abstracted the common contents (navigations, etc) into "_base.html" like this:
<html>
<head><title> Page title here</title>
<!--Some header files here -->
</head>
<div id="content">
{% block bodycontent %}
{% endblock bodycontent %}
</div>
</body>
</html>
The child file looks like this:
{% extends "_base.html" %}
{% block title %} About {% endblock %}
{% block bodycontent %}
<p>Some contents here...</p>
{% endblock bodycontent %}
Now, problem when it displays, the "_base.html" does not render. In fact the whole jinja code just displays. But when I wrote an handler for "about.html" it renders the base html correctly.
Question is, why do I have to create instances b4 I can display static files like About, Privacy pages just because I want to use template inheritance? Am I doing something wrong?
Templates are not static files, by definition. If you want a completely static HTML file, you can of course have one without any handler code. But templates require rendering, which means they need a handler to do it.