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!
Related
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'm new in Django.
I have no errors in code but CSS affect don't show in browser this my codes and my project folders
this is base.html
<!DOCTYPE html>
{% load static %}
<html lang ="en">
<head>
<title>Investissement | Home</title>
<link rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap
/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/
iJTQUOhcWr7x9JvoRxT2MZw1T"
crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="{% static
'css/styles.css' %}">
</head>
<body>.....
this is home.html
{% extends 'base.html' %}
{% block content %}
<div class="container">
<div class="row">
<div class="col">
<div id="home-content">
<h1>Investissement #2019</h1>
<h3>Your voice Matter!</h3>
</div>
</div>
</div>
</div>
{% endblock %}
this is styles.css
h1 {
color :red;
}
body{
background-image: url('../img/p.jpg');
}
#home-content {
text-align:left;
padding-top:20%;
}
in settings file i do this :
# Static files (CSS, JavaScript, Images)
# https://docs.djangoproject.com/en/2.2/howto/static-files/
STATIC_URL =' /static/'
STATIC_ROOT = "/home/p-amc-dgps-er/Bureau/investissement/static/"
STATICFILES_DIRS =[os.path.join(BASE_DIR, "static"),]
note: the static folder and templates are in same repertory with manage.py
the result no css affect are show and no code error
Often times browsers will cache files like css to improve loading speed. You can disable that in browser in order to get the latest version of file (especialy important for development). If you are in Chrome you can do that by opening developer tools (CTRL+SHIFT+I or F12) and on the Network tab there is a Disable cache button.
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 have to do a school project that's basically a website.
Our client asked my team for a preview of the design. However, by then, my colleagues and I didn't know anything about Symfony.
So we first created a static HTML website (with CSS and JS libraries) to work on the design of the website.
Once we had agreed on the final design, we had to make the website dynamic.
After learning about the basics of Symfony in class, we decided to go for this technology.
So my question is: what's the best way to "turn" my team's static website into Twig templates ?
Thanks in advance,
As you can read in the documentation You begin by the global site template, containing the layout and the parts that won't change much. (menu, header, footer, etc..)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>{% block title %}Test Application{% endblock %}</title>
</head>
<body>
<div id="sidebar">
{% block sidebar %}
<ul>
<li>Home</li>
<li>Blog</li>
</ul>
{% endblock %}
</div>
<div id="content">
{% block body %}{% endblock %}
</div>
</body>
</html>
Then you can render your specific page rendering content through the blocks you need:
{# app/Resources/views/blog/index.html.twig #}
{% extends 'base.html.twig' %}
{% block title %}My cool blog posts{% endblock %}
{% block body %}
{% for entry in blog_entries %}
<h2>{{ entry.title }}</h2>
<p>{{ entry.body }}</p>
{% endfor %}
{% endblock %}
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.