To practise my Django skills, I want to try to host a game on my website. The game was made in Unity and packaged using WebGL.
I used the index.html created by WebGL as a Django template and created the URL path and view in the relevant locations. WebGL creates two folders, Build and TemplateData that are referenced in index.html.
I have tried putting these folders in with the html templates, and on every level in my Django folder structure.
The outcome is the same wherever I put the folders. The GET command is sent but a "Not Found: /TemplateData/filename...." is shown for a few files
Does anyone know how to see where the GET command is looking, or just where the folders should go?
Thanks,
Sophie
After some more messing about I found that you can just wham everything into the static folder and then reference it in index.html the same way you pick up css files in base.html
{% load static %}
.....some more code
<script>
var gameInstance = UnityLoader.instantiate("gameContainer", "{% static
'Build/Juno_WebGL.json' %}", {onProgress: UnityProgress});
</script>
Do this for every reference to the files in index.html
I ran into this same issue recently and came across this thread. Here was my solution for anyone who may come across this in the future.
take the index.html file generated and put it in your templates folder, create a link through to this template using the standard django, url, view, template flow e.g:
urls.py:
urlpatterns = [
path('', views.home, name='home'),
path('unity/', views.unity, name='unity'),
]
views.py:
def unity(request):
return render(request, template_name='mainapp/unity.html')
Take your WebGL build files and put them somewhere in your static folder. Finally edit your index.html so that it includes {% load static %} and look for any href's in the file and point these to your static folder, do the same for any scripts. E.g. My Unity builds WebGL application had a 'var buildUrl = "Build";' line which I had to point towards my static folder.
Example:
<!--block content etc.. -->
{% load static %}
<html lang="en-us">
<head>
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Unity WebGL Player | UnityApp</title>
<link rel="shortcut icon" href="{% static 'unity/TemplateData/favicon.ico' %}">
<link rel="stylesheet" href="{% static 'unity/TemplateData/style.css' %}">
</head>
<!-- etc.. -->
<body>
<script>
var buildUrl = "../static/unity/Build";
var loaderUrl = buildUrl + "/Unity App.loader.js";
// etc..
</script>
</body>
</html>
Related
I've tried to import bootstrap an archive but i've face this error:
"GET /bootstrap.css HTTP/1.1" 404
While when I use this tag link it works perfectly.
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
It is possible to import bootstrap as a file while using Flask? If don't, I would like to know why, please
html:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="bootstrap.css">
<title>{% block title %}{% endblock %}</title>
</head>
<body>
<h1>Hello User</h1>
{% block content %}
{% endblock %}
</body>
</html>
python:
from flask import Flask, url_for, redirect, render_template
app = Flask(__name__)
#app.route("/")
def home():
return render_template("index.html")
if __name__ == "__main__":
app.run(debug=True)
You can try to link the bootstrap using the link tag that they give you in the docs instead of having a file.
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
First thing first, by answering your question: It is possible to import bootstrap as a file while using Flask? If don't, I would like to know why:
Yes it is, you just did it but you only have to link insert this css file in the right place and point it with the right command. Once is downloaded is just like any other CSS file.
For my understanding you have imported the bootstrap by downloading the 'Compiled CSS and JS' from this here ===> https://getbootstrap.com/docs/4.5/getting-started/download/
Assuming that your Boostrap file in within a 'Static' folder and then inside a 'style' as so:
/app
- app.py
/views
- view.py
/templates
- index.html
/static
/style
- bootstrap.css
This both will work for you:
(most common usage)
`<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='style/bootstrap.css') }}">`
Example number one depends where in the directory the .html is at, in this example it would be just below templates and is 'index.html
<link rel="stylesheet" type="text/css" href="../static/style/bootstrap.css">
The most important thing is that the css file is in the static folder and it must be correctly pointed at.
Some more reference of really good answer about this topic:
Application not picking up .css file (flask/python):
Note that you can override the static folder path:
app = Flask(__name__, static_url_path="/STATIC_FOLDER", static_folder='STATIC_FOLDER')
More regarding change static folder default
From Flask DOCS
Put bootstrap.css in your static directory, then:
<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='bootstrap.css') }}">
I know this is a duplicate question, but I was trying to add a favicon.ico file to my site on localhost:8000 made with Django. The favicon exists on templates\articles (in an app called articles), and I've tried everything on stackoverflow, youtube, and used realfavicongenerator.net, but nothing works. Do I have to define the Django URL/view for the ICO file, as localhost:8000/favicon.ico brings up error? Here's my (simplified) code by the way:
<title>Newsreed | Articles</title>
<link rel="shortcut icon" type = 'image/x-icon' href="favicon.ico">
What should I do, because I've been struggling with it for several days now and tere has been no solution on anything.
I like to use:
https://www.favicon-generator.org/
They let you upload an image to use and it will output a directory with all scaled versions of the image for all manner of devices your page could be viewed on including the html that you will need to copy and paste.
Fairly sure the syntax for the href should be: href="{% static 'imgs/favicon.ico' %}
Best way to have a favicon on every page on your site is to link it to the base.html with href="{% static 'articles/favicon.ico' %}. Mind that you need to put {% load static %} in the template too.
Code standard favicon links at the top of your template or base.html and make sure the icons are there in the directory/s :
{% load staticfiles %}
<head>
<link rel="shortcut icon" href="{% static "img/favicon.ico" %}">
<link rel="icon" href="{% static "img/animated_favicon1.gif" %}">
You can use favicon-generator.org to create new favicons.
I am new to Tornado. I am trying to link a CSS file to the html template. I am using jinja2 with Tornado. But due to some unknown reasons the CSS file is not loading up.
EDIT: I have created my custom render_template function which is working fine.
Directory structure:
app.py
static
css
custom.css
templates
index.html
Here is my Request Handler's Class:
class Index(RequestHandler):
def get(self):
path = os.path.join('static/css/', 'custom.css')
return self.write(render_template('index.html', path = path))
and here is my index.html template:
<!Doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="{{path}}"/>
</head>
<body>
<div>
<div class="header">
asdasdasd
</div>
</div><!--wrapper-->
</body>
</html>
but the browser is returning the 404-NotFound error for the css file with the correct url, that is http://localhost/static/css/custom.css
Here is a guide on how to link static files in tornado:
http://tornado.readthedocs.org/en/latest/guide/running.html#static-files-and-aggressive-file-caching
Important is the 'static_path' setting in your settings dictionary:
settings = {
"static_path": os.path.join(os.path.dirname(__file__), "static")
}
Now you should be able to use it.
I have tried linking a stylesheet to my template in django and it doesnt do anything:
the template(called base.html)
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="{{ STATIC_URL }}base.css">
</head>
<body>
<h1>Welcome to {{ page }}</h1>
</body>
</html>
This is the settings about the static files:
STATIC_URL = '/static/'
STATICFILES_DIRS = ('C:/Users/GAL/PycharmProjects/sqvatPreAlpha/static/',)
The way my project is built:
http://i.imgur.com/o44QSEk.png
What should I do to make it work?
You haven't mentioned if this is a dev or production box. If the latter, make sure you run:
python manage.py collectstatic
This will collect all your static files that you have in the Django project root, and copy them to the STATIC_URL directory. If you are still running into problems after trying this, you most likely have something incorrectly defined in your settings file.
You have to add {% load staticfiles %} at the beginning of base.html
Also, it seems you need to add .cssto your css file.
I've searched for answer for this question, but i havent found any solution for my problem. I want to link css to my project, but just cant handle how STATIC_URL work
<head>
{% load static from staticfiles %}
<link rel="stylesheet" type="text/css" href="{% static "css/style.css" %}">
</head>
it's to much code to post here so here are the links:
settings.py: http://pastebin.com/9Bsg3u1h
And I render with context_instance=RequestContext(request) parameter of course.
I got files structure like this:
Django_project
...
appname
templates
static
I tried also to place static directory in many project, in appname, and even in templates.
Can someone explain me how should it look for my project?
Use the builtin static, not static from staticfiles:
<head>
{% load static %}
<link rel="stylesheet" type="text/css" href="{% static "css/style.css" %}">
</head>
https://docs.djangoproject.com/en/dev/ref/templates/builtins/#static
Django ships with a static template tag. You can use this regardless if you’re using RequestContext or not.
Note
The staticfiles contrib app also ships with a static template tag which uses staticfiles' STATICFILES_STORAGE to build the URL of the given path. Use that instead if you have an advanced use case such as using a cloud service to serve static files...