Displaying a photo from a database
ron_...@yahoo.co.uk
Hello
I have this photo:
wildlifephotos/2017/07/26/2017-06-30_Lansdowne_-_Syrphus_Sp_A_01.JPGin the project’s following folder
mysite/mediaas per the following (simplified) tree
C:.
|
\---mysite
| db.sqlite3
| manage.py
|
+---media
| |
| \---wildlifephotos
| | 2017-04-29_-_11_Lansdowne_-_Moth_A_02.JPG
| |
| \---2017
| \---07
| \---26
| 2017-06-30_Lansdowne_-_Syrphus_Sp_A_01.JPG
|
+---mysite
| settings.py
| tests.py
| urls.py
| wsgi.py
| __init__.py
|
\---wlp_app
| admin.py
| apps.py
| models.py
| tests_apps.py
| tests_urls.py
| tests_views.py
| urls.py
| views.py
|
+---static
| \---wlp_app
| +---img
| fred.JPG
| Grandad.JPG
|
|
+---templates
\---wlp_app
base.html
index.html
photo.html
It is in the ‘photo_taken’ field of the ‘Photo’ table shown in the model.py shown below.
class Photo(models.Model):
name = models.CharField(max_length=50)
description = models.TextField()
location = models.ForeignKey(Location)
height_field = models.IntegerField(default=0)
width_field = models.IntegerField(default=0)
photo_taken = models.ImageField(upload_to='wildlifephotos/%Y/%m/%d',
null=True, blank=True,
width_field="width_field", height_field="height_field")
I am wanting to display the photo in the following 'personal/header.html’ file within the ‘block content’ to ‘endblock’:
<div class="col-sm-10">
<div class='container-fluid'>
<br><br>
{% block content %}
{% endblock %}
</div>
</div>
…where this block content is in my ‘photo.html’ file as shown here:
{% extends 'personal/header.html' %}
{% block content %}
<!-- 'index' from urls.py -->
<a href="{% url 'indexurl' %}">< Back</a>
{% if pht != None %}
<h2>{{ pht.name }}</h2>
<h4>{{ pht.location.name }}</h4>
<p>{{ pht.description }}</p>
<p>{{ pht.photo_taken }}</p>
{% else %}
<h1>Invalid item ID</h1>
{% endif %}
{% endblock %}
When I run the above I get the following text on the web page and is what I expect:
Hoverfly
Lansdowne
Syrphus is a genus of hoverflies
wildlifephotos/2017/07/26/2017-06-30_Lansdowne_-_Syrphus_Sp_A_01.JPG
However, when I try to add the photo to the page I’m getting stuck. If I try adding ‘<img src…’ as in the following:
{% block content %}
<!-- 'index' from urls.py -->
<a href="{% url 'indexurl' %}">< Back</a>
{% if pht != None %}
<h2>{{ pht.name }}</h2>
<h4>{{ pht.location.name }}</h4>
<p>{{ pht.description }}</p>
<p>{{ pht.photo_taken }}</p>
<img src={{ MEDIA_URL 'pht.photo_taken.name' }} class="responsive-img" style='max-height:100px;' alt="face">
{% else %}
<h1>Invalid item ID</h1>
{% endif %}
{% endblock %}…I get the following message (curly brackets and enclosed text were highlighted in red):
Could not parse the remainder: ' 'pht.photo_taken.name'' from 'MEDIA_URL 'pht.photo_taken.name''
28 <img src={{ MEDIA_URL 'pht.photo_taken.name' }} class="responsive-img" style='max-height:100px;' alt="face">
|
I’ve used MEDIA_URL since this refers to the media folder in the settings.py
STATIC_URL = '/static/'
MEDIA_ROOT = os.path.join(BASE_DIR, 'media')
MEDIA_URL = '/media/'
I’ve also used the following:
<img src={% MEDIA_URL 'pht.photo_taken.name' %} class="responsive-img" style='max-height:100px;' alt="face"> …which led to the following error message (curly brackets and enclosed text were highlighted in red):
Invalid block tag on line 28: 'MEDIA_URL', expected 'elif', 'else' or 'endif'. Did you forget to register or load this tag?
28 <img src={% MEDIA_URL 'pht.photo_taken.name' %} class="responsive-img" style='max-height:100px;' alt="face">
|
Changing MEDIA_URL in the above to MEDIA_ROOT gave the same error message and changing the ‘%’ to curly braces gave the earlier ‘Could not parse the remainder…’ message.
I’m clearly missing one or two important steps but cannot seen them. Can anyone advise me on what I am doing wrong, please?
Thanks
Ron
James Schneider
However, when I try to add the photo to the page I’m getting stuck. If I try adding ‘<img src…’ as in the following:
<!-- 'index' from urls.py -->
<a href="{% url 'indexurl' %}">< Back</a>
{% if pht != None %}
<h2>{{ pht.name }}</h2>
<h4>{{ pht.location.name }}</h4>
<p>{{ pht.description }}</p>
<p>{{ pht.photo_taken }}</p>
<img src={{ MEDIA_URL 'pht.photo_taken.name' }} class="responsive-img" style='max-height:100px;' alt="face">
{% else %}
<h1>Invalid item ID</h1>
{% endif %}
{% endblock %}
…I get the following message (curly brackets and enclosed text were highlighted in red):
28 <img src={{ MEDIA_URL 'pht.photo_taken.name' }} class="responsive-img" style='max-height:100px;' alt="face">
Note that {{ MEDIA_URL }} is strictly a variable reference and takes no other inputs. You are treating it as a template tag, which are enclosed using {% %}, hence the reason you are receiving this error.
I’m clearly missing one or two important steps but cannot seen them. Can anyone advise me on what I am doing wrong, please?
Thanks
Ron
ron_...@yahoo.co.uk
Your suggestion worked.
Thank you very much for your help.
Ron
