Displaying a photo from a database

[ron_w_add via Django users]

 

Hello

 

I have this photo:

 

wildlifephotos/2017/07/26/2017-06-30_Lansdowne_-_Syrphus_Sp_A_01.JPG

in the project’s following folder

 

mysite/media

as 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

-- 
You received this message because you are subscribed to the Google Groups 
"Django users" group.
To unsubscribe from this group and stop receiving emails from it, send an email 
to django-users+unsubscr...@googlegroups.com.
To post to this group, send email to django-users@googlegroups.com.
Visit this group at https://groups.google.com/group/django-users.
To view this discussion on the web visit 
https://groups.google.com/d/msgid/django-users/bef2a451-f504-4fad-bcad-a9ebef8fa9e0%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.