The image in the parent template doesn't load in the child one, instead it shows the 'alt'.
Here's how the structure goes.
"base.html"
<DOCTYPE! html>
<html>
<head>
</head>
<body>
<div class = "x">
<image src="x.jpg" alt="x">
</div>
<div class = "y">
<a src="...">y</a>
</div>
<div id = "content">
{% block content %}
{% endblock %}
</div>
</body>
</html>
"child.html"
{% extends "base.html" %}
{% block content %}
---replaced content
{% endblock %}
content, y show in child normally, but x (the image) shows the alt text and can't load the image. This only happens when the image's src isn't a url, if it's it shows fine.
I'm using jinja2 template engine.
The problem was solved when I added the image to the directory containing all the static files other than just any directory and adding this directory path to the src.
This happened because I configured the app.yaml handler like this
handlers:
- url: /static
static_dir: static
so whenever a url starts with '/static' it gets it from this directory and treats it as static file otherwise not.
This is very similar to this question
Jinja not rendering css/images in sub-directories
and has nothing to do with jinja2 or its inheritance.
Related
I've seen a ton of unanswered questions about VSCode formatting (and if not here, where do you ask these questions?).
There are 2 main issues I run into constantly when I'm trying to write django-html templates.
1. Basic HTML tag linebreak doesn't occur in django-html files.
When you write an html tag, and press enter inside of it, it should split the tag with an empty line in the middle like.
Expected behavior (pipe "|" represents the cursor):
<!-- Write the tag -->
<div>|</div>
<!-- Press enter -->
<tag>
|
</tag>
Here's what's happening in the django-html file after enter:
<!-- Press enter -->
<tag>
|</tag>
How do you fix this WITH proper template tag formatting (below)?
2. Django template tags don't indent as expected.
Tags within if, with, block, etc. tags should be indented. (treated like html)
Expected result:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
{% if x %}
<p>I did x</p>
{% else %}
<p> I did else</p>
{% endif %}
<nav class="navbar">
</nav>
{% block content %}
<div class="content">
<p>I'm in contente</p>
</div>
{% endblock %}
</body>
</html>
Instead, the html tags within the django template tags are flattened on the same indent level.
Actual result:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
{% if x %}
<p>I did x</p>
{% else %}
<p> I did else</p>
{% endif %}
<nav class="navbar">
</nav>
{% block content %}
<div class="content">
<p>I'm in contente</p>
</div>
{% endblock %}
</body>
</html>
Also if you're extending a template:
{% extends 'base.html' %}
{% block main %}
<div>
</div>
{% endblock %}
What happens:
{% extends 'base.html' %}
{% block main %}
<div>
</div>
{% endblock %}
Conclusion
I've used both beautify and prettier to try to solve the problems, but neither did the expected behavior 100% (especially with the template tags), but they did help.
I believe with slight tweaks they could have the expected behavior and treat django template tags as html tags AND have the html linebreak feature.
How do you get these to format with these 2 simple specifications correctly?
I got the desired result by using the Twig Language 2 extension and putting the following in my project settings:
"files.associations": {
"*.html": "twig"
},
I am starting to learn CSS and after trying to implement an external stylesheet, i found I was unable to change the color of my html document. I am using Visual Studio Code and my html templates are using Djangos inheritance.
I have tried double checking that everything is saved, I have checked spelling for the href, and i even restarted VSC. So far nothing.
Here is the base html sheet
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
{% block style %}
{% endblock %}
<title>
{% block title %}
{% endblock %}
</title>
</head>
<body>
{% block content %}
{% endblock %}
</body>
</html>
Here is an html sheet that should use the styling:
{% extends 'student_view_base.html' %}
{% block title %}
Socrates Home Page
{% endblock %}
{% block style %}
<link rel="stylesheet" type="text/css"
href="css/sidebar.css">
{% endblock %}
{% block content %}
<h1>Socrates Home Page</h1>
<div>
Login
</div>
Admin Login
{% endblock %}
Here is the css sheet:
h1{
color: blue;
}
As you can tell, I am pretty new to Web Dev in general and this was mostly to experiment and make sure I could implement it properly.
As far as I can tell the h1 tags text should be turning blue. Currently it remains black.
EDIT: I can confirm that the href is linked to the proper document, ctrl clicking takes me to the right document.
You are better off placing your html code on templates and your css on static when you use django. Create a templates and static folders on your project as here. enter image description here
Then edit settings.py'DIRS': [os.path.join(BASE_DIR, 'templates')], inside TEMPLATES. Also add the following code to your settings.py :
STATIC_URL = '/static/'
STATIC_DIRS = [
os.path.join(BASE_DIR, 'static'),
]
STATIC_ROOT = os.path.join(BASE_DIR, 'static')
MEDIA_URL = '/media/'
MEDIA_ROOT = os.path.join(BASE_DIR, 'media')
You should be good to go.
I am trying to set a background image and some CSS style to my page, but every attempt I tried seems to have no effect:
i have a base.hmtl page where I load {% load staticfiles %}
in settings.py I have set up STATIC_URL = '/static/' and STATICFILES_DIR = [os.path.join(BASE_DIR, 'webapp/static')]
In setting.py 'django.contrib.staticfiles' is under installed apps
the CSS folder is located in the main directory under static, and the image is as well under static/img
here is how i am trying to load this page:
{% extends 'base.html' %}
{% block content %}
<h1>Welcome!</h1>
{%load staticfiles%}
<img src="{% static '/img/background.jpg'%}"/>
{% endblock %}
While in my base.html I load my stylesheet in this way:
<link rel="stylesheet" href="{% static 'webapp/CSS/style.css'%}">
and as well in base.html I load statifiles
I attach here my folder structure, maybe I have missed something there:
I noticed Google Chrome was keeping displaying me a cached version of my page, I had to delete Google Chrome cache with settings --> advanced --> clear browsing data.
I want to divide my base.html template into 2 with some differences in style and html. My structure is like this:
base.html
<html>
<head>
<p>same content for both templates</p>
</head>
{% if category.title == 'something' %}
{% include "base-copy.html" %}
{% else %}
<body>
<p>content</p>
.
.
.
</body>
{% endif %}
</html>
base-copy.html
<body>
<p>content</p>
.
.
.
</body>
inside the body content there are several blocks and other templates extend from base.html {% extends "base.html" %}. If i just copy the whole block of code from body into the included template the content is not showing but if I leave it on the original base.html the content is showing...
Btw I'm using the include statement because otherwise I get the "block" appears more than once error from Django...
any suggestions on how to make this work?
I have a page, which is served by apache. When I upload images by the django's server (on localhost:8000) page, it does show me the uploaded image properly. However when I upload images by the apache server (on localhost) page, it does not show the uploaded image. Only when I reload the page on the django's inbuilt server (localhost:8000) i can see it on both the page served by the apache and django's server.
This was the index.html:
{% load static from staticfiles %}
{% load thumbnail %}
<!DOCTYPE html>
<html>
<head>
<title>leo</title>
<link rel="stylesheet" type="text/css" href="{% static "css/style.css" %}">
</head>
....
....
And here's the other part of it for image:
{% for Status in status %}
<p class="user">{{ Status.creator.get_full_name }}</p>
{% if Status.image %}
<div class="image_image">
<center>
<img src="{{Status.image |thumbnail_url:'status'}}"/>
</center>
</div>
<p class="status_image">{{Status}}</p>
<span class="clear"></span>
<hr>
{% else %}
<p class="status_status">{{Status}}</p>
<span class="clear_right"></span>
<hr>
{% endif %}
{% endfor %}
After I removed the EASY THUMBNAILS tag from the html file and made these changes on the html file, I was ok.
{% load static from staticfiles %}
<!DOCTYPE html>
<html>
....
....
And this:
<div class="image_image">
<center>
<img src="{{ MEDIA_URL }}{{Status.image}}" width=300px />
</center>
</div>
Why is apache behaving so? And also in the uploaded directory it was creating an extra image for the same image. I guess this is because easy thumbnails creates a new thumbnail for the image. Am I wrong somewhere? Is it the problem of easy_thumbnails tag??? If it is. How do I make it work. Or else how can I a achieve thumbnails of the images like easy thumbnails? Please guide me. Thank you!