I am new to Django (1.10) so please excuse me. I am trying to visualise images from my model Clothes. Trying to create some sort of small webshop to train.
My Model:
from __future__ import unicode_literals
from django.db import models
from django.utils import timezone
class Clothes(models.Model):
user = models.ForeignKey('auth.User')
title = models.CharField(max_length=200)
description = models.TextField()
image = models.ImageField(upload_to = '/pic_folder/', default = '/pic_folder/None/no-img.jpg')
type_clothes = models.CharField(max_length=100)
created_date = models.DateTimeField(
default=timezone.now)
published_date = models.DateTimeField(
blank=True, null=True)
class Meta:
verbose_name = "Kleding"
verbose_name_plural = "Kleding"
def publish(self):
self.published_date = timezone.now()
self.save()
def __str__(self):
return self.title
Views.py
from django.shortcuts import render
from django.utils import timezone
from .models import Clothes
def clothes_overview(request):
clothes= Clothes.objects.filter(published_date__lte=timezone.now())
return render(request, 'Clothes/clothes_overview.html', {'clothes' : clothes})
clothes_overview.html
{% load staticfiles %}
<html>
<head>
<title>WebShop</title>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
<link rel="stylesheet" href="{% static 'css/clothes.css' %}">
</head>
<body>
<div>
<h1>Clothing WebShop</h1>
</div>
{% for cloth in clothes %}
<div>
<p>published: {{ cloth.published_date }}</p>
<h1>{{ cloth.title }}</h1>
// DISPLAY IMAGE HERE
<p>{{ cloth.text|linebreaksbr }}</p>
</div>
{% endfor %}
</body>
</html>
I have tried one option which I came across by searching Stack:
<img src="{{ cloth.image.url }}">
This helped others but still left my page showing broken images. I looked in the source using Google Chrome and found that the path is (specific for the hoodie.jpg):
<img src="pic_folder/hoodie.jpg">
I then tried another method:
<img src="{% static 'pic_folder/image.jpg' %}">
This did show the image.jpg in my browser multiple times! The path which I found is:
<img src="/static/pic_folder/image.jpg">
I somehow need to combine these two methods so that the images are loaded dynamically into the webpage. Could someone help me?
Djangos static template tag, allows you to pass in variables, so as you suggest - combine your approaches
<img src="{% static cloth.image.url %}">
Related
I am trying to create a dropdown of countires which can be searchable based on this doc, however almost disappointed to find any solution by googling.
I am using django-cities-light package and django-autocomplete-light, and all I need to do is creating a field of countries/cities and populating it in a form and making it searchable,
in setting.py and installed apps:
INSTALLED_APPS = [
'dal',
'dal_select2',
'app.apps.MyownAppConfig',
'users.apps.UsersConfig',
'crispy_forms',
'tinymce',
'cities_light',
'django.contrib.admin',
'django.contrib.auth',
...
]
in models.py:
from tinymce.models import HTMLField
from cities_light.models import Country
class Post(models.Model):
...
descript = HTMLField(blank=True, null=True)
location = models.ForeignKey(Country, blank=True, null=True, on_delete=models.CASCADE)
def __str__(self):
return self.title
def get_absolute_url(self):
return reverse('post-detail', kwargs={'pk': self.pk})
in views.py:
class CountryAutocomplete(LoginRequiredMixin, autocomplete.Select2QuerySetView):
def get_queryset(self):
if not self.request.user.is_authenticated:
return Country.objects.none()
qs = Country.objects.all()
if self.q:
qs = qs.filter(name__icontains=self.q)
return qs
In forms.py:
class postform(forms.ModelForm):
class Meta:
model = Post
fields ='__all__'
exclude = ['date_published']
widgets = {
'location': autocomplete.ModelSelect2(url='country-autocomplete' , attrs={'data-placeholder': 'select location...', 'data-minimum-input-length': 4})
}
search_fields = ['name']
and in postform.html:
{% extends "app/base.html" %}
{% load crispy_forms_tags %}
{% load static %}
{% block content %}
<main>
<form id="dropdownForm" method="POST" action="" enctype="multipart/form-data">
<fieldset class="form-group">
{% csrf_token %}
<div class="content-section">
{{ form.descript }}
<label>location</label>
{{ form.location }}
</div>
</fieldset>
</form>
</main>
<script type="text/javascript" src="{% static 'admin/js/vendor/jquery/jquery.js' %}"></script>
{{ form.media }}
{% endblock content %}
and in url.py:
urlpatterns = [path('country-autocomplete/', CountryAutocomplete.as_view(model=Country), name='country-autocomplete')]
But what I get is this:
Moreover, in terminal I see this msg:
"GET /static/vendor/select2/dist/css/select2.css HTTP/1.1" 404 1832
I also had a look to all available questions in SO, including this one, but didn't help that much. Could you please help me with this problem a bit?
This is a weird error to me. If you are using venv, try to remove the django-autocomplete-light folder and again replace it with a new one, and then check if you still get the same error! Also in your base.html file, make sure the .js links are in order, because extra script could be loaded on the top of the previews one, so the developer should take care of them. It should be something like:
<script type="text/javascript" src="{% static 'admin/js/vendor/jquery/jquery.js' %}"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"</script>
<link href="{% static '/autocomplete_light/select2.css' %}" type="text/css" media="all" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/select2#4.1.0-beta.1/dist/js/select2.min.js"></script>
Try to use webkit inspector to check if jquery is not loaded twice.
I have been working at a Django App. Basically, the function of the app is to take the input as a subject name from user using a Form, take the details of progressed activities of that subject of that specific user, and save each of that detail in a single variable. It involved 3 Models viz. User Model (Django's default) Subject Model and Detail Model, finally it will use those variables to which details are assigned, and calculate the performance using fuzz_algo(), and then return the result in the form of Messages to the Template.
Everything seems to be fine, but when I click the button Calculate in the template users/performance_calculator.html, it give this error ValueError: too many values to unpack (expected 2) at this statement skype = Detail.objects.filter(subject__subject=sub, user__username=User.username).get('skype_session_attendance') in views.py
My views.py:
from django.shortcuts import render, redirect
from django.contrib import messages
from .forms import PerformanceCalculatorForm
from django.contrib.auth.decorators import login_required
from django.contrib.auth.models import User
from .models import Subject, Detail
from .fuzzy_logic_algo import fuzz_algo
def performanceCalculator(request):
skype = 0
internal_course = 0
prg_lab = 0
mid_marks = 0
final_marks = 0
sub = 0
if request.method == 'POST':
performance_form = PerformanceCalculatorForm(request.POST)
if performance_form.is_valid():
performance_form.save()
sub = performance_form.cleaned_data.get('subject')
skype = Detail.objects.filter(subject__subject=sub, user__username=User.username).get('skype_session_attendance')
internal_course = Detail.objects.filter(subject__subject=sub, user__username=User.username).get('internal_course_marks')
prg_lab = Detail.objects.filter(subject__subject=sub, user__username=User.username).get('programming_lab_activity')
mid_marks = Detail.objects.filter(subject__subject=sub, user__username=User.username).get('mid_term_marks')
final_marks = Detail.objects.filter(subject__subject=sub, user__username=User.username).get('final_term_marks')
result = fuzz_algo(skype, internal_course, prg_lab, mid_marks, final_marks)
messages.success(request, result)
return redirect('performance_calculator')
else:
performance_form = PerformanceCalculatorForm()
context = {
'performance_form': performance_form
}
return render(request, 'users/performance_calculator.html', context)
My models.py:
from django.db import models
from django.contrib.auth.models import User
class Subject(models.Model):
user = models.ForeignKey(User, on_delete=models.CASCADE)
subject = models.CharField(max_length=100)
def __str__(self):
return '{} ({})'.format(self.subject, self.user.username)
class Detail(models.Model):
user = models.ForeignKey(User, on_delete=models.CASCADE)
subject = models.OneToOneField(Subject, on_delete=models.CASCADE)
skype_session_attendance = models.FloatField()
internal_course_marks = models.FloatField()
programming_lab_activity = models.FloatField()
mid_term_marks = models.FloatField()
final_term_marks = models.FloatField()
def __str__(self):
return f'{self.subject, (self.user.username)} Details'
class Sub(models.Model):
s = models.CharField(max_length=100)
My forms.py:
from django import forms
from .models import Profile, Sub
class PerformanceCalculatorForm(forms.ModelForm):
subject = forms.CharField(max_length=100)
class Meta:
model = Sub
fields = ['subject']
My performance_calculator.html (template):
{% load static %}
{% load crispy_forms_tags %}
<!DOCTYPE html>
<html>
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="{% static 'esacp/main.css' %}">
<title>Expert System for Assessing Programming Course Performance</title>
</head>
<body>
<main role="main" class="container">
<div class="row">
<div class="col-md-8">
{% if messages %}
{% for message in messages %}
<div class="alert alert-{{ message.tags }}">
{{ message }}
</div>
{% endfor %}
{% endif %}
{% if not request.user.is_superuser and not request.useris_staff %}
<div class="account-heading">
<h2>
Performance Calculator
</h2>
</div>
<div class="content-section">
<form method="POST">
{% csrf_token %}
<fieldset class="form-group">
<legend class="border-bottom mb-4"></legend>
{{ performance_form|crispy }}
</fieldset>
<div class="from-group">
<button class="btn btn-outline-info" type="submit">Calculate</button>
</div>
</form>
</div>
{% endif %}
</div>
</div>
</main>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>
The full error I get at the statement skype = Detail.objects.filter(subject__subject=sub, user__username=User.username).get('skype_session_attendance') is:
ValueError at /esacp/performance-calculator/
too many values to unpack (expected 2)
Request Method: POST
Request URL: http://localhost:8000/esacp/performance-calculator/
Django Version: 3.0.3
Exception Type: ValueError
Exception Value:
too many values to unpack (expected 2)
Exception Location: C:\environments\bsse_fyp\lib\site-packages\django\db\models\sql\query.py in build_filter, line 1247
Python Executable: C:\environments\bsse_fyp\Scripts\python.exe
Python Version: 3.8.1
Python Path:
['C:\\Users\\khubi\\OneDrive\\Desktop\\FYP\\test_phase',
'C:\\Users\\khubi\\AppData\\Local\\Programs\\Python\\Python38-32\\python38.zip',
'C:\\Users\\khubi\\AppData\\Local\\Programs\\Python\\Python38-32\\DLLs',
'C:\\Users\\khubi\\AppData\\Local\\Programs\\Python\\Python38-32\\lib',
'C:\\Users\\khubi\\AppData\\Local\\Programs\\Python\\Python38-32',
'C:\\environments\\bsse_fyp',
'C:\\environments\\bsse_fyp\\lib\\site-packages']
Server time: Thu, 14 May 2020 07:12:19 +0000
I don't what has gone wrong and why it is showing this error. I read other threads here related to same issues, but their problem was they were using a 2D tuple instead of 1D tuple, or sometime dictionary or list issues, but I don't have any of that.
I have spent hours looking for the issue but I am unable to find one. Help will be really appreciated.
detail = Detail.objects.filter(...).first()
if detail:
skype = detail.skype_session_attendance
You are calling get method of QuerySet instance. Which requires kwargs and returns one instance or throws error if result is None or there are more than one instance.
To get skype value you must first get instance.
I am a beginner learning Django through a building an app, called PhoneReview. It will store reviews related to the latest mobile phone. It will also display phone brands, along with the associated phone models and their reviews.
Right now, I am facing a problem. I have added two phone brands, Samsung and Apple, through Django admin. They are being displayed at http://127.0.0.1:8000/index.
When I click on Samsung, I see three phone models, Galaxy S10, Galaxy Note 10 and iPhone 11, which have already been added through Django admin. However, iPhone 11 is not supposed to be displayed here, as its brand is Apple, not Samsung. So, basically, when I click on Samsung, only Galaxy S10 and Galaxy Note 10 are supposed to be displayed, not iPhone 11.
How can I fix the issue?
Here are my codes of models.py located inside PhoneReview folder:
from django.db import models
from django.template.defaultfilters import slugify
# Create your models here.
class Brand(models.Model):
brand_name = models.CharField(max_length=100)
origin = models.CharField(max_length=100)
manufacturing_since = models.CharField(max_length=100, null=True, blank=True)
def __str__(self):
return self.brand_name
def save(self, *args, **kwargs):
self.slug = slugify(self.brand_name)
super().save(*args, **kwargs)
class PhoneModel(models.Model):
brand = models.ForeignKey(Brand, on_delete=models.CASCADE)
model_name = models.CharField(max_length=100)
launch_date = models.CharField(max_length=100)
platform = models.CharField(max_length=100)
def __str__(self):
return self.model_name
class Review(models.Model):
phone_model = models.ManyToManyField(PhoneModel, related_name='reviews')
review_article = models.TextField()
date_published = models.DateField(auto_now=True)
# slug = models.SlugField(max_length=150, null=True, blank=True)
link = models.TextField(max_length=150, null=True, blank=True)
def __str__(self):
return self.review_article
Here are my codes of urls.py located inside PhoneReview folder:
from . import views
from django.urls import path
urlpatterns = [
path('index', views.BrandListView.as_view(), name='brandlist'),
path('phonemodel/<int:pk>/', views.ModelView.as_view(), name='modellist'),
path('details/<int:pk>/', views.ReviewView.as_view(), name='details'),
]
Here are my codes of views.py located inside PhoneReview folder:
from django.shortcuts import render
from django.views import generic
from .models import Brand, PhoneModel, Review
class BrandListView(generic.ListView):
template_name = 'PhoneReview/index.html'
context_object_name = 'all_brands'
def get_queryset(self):
return Brand.objects.all()
class ModelView(generic.ListView):
template_name = 'PhoneReview/phonemodel.html'
context_object_name = 'all_model_name'
def get_queryset(self):
return PhoneModel.objects.all()
class ReviewView(generic.DetailView):
model = Review
template_name = 'PhoneReview/details.html'
Here are my codes of apps.py located inside PhoneReview folder:
from django.apps import AppConfig
class PhonereviewConfig(AppConfig):
name = 'PhoneReview'
Here are my codes of index.html located inside templates folder:
{% extends 'PhoneReview/base.html' %}
{% load static %}
{% block title%}
Brand List
{% endblock %}
{% block content %}
<!--Page content-->
<h1>This is Brand List Page</h1>
<h2>Here is the list of the brands</h2>
<ul>
{% for brand in all_brands %}
<!-- <li>{{ brand.brand_name }}</li>-->
<li>{{ brand.brand_name }}</li>
{% endfor %}
</ul>
<img src="{% static "images/brandlist.jpg" %}" alt="Super Mario Odyssey" /> <!-- New line -->
{% endblock %}
Here are my codes of phonemodel.html located inside templates folder:
{% extends 'PhoneReview/base.html' %}
{% load static %}
{% block title%}
Phone Model Page
{% endblock %}
{% block content %}
<!--Page content-->
<h1>This is Phone Model Page</h1>
<h2>Here is the phone model</h2>
<ul>
{% for phonemodel in all_model_name %}
<li>{{ phonemodel.model_name }}</li>
{% endfor %}
</ul>
<img src="{% static "images/brandlist.jpg" %}" alt="Super Mario Odyssey" /> <!-- New line -->
{% endblock %}
Here are my codes of details.html located inside templates folder:
{% extends 'PhoneReview/base.html' %}
{% load static %}
<html>
<link rel="stylesheet" type="text/css" href="{% static "css/style.css" %}">
<html lang="en">
{% block title%}Details{% endblock %}
{% block content %}
<h1>This is the Details Page</h1>
<h2>Review:</h2>
<p>{{ review.review_article }}</p>
<h2>News Link:</h2>
<p>{{ review.link }}</p>
{% endblock %}
</html>
Have I done anything wrong in views.py?
Change your list view see this
class ModelView(generic.ListView):
template_name = 'PhoneReview/phonemodel.html'
context_object_name = 'all_model_name'
def get_queryset(self):
self.brand = get_object_or_404(Brand, pk=self.kwargs['pk'])
return PhoneModel.objects.filter(brand=self.brand)
I am a beginner in Django. I am building a Django app, named PhoneReview. It will store reviews related to the latest mobile phone. It will also display phone brands, along with the associated phone models.
I have already created models and views. I have also managed to add clickable link in the first template (brandlist.html). In the first template, when you click on the brand name, like Samsung, you will be taken to the page of the phone model, like Galaxy S10.
Here is the screenshot of the first template:
When you click the link, you will be taken to the second template (phonemodel.html). But now, I am facing an issue. There is no clickable link on the phone model ("Galaxy S10") that will direct you to details.html. Here is the screenshot.
Here are the codes of models.py inside the "PhoneReview" folder:
from django.db import models
from django.template.defaultfilters import slugify
# Create your models here.
class Brand(models.Model):
brand_name = models.CharField(max_length=100)
origin = models.CharField(max_length=100)
manufacturing_since = models.CharField(max_length=100, null=True, blank=True)
def __str__(self):
return self.brand_name
def save(self, *args, **kwargs):
self.slug = slugify(self.brand_name)
super().save(*args, **kwargs)
class PhoneModel(models.Model):
brand = models.ForeignKey(Brand, on_delete=models.CASCADE)
model_name = models.CharField(max_length=100)
launch_date = models.CharField(max_length=100)
platform = models.CharField(max_length=100)
def __str__(self):
return self.model_name
class Review(models.Model):
phone_model = models.ManyToManyField(PhoneModel, related_name='reviews')
review_article = models.TextField()
date_published = models.DateField(auto_now=True)
slug = models.SlugField(max_length=150, null=True, blank=True)
def __str__(self):
return self.review_article
Here are the codes of urls.py inside the "PhoneReview" folder:
from . import views
from django.urls import path
urlpatterns = [
path('index', views.BrandListView.as_view(), name='brandlist'),
path('phonemodel/<int:pk>/', views.ModelView.as_view(), name='modellist'),
path('details/<int:pk>/', views.ReviewView.as_view(), name='details'),
]
Here are the codes of views.py inside the "PhoneReview" folder:
from django.views import generic
from .models import Brand, PhoneModel, Review
class BrandListView(generic.ListView):
template_name = 'PhoneReview/brandlist.html'
context_object_name = 'all_brands'
def get_queryset(self):
return Brand.objects.all()
class ModelView(generic.DetailView):
model = PhoneModel
template_name = 'PhoneReview/phonemodel.html'
class ReviewView(generic.DetailView):
model = Review
template_name = 'PhoneReview/details.html'
Here are the codes of apps.py inside the "PhoneReview" folder:
from django.apps import AppConfig
class PhonereviewConfig(AppConfig):
name = 'PhoneReview'
Here are the codes of details.html inside the "templates" folder:
{% extends 'PhoneReview/base.html' %}
{% load static %}
<html>
<link rel="stylesheet" type="text/css" href="{% static "css/style.css" %}">
<html lang="en">
{% block title%}Details{% endblock %}
{% block content %}
<h1>This is the Details Page</h1>
<h2>Review:</h2>
<p>{{ review.review_article }}</p>
<h2>News Link:</h2>
<p>{{ review.slug }}</p>
{% endblock %}
</html>
Here are the codes of phonemodel.html inside the "templates" folder:
{% extends 'PhoneReview/base.html' %}
{% load static %}
{% block title%}
Phone Model Page
{% endblock %}
{% block content %}
<!--Page content-->
<h1>This is Phone Model Page</h1>
<h2>Here is the phone model</h2>
<ul>
<li>{{ phonemodel.model_name }}</li>
</ul>
<img src="{% static "images/brandlist.jpg" %}" alt="Super Mario Odyssey" /> <!-- New line -->
{% endblock %}
I tried replacing <li>{{ phonemodel.model_name }}</li> with <li>{{ phonemodel.model_name }}</li>. But I get an error, which looks like this:
NoReverseMatch at /phonemodel/1/
Reverse for 'details' with arguments '('',)' not found. 1 pattern(s) tried: ['details/(?P<pk>[0-9]+)/$']
How can I fix the issue?
There is no context variable named brand and you don't need it anyway. You should use the id of the phonemodel:
<li>
<a href = "{% url 'details' phonemodel.id %}">
{{ phonemodel.model_name }}
</a>
</li>
I am attempting to build a basic database of song information, regarding artists, songs and albums. On my page for any given album I am attempting to display the album art for a given album. I am using the built-in image upload feature within Django Admin to upload the images. The images urls are being saved correctly within mysql (I checked), but the images are not being displayed on the site. From what I have read online the possible problematic areas are either in the URLs file(which I have not modified to accommodate media) or in my MEDIA_URL, but I have followed instructions as Django has outlined. Below I am linking the code I think is relevant. Thank you in advance for the help!
views.py
from django.shortcuts import render_to_response
from django.template import RequestContext
from Radio.models import Song, Artist, Album
def SongsAll(request):
songs = Song.objects.all().order_by('songName')
context = {'songs' : songs}
return render_to_response('songsall.html', context, context_instance = RequestContext(request))
def SpecificSong(request, songname):
song = Song.objects.get(songName = songname)
context = {'song':song}
return render_to_response('specificsong.html',context, context_instance=RequestContext(request))
def SpecificArtist(request, artistname):
singer = Artist.objects.get(artistName = artistname)
songs = Song.objects.filter(artist = singer)
context = {'songs':songs}
return render_to_response('specificartist.html',context, context_instance=RequestContext(request))
def SpecificAlbum(request, albumname):
album = Album.objects.get(albumName = albumname)
songs = Song.objects.filter(album = album)
context = {'songs':songs}
return render_to_response('specificalbum.html', context, context_instance=RequestContext(request))
settings.py (only the relevant parts)
MEDIA_ROOT = '/home/kyle/Downloads/Django-1.5.1/radioSite/media/'
MEDIA_URL = 'http://127.0.0.1:8000/media/'
models.py
from django.db import models
class Artist(models.Model):
artistName = models.CharField(max_length = 30)
artistInfo = models.TextField()
def __unicode__(self):
return self.artistName
class Album(models.Model):
albumName = models.CharField(max_length = 30)
artist = models.ForeignKey('Artist')
date = models.DateTimeField('Release Date')
albumInfo = models.TextField()
albumArt = models.ImageField(upload_to="images/albumart/")
def __unicode__(self):
return self.albumName
class Song(models.Model):
songName = models.CharField(max_length = 30)
artist = models.ForeignKey('Artist')
album = models.ForeignKey('Album')
def __unicode__(self):
return self.songName
base.html
<html>
<head>
<link rel="stylesheet" type="text/css" href="{{ STATIC_URL }}css/Radio.css"/>
{% block extended %}{% endblock %}
</head>
<body>
<div id="pageContainer">
{% block content %}
{% endblock %}
</div>
</body>
</html>
specificalbum.html
{% extends "base.html" %}
{% block content %}
<div id="singlealbum">
<p><img src="{{ songs.0.album.albumart.url }}"/>Name: {{ songs.0.album }}</p>
<p>Artist:{{ songs.0.artist }}</a></p>
<p>Song list:</p>
{% for song in songs %}
<p>{{ song }}</p>
{% endfor %}
</div>
{% endblock %}
Are your images actually getting uploaded somewhere where a web server is expecting to serve them?
From your MEDIA_URL setting I'm guessing that you're trying to get the Django server to serve the images. You can check the documentation for how to do this during development, or if you're just learning Django, but please don't try to do this for anything at all serious - you'll be much better served by using a dedicated web server like Apache or the like.