How do I create a div for each directory using flask?
I tried this but it does not do anything and theres nothing in the console:
python file:
# Get a list of directories in the 'servers' directory
folders = [d for d in os.listdir('servers/') if os.path.isdir(d)]
# Create a div element for each folder
divs = []
for folder in folders:
div = f"<div class='list'><a href='/servers/{folder}'>{folder}</a></div>"
divs.append(div)
# Join the div elements into a single string
divs_string = "\n".join(divs)
# Render the template and pass the div elements as a variable
return render_template('home.html')
html file (home.html):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='css/home.css') }}" />
<link rel="stylesheet" href="https://rawcdn.githack.com/CrystalVortex/Feather-CSS/9318334ceedfa61d6a64349a558ef1e48ef19cb2/Feather1.7.css">
<title>FeatherPanel | Home</title>
</head>
<body>
<form action="/create" method="post">
<button class="btn_blue">Create Server</button>
</form>
{% for directory in directories %}
<div>{{ directory }}</div>
{% endfor %}
</body>
</html>
The listdir function just returns a list of filenames. To test within your loop whether it is a directory, the isdir function expects the path including the folder name.
You can then pass the returned list to the template.
I'm using locals() here to pass all local variables to the template. However, you can also pass the variables individually with a key.
#app.route('/servers/')
def servers():
# Get a list of directories in the 'servers' directory
folders = [d for d in os.listdir('servers') if os.path.isdir(os.path.join('servers', d))]
# Render the template and pass the div elements as a variable
return render_template('home.html', **locals())
Within the template you can iterate over said list to create a "div" element for each entry.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='css/home.css') }}" />
<link rel="stylesheet" href="https://rawcdn.githack.com/CrystalVortex/Feather-CSS/9318334ceedfa61d6a64349a558ef1e48ef19cb2/Feather1.7.css">
<title>FeatherPanel | Home</title>
</head>
<body>
<form action="/create" method="post">
<button class="btn_blue">Create Server</button>
</form>
{% for folder in folders %}
<div>{{ folder }}</div>
{% endfor %}
</body>
</html>
You didn't describe what should happen when a user clicks a link for a listed directory. Keep in mind that only files in the static folder are accessible from the client. If you want to use an anchor to refer to listed directories outside of the static folder, you need another endpoint.
Related
Here is my main page, localhost:8000/helloworld/greeter at helloworld\templates\hello:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Hello!</title>
{% load static%}
<link rel="stylesheet" type = "text/css" href = "{% static 'hello/site.css' %}" />
</head>
<body>
<span class="message">Hello there, {{ name }}!</span> It's {{ date | date:'l, d F, Y' }} at {{ date | time:'H:i:s' }}.
</body>
</html>
and here is the CSS file at helloworld\static\hello (so it should look for localhost:8000\helloworld\static\hello\site.css):
.message{
font-weight
color: blue;
}
and here is the file structure:
The expected behaviour would be that the phrase "Hello there, [name]" is bolded and in blue, but here is what the code actually yields: (this is the problem)
And looking within the console gives this error:
GET http://localhost:8000/static/hello/site.css net::ERR_ABORTED 404 (Not Found)
Notice how it seems to think that "static" is at the root directory, when it is in localhost\helloworld.
I would like to find a solution to this problem and change it so that it links to the correct directory
I tried to change the block, specifically:
<link rel="stylesheet" type = "text/css" href = "{% static 'hello/site.css' %}" />
to：
<link rel="stylesheet" type = "text/css" href = "{% 'helloworld/static/hello/site.css' %}" />
I expect that it will apply the site.css but it didn't and threw a TemplateSyntaxError.
The problem is fixed like so:
In the file settings.py, I changed the line to become STATIC_URL = '/helloworld/static/'
I am using a CSS file to update my HTML in a Django app, but despite the fact that my "style.css" sheet is linked to the HTML file, there are no updates occuring.
"style.css" is in the same folder as my HTML document ("index.html"), but nothing is changing.
I've pasted my code below:
<head>
<link type="text/css" rel="stylesheet" href="style.css" media="screen"/>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
I know that the CSS and HTML files are linked, because when I hover over the "style.css"href, I can press CTRL + click, and "styles.css" opens in a new window.
I've been through four or five tutorials, tried to restarted the local server, moving "style.css" to its own folder "styles", and then changed href to href="styles/style.css" but it is still not working.
I'm using VSCode, and Windows 11.
you need config template section in django settings
TEMPLATES = [
{
'BACKEND': 'django.template.backends.django.DjangoTemplates',
'DIRS': [os.path.join(BASE_DIR, 'templates')],
'APP_DIRS': True,
'OPTIONS': {
'context_processors': [
'django.template.context_processors.debug',
'django.template.context_processors.request',
'django.contrib.auth.context_processors.auth',
'django.contrib.messages.context_processors.messages',
],
},
},
]
STATIC_URL = '/static/'
STATICFILES_DIRS = [
os.path.join(BASE_DIR, "static"),
]
be carefull to create static and templates directory in project root or any
place you want and set in "DIR" in TEMPLATES for templates and set static for static files for js and css file. in static directory you must put your js and css file also you can create directory inside static directory called "js" hold js files and create "css" directory inside static for css files.
now render yout html file in view like below
from django.shortcuts import render
def index_view(request):
return render(request, "index.html")
now in your template files you can load static files
<!DOCTYPE html>
<head>
{% load static %}
<script src="{% static 'app.js' %}"></script>
<title>Site</title>
</head>
<body>
<img src="{% static 'img.png' %}" alt="Mon image" />
{% block content %}{% endblock %}
</body>
</html>
in your html file you should add:
{% load static %}
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link type="text/css" rel="stylesheet" media="screen" href="{% static 'styles/style.css' %}"/>
<title>Document</title>
</head>
you should add in your setting.py:
STATIC_URL = '/static/'
STATICFILES_DIRS = [
BASE_DIR / "static",
]
also you should declare your folder structure like this:
in your root project (where manage.py declared), static folder and in your static folder you should have styles and in your styles is your style.css file.
static/styles/style.css
Apparently it was just a cache issue. Clearing it took care of this, so I'm now clearing the cache every time I modify anything in the CSS Templates, which comes to clearing the cache basically everyday.
I am trying to load and add multiple figures from disk to a HTML file
For adding a single image, I tried the following (ref.: Jinja2/Python insert a image(s) into html)
import jinja2
env = jinja2.Environment(
loader=jinja2.FileSystemLoader('.'),
trim_blocks=True,
lstrip_blocks=True,
)
template = env.get_template("template.html")
template_vars = {"title":"TITLE", "graph":'obj.png'}
text = template.render(template_vars)
with open("test2.html", "w") as f_out:
f_out.write(text)
The template looks like the below
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>TITLE</title>
</head>
<body>
<h2>Graph Goes Here</h2>
<img src="obj.png">
</body>
</html>
To extend this to add multiple images, I made the following modification in the template
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>{{ title }}</title>
</head>
<body>
<h2>Graph Goes Here</h2>
<dl>
{% for key, value in template_vars.items() %}
<img src="{{value}}.png">
{% endfor %}
</dl>
</body>
</html>
I would like to know how
template_vars = {"title":"TITLE", "graph":'obj.png'}
has to be modified to pass multiple figures.
You will need to update the object type used for your variable template_vars to make things simpler to iterate. Instead of a dictionary, you likely want a list of dictionaries so that you will be able to loop over each image and get multiple attributes for each one (in your case, a value for the key title and another one for the key graph). You should also refer to your variable when calling template.render so that Jinja2 knows what you are writing about (i.e., replace template.render(template_vars) with template.render(template_vars=template_vars)).
Your updated template might look like this:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>TITLE</title>
</head>
<body>
<h2>Graph Goes Here</h2>
<dl>
{% for image in template_vars %}
<dt>{{ image.title }}</dt>
<dd><img title="{{ image.title }}" src="{{ image.graph }}"></dd>
{% endfor %}
</dl>
</body>
</html>
Then, the part of your Python code that needs to be changed would look as follows:
template_vars = [
{"title": "TITLE", "graph": "obj.jpg"},
{"title": "TITLE2", "graph": "obj2.jpg"},
]
text = template.render(template_vars=template_vars)
This will result in the following HTML source output:
<html>
<head lang="en">
<meta charset="UTF-8">
<title>TITLE</title>
</head>
<body>
<h2>Graph Goes Here</h2>
<dl>
<dt>TITLE</dt>
<dd><img title="TITLE" src="obj.jpg"></dd>
<dt>TITLE2</dt>
<dd><img title="TITLE2" src="obj2.jpg"></dd>
</dl>
</body></html>
I know there are so many questions on this but I'm yet to find a solution. I have the below folder structure for my django app:
I then reference the styles.css file from my index.html page, like so:
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">
{% load static%}
<link rel="stylesheet" href="{% static 'css/styles.css' %}">
but no matter what I change in my css file it doesn't affect my webpage.
css file if useful:
.form-details {
text-align: center;
color: Tomato;
background-color: red;}
Place {% load static %} line to the top of your index.html file.
And also be sure that you correctly set static files direction in the settings.py file.
For example,
STATIC_URL = '/static/'
STATIC_ROOT = os.path.join(BASE_DIR, 'static')
STATICFILES_DIRS = (
os.path.join(BASE_DIR, 'static_assets'),
)
STATICFILES_FINDERS = (
'django.contrib.staticfiles.finders.FileSystemFinder',
'django.contrib.staticfiles.finders.AppDirectoriesFinder',
)
This is a bit embarrassing, but I don't know how to solve this problem:
First off, my project directory looks like this (there are more directories, but we aren't concerned with them):
projectfolder/
wsgi/
openshift/
templates/
home/
simple-sidebar.html
static/
css/
fonts/
js/
And the file we are concerned with is simple-sidebar.html which looks like the following :
{% load staticfiles %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<title>Starter Template for Bootstrap</title>
<!-- Bootstrap core CSS -->
<link href= "{% static "css/bootstrap.css" %}" rel="stylesheet">
<!-- Add custom CSS here -->
<link href="{% static "css/simple-sidebar.css" %}" rel="stylesheet">
<link href="{% static "font-awesome/css/font-awesome.min.css" %}" rel="stylesheet">
</head>
Now for some reason my static template tags are not working, but that's probably because I don't know how to set up my static template stuff in my settings.py:
STATIC_ROOT = os.path.join(PROJECT_DIR, '..', 'static')
STATIC_URL = '/static/'
STATICFILES_DIRS = () <--- dont know if I need this one?
STATICFILES_FINDERS = (
'django.contrib.staticfiles.finders.FileSystemFinder',
'django.contrib.staticfiles.finders.AppDirectoriesFinder',
#'django.contrib.staticfiles.finders.DefaultStorageFinder',
)
PS: Also how would you do this without the {% static %} tag? I am not sure how my style sheets href would look like.
Try removing the dots from your STATIC_ROOT, for example
STATIC_ROOT = os.path.join(PROJECT_DIR, 'static')
STATICFILES_DIRS are there for you if you'd like to map additional folders to your application that can be anywhere on your machine. When you run ./manage.py collectstatic you're essentially asking python to find all the files within said directories and drop them into the static folder defined in STATIC_ROOT
If you would like to map your files manually (without the static tag) you'd have to write out the full path of your file, for example /some/directory/path/css/style.css.
Lastly if you're running with DEBUG = True you are required to add your static and media urls to urls.py so there is an actual path in place. For example
from django.conf import settings
# ... your normal urlpatterns here
if settings.DEBUG:
urlpatterns += patterns('',
(r'^media/(?P<path>.*)$', 'django.views.static.serve', {
'document_root': settings.MEDIA_ROOT}),
(r'^static/(?P<path>.*)$', 'django.views.static.serve', {
'document_root': settings.STATIC_ROOT}))