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.
Related
I started a new project in symfony. I'm very new to it, but I followed all the instructions from symfony's documentation for the installation:
/* assets/styles/app.css */
body {
background-color: rgb(177, 44, 44);
}
h1{
color: red;
}
h2{
color:purple;
border: 1px solid black;
}
{% extends 'base.html.twig' %}
{% block body %}
<h1> Bienvenue à tous </h1>
<h2> Bienvenue 2 </h2>
{% endblock %}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>{% block title %}Welcome!{% endblock %}</title>
{# Run `composer require symfony/webpack-encore-bundle`
and uncomment the following Encore helpers to start using Symfony UX #}
<link rel="stylesheet" href="assets\styles\app.css" type="text/css">
{% block stylesheets %}
{#{{ encore_entry_link_tags('app') }}#}
{% endblock %}
{% block javascripts %}
{#{{ encore_entry_script_tags('app') }}#}
{% endblock %}
</head>
<body>
<div class="container">
{% block body %}{% endblock %}
</div>
</body>
</html>
[enter image description here][1] set up. I downloaded webpack-encore-bundle package with yarn package manager. I think that my () is well placed, but my html file can't find the path to my css.
here are my files
[1]: https://i.stack.imgur.com/RA9FJ.png
my network browser console tell me this "net::ERR_ABORTED 404 (Not Found)"
With Webpack Encore
You should not write your <link>-tag yourself and instead use the commented encore_entry_link_tags instead. The encore_entry_link_tags will make sure it points to the file generated by Webpack Encore (after calling yarn encore dev for example).
When you use Webpack Encore use the webpack.config.yaml to point to your CSS in assets using addEntry('app', ...file..) (or possibly addStyleEntry, but addEntry should be fine). Webpack Encore takes the file under assets/styles/app.css and then puts it in public/ by default public/build. Depending on your configuration it might be, that your file name will not stay the same during that process. The good thing is Webpack Encore usually takes care of everything for you. (If not feel free to open a question for that).
See also: https://symfony.com/doc/current/frontend/encore/simple-example.html
When not using Webpack Encore
You should use forward slashes, e.g. assets/styles/app.css. If you don't use Webpack Encore then you should make sure that you have the file in public/assets/styles/app.css to make it accessible for your browser. You should also wrap this into another helper function called asset. In other words it should look something like (assuming the path is correct):
<link rel="stylesheet" href="{{ path('assets/styles/app.css') }}" type="text/css">
What this will do is make sure that your path is relative to the document root (your public/-directory) instead of relative to the url. This is important, because otherwise your path will not have the same result depending on whether you are for example on https:/example.com vs. https://example.com/blog, because it will look for your css in different places (either public/assets/styles/app.css or public/blog/assets/styles/app.css).
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 trying to import css file inside twig file using assetic.
{% stylesheets 'bundles/sfeuser/css/bootstrap.css' filter='cssrewrite' %}
<link rel="stylesheet" href="{{ asset_url }}" type="text/css" />
{% endstylesheets %}
when I load the page. it was only HTML without style
and when I checked the css file. I found out that it contains HTML content of the page loaded.
In the security.yml file I forgot to remove a firewall with authentification that was applied on the whole application.
That's why when the browser tries to access the CSS file it gets redirected to the login page. Therefore the HTML content of the login page was found in the CSS file.
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!
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.