What I want to accomplish is have an separate application generate graphs that will be placed in a directory of my Django project. Then in my template loop through and display all the graphs from that directory on the webpage. The generated graphs will be refreshed daily and will be of varying numbers depending on the day (so some days it could be 20 and/or the next it could be 50).
Option 1)
I don't think I want to use django manage.py collectstatic everyday. I've never gotten to the point of deploying a Django project to a server but my assumption is that I would have to collectstatic manually everyday on the server (which I could be thoroughly off on here)
Option 2)
I've tried creating a model Model Picture. The Char field is just my relative path to the picture. From there in my views I'm to rendering the path in the index(request) View Picture. From there in my template I'm trying to loop through the picture relative paths and show them Template Picture. When I remove photos = Photo.objects.all() & the {% for img in photos %} in the template the page does load Webpage working. However when I run it with all those parts in there I get a blank webpage with "what do you want to do with index" at the bottom. Webpage not working
Interested to hear if there are any better way of doing this . I'm not trying to user upload an image field because the amount of graphs will be substantial.
Details on Option 2:
---Notes---
Top Lvl Directory is--chartingtest-project
chartingtest is the project
sectors is the name of the app
media folder is a folder in the top level directory, not within the project or test folder
models.py in sectors app contains
class Photo(models.Model):
photoname = models.ImageField()
views.py in sectors app contains
from .models import Photo
def index(request):
pets = Pets.objects.all()
photos = Photo.objects.all()
return render(request, 'index.html', {'pets': pets}, {'photos': photos})
index.html template
{% load static %}
<H1>Hello World Index!</H1>
#Testing bringing in variables from a model (2020/05/07 Works!)
<ul>
{% for pet in pets %}
<li>{{pet.name}}</li>
{% endfor %}
</ul>
# ************************************
# This is where I'm trying display generated pictures from the media folder
# ************************************
<ul>
{% for img in photos %}
<li>
<img src="chart1s/{{img.image.url}}" />
</li>
{% endfor %}
</ul>
#Testing Static Image (2020/05/08 Works!)
<img src="{% static "OIP.jpg" %}"/>
<img src="{% static "temp_fig_00.png" %}"/>
settings.py in chartingtest project folder
#Media ROOT
MEDIA_ROOT = os.path.join(BASE_DIR, 'media/')
MEDIA_URL = '/media/'
You are correct that using static files will not work, by their name static files are not supposed to change.
The solution is to create a media folder and have your application save the graphs to that folder. Your model picture should point to that folder. Like you said, in your templates you can then iterate over that model to display all the graphs.
In production, you should create a cloud storage bucket and save your images there. Then make sure your settings.py directs any requests for images to your storage bucket.
Your picture model should use models.ImageField(), not a typical CharField, image = models.ImageField(). In your template as you iterate, you should call each image with <img src="{{ picture.image.url }}"
Apart from that, I would need to look in depth at the code to see what's going on, and I don't click links on stackoverflow posts. If you'd post the code in a comment might be able to take a closer link, but try those things first!
Related
I've just started out with Django and have tried making an audio player application website. I (admin) want to be able to upload audio files that visitors can listen to.
I've created a model for succesfully uploading a file, taking a input file name, and storing it in a media folder in within my app directory:
class Song(models.Model):
name = models.CharField(max_length=125)
audio_file = models.FileField(upload_to='audio_player/media/audio_player/')
def __str__(self):
return self.name
In my Template I then have a for loop set up to create list of audio players for every different audio track.:
<div class="container">
{% for song in songs %}
<audio controls id="player">
<source src="{{ song.audio_file.url }}" type="audio/wav">
</audio>
{% endfor %}
</div>
Now this is where I've gotten stuck. The audio player appears accordingly, but you cannot play any audio. I've tried to check via Chromes DevTools and there the source, or src, is the correct file path to the files.
<source src="audio_player/media/audio_player/Song.wav" type="audio/wav">
I've been going crazy for the last day or so trying to figure out what is causing it not to work. I spent a lot of time trying to get it to source the correct path for the files but even though it seems to do that the files still can't be played.
I suspect that it could have something to to with passing the files into the template, from what I understand you should be able to pass a file as context right?
This is how my views are set up:
def ap(request):
context = {
"songs": Song.objects.all(),
}
return render(request, "audio_player/home.html",context)
Thankful for any help I can receive! Sorry for any eventual formatting errors and such...
Got it to work by setting these in settings.py
MEDIA_URL = 'media/'
MEDIA_ROOT = os.path.join(BASE_DIR, 'media')
...and by adding this to my urls.py
+ static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)
...as well as changing my FileField Upload to
upload_to="audio_player/"
(Pretty much, just looking at the Django official docs again but being aware that I was not understanding things correctly and pretty much copying what it said straight up worked)
<div class="container">
{% for song in songs %}
<audio controls id="player">
<source src="{% if song.audio_file %}{{ song.audio_file.url }}{% endif %}" type="audio/wav">
</audio>
{% endfor %}
</div>
I am sending my images from my web server Django like follows :
localhost:8000/media/images/foo.png
My question is am I sending the images is the correct way? I think it is not necessary to send the server since I am the only one who serves the photographs. Any ideas, something like this media/images/foo.png.
In order that in the img tag of HTML this is a relative path and not a link.
For serving images in Django,
First make sure that you have your MEDIA_ROOT and MEDIA_URL defined inside the settings.py file.
Now let's say you have a model, models.py
class SomeModel(models.Model):
image = models.ImageField(upload_to = 'your_directory_inside_media')
#Rest of the fields
Next inside your views,
model_object = SomeModel.objects.get(...) #get an instance of model which has an ImageField
context = {'image' : model_object.image }
html = render(request , 'some_html.html' , context)
And finally inside your HTML,
{% load static %}
<img src="{% get_media_prefix %}{{ image.image }}">
Hope this helps. Thanks.
I am using Django and i want to import an image to my about.html file
Both the picture and the about.html are in the same file, see the picture down
i am trying to insert the image like this, but i get a broken picture icon
<img src="templates/WebApp/rolomatik_logo_crna_verzija.png"
Any suggestions please?
You cannot insert an image in that way. You need to keep that in a static folder.
Create a folder named static and place your image inside it.
Then use {% load static %} at the top of your template.
Your img tag should look like this: <img src="{% static "rolomatik_logo_crna_verzija.png" %}" />
For more details refer: https://docs.djangoproject.com/en/1.11/howto/static-files/
You should create a folder static in your app. Inside that you have to create another folder with name same as your app name. In your case it should be SmartApp/static/SmartApp/ and put your image in the folder.
After this use {% load static %} at the top of your template,inside your <head> tag. After this you can use the image like this:
<img src="{% static 'SmartApp/rolomatik_logo_crna_verzija.png' %}" >
I'm working to build a django web application. I'm using adobe brackets for the html and I'm trying to use an image from my folders on the website. The image appears during the brackets simulation, but not during django runserver.
here is my folder directory:
mysite-
Images-
livestream-
helloworld.jpg
templates-
livestream-
helloWorld.html
This is a very simplified version of the site, but you get the idea.
My html code asks for the image:
<img src="../../Images/livestream/helloworld.jpg" alt="helloWorld" width="590" height="269">
when I run the django server it returns:
[18/Jul/2013 09:11:40] "GET /livestream/Images/livestream/helloworld.jpg HTTP/1.1" 404 2605
Does anyone know how to fix this issue?
This has to do with how your staticfiles app related settings are set up for your project.
You should also use the static template tag in order to fetch your static media.
For example, assuming that your structure under the location of any filepath within the STATICFILES_DIRS tuple is the following:
{{STATICFILES_ROOT_DIR}}/Images/livestream/helloworld.jpg
you can fetch the static file using:
{% load static from staticfiles %}
{% static "Images/livestream/helloworld.jpg" as myimg %}
<img src="{{ myimg }}" alt="helloworld" />
Why don't you set your {{ STATIC_URL }} in your settings, as per the docs to point to your Images folder and then just type in
<img src="{{ STATIC_URL }}livestream/helloworld.jpg" alt="helloWorld" width="590" height="269">
This is the standard approach to manage static files, and will turn out useful in the future as well
i use the django's default admin for the admin site, and i create a app named "project"
Then in the project change form, i want to show and dynamic image, i plan to draw some charts using the google API, so i must put change the html form to add a in the html file as below:
So my question is that how can i modify the django's default templates for this page, i can not find the form in templates/ folder, is this page named "change_form"? "change_list"? or some other names. If so ,how do i only change the form for app "Project" since maybe i will create some other apps in the same level with "project"
You need a place for static files which is valid.
Then place an admin directory inside that static files directory.
Then add your addname as a directory like this:
Root
yourapp
static
admin
yourapp
file_to_overwrite
Find your Django files. Then go to:
contrib/admin/templates/admin
On OSX this would be:
/Library/Python/2.7/site-packages/django/contrib/admin/templates/admin
Copy the file you want to overwrite to yourapp directory like above.
EDIT:
If you want to change a single form for a single app:
For example:
Root
yourapp
static
admin
yourapp
modelname
change_form.html
Only the model "modelname" will be affected by this html-file.
A good way to do this as the docs suggests is go with #Rickard Zachrisson answer but instead of copying it use the "extends" block and import super.
this should be a better approach since you are not directly overriding the admin templates but instead inheriting them.
This is how the docs suggests to do it when inserting JS for example:
{% extends 'admin/change_form.html' %}
{% load static %}
{% block admin_change_form_document_ready %}
{{ block.super }}
<script type="text/javascript" src="{% static 'app/formset_handlers.js' %}"></script>
{% endblock %}